Move collapsed menu button from the dockbar

Question

I need to hide dockbar for non logged in guests. I did that by creating custom theme that uses welcome-theme as a parent, and the following snippet:

#if($is_signed_in)
    #dockbar()
#end

in theme's templates\portal_normal.vm.

This presents another problem - when page reorders to fit a mobile screen, menu collapses to a button in the dockbar which is hidden. I would love to have it collapse somewhere else, just that it isn't hidden - for example next to the small logo / site title, or as a first breadcrumbs item.

How to do it, or where to begin. I appreciate any help.

Answer 1

Menu collapses by default for phone and tablet viewports. You can create your own button to open/close collapsed menu in phone/tablet viewport. Check following simplified example:

Theme velocity template:

#if(!$is_signed_in)
<div id="mainNavigationToggle" class="btn btn-secondary">
    <i class="icon-reorder"></i>
</div>
#end

Theme main.js:

AUI().ready(function (A) {
        var navigationToggleBtn = A.one('#mainNavigationToggle'); // get our toggle button
        var navigationUl = A.one(Liferay.Data.NAV_SELECTOR); // get default navigation ul element
        if (navigationToggleBtn && navigationUl) { // do nothing when toggle button not present (user not signed in) or if navigation is not present
            navigationToggleBtn.on( // otherwise assign simple function that'll toggle 'open' menu class on default navigation which will cause it to open, same for menu toggle button
                'click',
                function (event) {
                    navigationToggleBtn.toggleClass('open');
                    navigationUl.toggleClass('open');
                }
            );
        }
    }
);

Theme custom.css:

#mainNavigationToggle {
  display: none; /* hide by default */
  @include respond-to(phone, tablet) {
    display: block; /* show only for phone and tablet viewports */
  }
}