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

Question

我需要为未登录的访客隐藏停靠栏。我通过创建使用welcome-theme作为父级的自定义主题以及以下代码段来完成此操作：

#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

主题 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');
                }
            );
        }
    }
);

主题 custom.css ：

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