从停靠栏中移动折叠的菜单按钮

Question

我需要为未登录的客人隐藏停靠栏。我通过创建使用欢迎主题作为父主题的自定义主题以及以下 sn-p 来做到这一点：

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

在主题的模板\portal_normal.vm.

这带来了另一个问题 - 当页面重新排序以适应移动屏幕时，菜单会折叠到停靠栏中隐藏的按钮。我希望它在其他地方折叠，只是它没有被隐藏 - 例如在小徽标/网站标题旁边，或作为第一个面包屑项目。

如何做，或从哪里开始。感谢您的帮助。

Answer 1

默认情况下，手机和平板电脑视口的菜单会折叠。您可以创建自己的按钮来打开/关闭手机/平板电脑视口中的折叠菜单。检查以下简化示例：

主题速度模板：

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

主题ma​​in.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');
                }
            );
        }
    }
);

主题custom.css：

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