도크 바에서 접힌 메뉴 버튼 이동

Question

로그인하지 않은 손님의 경우 도크 바를 숨겨야합니다. 내가했던 그 부모로 오신 것을 환영합니다 - 테마를 사용하는 사용자 정의 테마를 만들고, 다음 코드에 의해 :

#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 */ 
    } 
}