Decoupling off-canvas drawer and hamburger menu

[darko-hrgovic]

Jens asked me to clarify the functionality of the off-canvas drawer after playing around with it this week.

We assumed that we could place arbitrary blocks into the drawer and it would persist and be separate from the main menu and hamburger menu, which isn't what happens in our testing.

I've enabled the drawer region and disabled the "Use the primary menu in the off-canvas drawer" option. I've placed a menu block into the region and it all works fine. On mobile, the drawer transforms into the hamburger menu and contains the menu block. Again, I assumed the drawer would persist and the hamburger would display the main menu as it normally does.

Let us know if our assumptions are incorrect in how the drawer is designed.

[occupant]

The original intent was to provide off-canvas primary navigation to alleviate issues of available horizontal space as well as allow for the addition of other blocks (search, custom menus, etc).

Your use case is lightly different as you want to use the off-canvas region for only additional blocks, retaining the default navigation (and mobile trigger). This means you'll need a custom trigger for the off-canvas functionality (ie. a fixed positioned button similar to this). Joel, Jens and I discussed this and we agreed that this is more specialized than we needed for a v.1.

However, by editing the page.tpl, you should be able to reinstate the default mobile trigger and add a new, custom trigger (using the off-canvas trigger as a starting point).

Removing the drawer-toggle--primary class from the default trigger and adding it to your new trigger should get you most of the way.

<a class="btn btn-navbar" data-toggle="collapse" data-target="#ubc7-unit-navigation">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>

And then adjusting this markup and placing as needed:

<?php if ($drawer_enabled): ?>
          <!-- UBC Unit Drawer Menu Button -->
          <button class="hamburger visible-md visible-lg drawer-toggle--primary" id="drawer-button">
            <span class="hamburger__elem">Menu</span>
            <span class="hamburger__elem">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </span>
          </button>
          <!-- End of UBC Unit Drawer Menu Button -->
        <?php endif; ?>

Hope that helps!

[darko-hrgovic]

Thanks for verifying the need for a new and separate trigger, which I'll start building here. Cheers!

[darko-hrgovic]

Our plan is to fork and build a separate flyout region on top of the develop branch.

I'm also tweaking a few things in develop branch that we noticed were amiss.