Foldable Sidemenu

Hello,

I am trying to create an admin dashboard template using beans.

My structure wouf havea a fixed header and sidemenu.

I would like the sidemenu to be hideable, meaning when the user click on a burger button on in the header, the sidemenu goes out of frame.

This is very similiar ti the default offcancas menu, except for a couplel of notable differences:

1. The sidemenu is open by default.
2. the content area width changes depending on wether or nt the sidemnu is open, (compared to the offcanvas pushing the content)

With beans i cant find to figure out how to toggle the offcanvas to be opened by default, and change its behaviour so that it doesnt push the content.

I could not rely on the offcanvas and do it from scratch, but i fear the required amount of JS will be out of my capabilities.

I've shared a couple of screen mockups that illustrate the goal https://www.dropbox.com/sh/mx48u8v50qlm605/AADe5MADAgpdCFnklLUgODt5a?dl=0

I hope you can provide a bit of guidance on how to get started with this.

Cheers

Hello @avidal,

I'd advise that you explore how UIKit's off-canvas behavior works. More specifically, look at the class attributes that it's applying or removing when you click on the Off-Canvas enabled button.

When you click on the button, what happens? Let's use the documentation page on UIKit as our example.

Here is the HTML when the button is not clicked:

<button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Off-canvas</button>
<div id="offcanvas-1" class="uk-offcanvas" aria-hidden="true">
  <div class="uk-offcanvas-bar" mode="push">
          <!-- left the rest out for brevity -->
    </div>
</div>    

When you click on the button, look at the HTML using Developer Tools in Chrome or Firefox:

<button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Off-canvas</button>
<div id="offcanvas-1" class="uk-offcanvas uk-active" aria-hidden="false">
  <div class="uk-offcanvas-bar uk-canvasbar-show" mode="push">
          <!-- left the rest out for brevity -->
    </div>
</div>    

What happened? Compare the before and after HTML.

• It added uk-active class to the offcanvas container.
• It added uk-canvasbar-show to the first `` child.
• Nothing changed on the button.

Hmm, that means if you render the page with those class attributes, then you are reversing how the button works. Right?

How? Let me ask you how you are applying the HTML class attributes to the sidebar right now? If it's in your child theme, which I assume yes since you're customizing the dashboard, then add those classes.

Give it a try.

Hi Tonya,

Thank you for joining the team at beans, its such an amazing framework and it should only get better now.

In theory what you explained works, however my issue is that the off-canvas bar still behaves as a temporary element:

1. The off canvas pushes the main content out of frame, i would like it to just resize the main content.
2. when the off-canvas is active, the main content doesnt scroll

in the end what i am after is not an off-canvas menu per say, its more of a way for my user to be able to hide the menu if not needed (smaller screens for example), its quite a similar behavor to the Wordpress admin menu, you can click the little arrow at the bottom to compress it.

Thank you

Hey @avidal,

To achieve the behavior you want, you'll need to dig into the code and adjust it. But you're in luck, as you've already identified that you want the exact same behavior that exists right now in the WordPress admin menu.

Okay, what should you do then? You have a few options incuding to reuse what's already available from WordPress or to adapt it for your own needs.

Option 1: Reuse their functionality, styling, and responsive behavior

1. The styles are driven by what? The class attributes. Therefore, you can utilize their class attribute structure to reuse their styling.
2. You can reuse the collapse button's HTML which will utilize WordPress's script functionality. How?

You'll need to adjust your menu's HTML structure to fit how WordPress' is laid out.

How to Reuse the Collapse Button

Open up developer tools in either Chrome or Firefox. In the admin area, right click on the collapse button. Look at the HTML of that button and the entire admin menu. What do you see?

1. It's an unordered list.
2. The button has an id attribute of collapse-menu, which you'll want too.
3. The <ul> has an id attribute of adminmenu. Yes, you want that too.

Option 2: Emulate

The other option is to emulate how they do it, adapting it for your own needs. The collapse menu button's behavior is located in wp-admin/js/common.js:

  $( '#collapse-button' ).on( 'click.collapse-menu', function() {
   var viewportWidth = getViewportWidth() || 961;

    // reset any compensation for submenus near the bottom of the screen
    $('#adminmenu div.wp-submenu').css('margin-top', '');

   if ( viewportWidth < 960 ) {
      if ( $body.hasClass('auto-fold') ) {
        $body.removeClass('auto-fold').removeClass('folded');
       setUserSetting('unfold', 1);
        setUserSetting('mfold', 'o');
       menuState = 'open';
     } else {
        $body.addClass('auto-fold');
        setUserSetting('unfold', 0);
        menuState = 'folded';
     }
   } else {
      if ( $body.hasClass('folded') ) {
       $body.removeClass('folded');
        setUserSetting('mfold', 'o');
       menuState = 'open';
     } else {
        $body.addClass('folded');
       setUserSetting('mfold', 'f');
       menuState = 'folded';
     }
   }

   $document.trigger( 'wp-collapse-menu', { state: menuState } );
  });

Walk through the code and explore how it works. Port it over into your project, adjusting it for your needs.

Cheers, Tonya