Ticket #4193 - Issues in Decorous in App mode.

modules/base/template/js/sidebar.js

@@ -0,0 +1,130 @@
+const isSidebarExpanded = toggleSidebarEl => {
+    return toggleSidebarEl.getAttribute('aria-expanded') === 'true' ? true : false;
+}
+
+const toggleSidebar = (sidebarEl, expand, setExpanded = false) => {
+    const bottomMenuEl = document.querySelector('[sidebar-bottom-menu]');
+    const mainContentEl = document.getElementById('main-content');
+    if (expand) {
+        sidebarEl.classList.remove('bx-mc-narrowed');
+        sidebarEl.classList.add('bx-mc-expanded');
+        sidebarEl.classList.add('xl:w-64');
+        sidebarEl.classList.remove('xl:w-16');
+        mainContentEl.classList.add('xl:ml-64');
+        mainContentEl.classList.remove('xl:ml-16');
+
+        document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
+            sidebarToggleEl.classList.remove('xl:hidden');
+            sidebarToggleEl.classList.remove('xl:absolute');
+            sidebarToggleEl.classList.remove('bx-mpi-toggle-hidden');
+        });
+
+        // toggle multi level menu item initial and full text
+        document.querySelectorAll('#' + sidebar.getAttribute('id') + ' ul > li > ul > li > a').forEach(e => {
+            e.classList.add('pl-11');
+            e.classList.remove('px-4');
+            e.childNodes[0].classList.remove('hidden');
+            e.childNodes[1].classList.add('hidden');
+        });
+
+        bottomMenuEl.classList.remove('flex-col', 'space-y-4', 'p-2');
+        bottomMenuEl.classList.add('space-x-4', 'p-4');
+        setExpanded ? toggleSidebarEl.setAttribute('aria-expanded', 'true') : null;
+    } 
+    else {
+        sidebarEl.classList.add('bx-mc-narrowed');
+        sidebarEl.classList.remove('bx-mc-expanded');
+        sidebarEl.classList.remove('xl:w-64');
+        sidebarEl.classList.add('xl:w-16');
+        mainContentEl.classList.remove('xl:ml-64');
+        mainContentEl.classList.add('xl:ml-16');
+        document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
+            sidebarToggleEl.classList.add('xl:hidden');
+            sidebarToggleEl.classList.add('xl:absolute');
+            sidebarToggleEl.classList.add('bx-mpi-toggle-hidden');
+        });
+
+        // toggle multi level menu item initial and full text
+        document.querySelectorAll('#' + sidebar.getAttribute('id') + ' ul > li > ul > li > a').forEach(e => {
+            e.classList.remove('pl-11');
+            e.classList.add('px-4');
+            e.childNodes[0].classList.add('hidden');
+            e.childNodes[1].classList.remove('hidden');
+        });
+
+        bottomMenuEl.classList.add('flex-col', 'space-y-4', 'p-2');
+        bottomMenuEl.classList.remove('space-x-4', 'p-4');
+        setExpanded ? toggleSidebarEl.setAttribute('aria-expanded', 'false') : null;
+    }
+}
+
+const toggleSidebarMobile = (sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose) => {
+    sidebar.classList.remove('bx-mc-narrowed');
+    sidebar.classList.add('bx-mc-expanded');
+    sidebar.classList.toggle('hidden');
+    sidebarBackdrop.classList.toggle('hidden');
+    toggleSidebarMobileHamburger.classList.toggle('hidden');
+    toggleSidebarMobileClose.classList.toggle('hidden');
+}
+
+const sidebar = document.getElementById('sidebar');
+const toggleSidebarEl = document.getElementById('toggleSidebar');
+if(sidebar) {
+    document.querySelectorAll('#' + sidebar.getAttribute('id') + ' ul > li > ul > li > a').forEach(e => {
+        var fullText = e.textContent;
+        var firstLetter = fullText.substring(0, 1);
+
+        var fullTextEl = document.createElement('span');
+        var firstLetterEl = document.createElement('span');
+        firstLetterEl.classList.add('hidden');
+        fullTextEl.textContent = fullText;
+        firstLetterEl.textContent = firstLetter;
+
+        e.textContent = '';
+        e.appendChild(fullTextEl);
+        e.appendChild(firstLetterEl);
+    });
+
+    // initialize sidebar
+    if (localStorage.getItem('sidebarExpanded') !== null) {
+        if (localStorage.getItem('sidebarExpanded') === 'true') {
+            toggleSidebar(sidebar, true, false);
+        } else {
+            toggleSidebar(sidebar, false, true);
+        }
+    }
+
+    if(toggleSidebarEl) {
+        toggleSidebarEl.addEventListener('click', () => {
+            localStorage.setItem('sidebarExpanded', !isSidebarExpanded(toggleSidebarEl));
+            toggleSidebar(sidebar, !isSidebarExpanded(toggleSidebarEl), true);
+        });
+
+        sidebar.addEventListener('mouseenter', () => {
+            if (!isSidebarExpanded(toggleSidebarEl)) {
+                toggleSidebar(sidebar, true);
+            }
+        });
+
+        sidebar.addEventListener('mouseleave', () => {
+            if (!isSidebarExpanded(toggleSidebarEl)) {
+                toggleSidebar(sidebar, false);
+            }
+        });
+    }    
+}
+
+const toggleSidebarMobileEl = document.getElementById('toggleSidebarMobile');
+if(toggleSidebarMobileEl) {
+    const sidebarBackdrop = document.getElementById('sidebarBackdrop');
+    const toggleSidebarMobileHamburger = document.getElementById('toggleSidebarMobileHamburger');
+    const toggleSidebarMobileClose = document.getElementById('toggleSidebarMobileClose');
+
+    toggleSidebarMobileEl.addEventListener('click', () => {
+        toggleSidebarMobile(sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose);
+    });
+
+    sidebarBackdrop.addEventListener('click', () => {
+        toggleSidebarMobile(sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose);
+    });
+}

modules/boonex/decorous/classes/BxDecorousModule.php

@@ -18,13 +18,31 @@ class BxDecorousModule extends BxBaseModTemplateModule
         parent::__construct($aModule);
     }
 
-	function serviceIncludeCssJs()
+    function serviceIncludeCssJs($sType)
     {
+        $sResult = '';
         if(BxDolTemplate::getInstance()->getCode() != $this->_oConfig->getUri())
-            return '';
-		
-    	$sCss = trim(getParam($this->_oConfig->getName() . '_styles_custom'));
-        return (!empty($sCss) ? $this->_oTemplate->_wrapInTagCssCode($sCss) : '') . $this->_oTemplate->_wrapInTagJs(BX_DOL_URL_MODULES . 'boonex/decorous/template/js/custom.js');
+            return $sResult;
+
+        switch($sType) {
+            case 'head':
+                $sCss = trim(getParam($this->_oConfig->getName() . '_styles_custom'));
+                if(!empty($sCss))
+                    $sResult .= $this->_oTemplate->_wrapInTagCssCode($sCss);
+
+                $sResult .= $this->_oTemplate->addJs([
+                    'custom.js'
+                ], true);
+            break;
+
+            case 'footer':
+                $sResult .= $this->_oTemplate->addJs([
+                    'modules/base/template/js/|sidebar.js'
+                ], true);
+                break;
+        }
+
+        return $sResult;
     }
 }
 

modules/boonex/decorous/data/template/system/css/common.css

@@ -1,31 +1,16 @@
 @import url(../../../../../../../template/css/common.css);
 
-.bx-main.bx-pt-application .bx-toolbar-content {
-    position: relative;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-align-items: center;
-    align-items: center;
-}
-.bx-main.bx-pt-application .bx-toolbar-content .bx-toolbar-1-container {
-    -webkit-flex: 0 0 auto;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-}
+
+/*-- Application mode: Toolbar --*/
 .bx-main.bx-pt-application .bx-toolbar-content #bx-logo-container {
-    -webkit-flex: 3 1 auto;
-    -ms-flex: 3 1 auto;
-    flex: 3 1 auto;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
     
-    margin-top: 0;
-    margin-bottom: 0;
-}
-.bx-main.bx-pt-application .bx-toolbar-content .bx-toolbar-2-container {
-    -webkit-flex: 1 1 auto;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
+    margin: 0;
 }
 
+
 .bx-btn {
     transition: all .3s cubic-bezier(.645,.045,.355,1);
 }

modules/boonex/decorous/data/template/system/pt_application.html

@@ -2,35 +2,61 @@
 <div class="bx-main bx-pt-application <bx_injection:injection_main_class />">
     <bx_injection:top />
     <div id="bx-toolbar" class="bx-header bx-def-image-bg-header bx-def-color-bg-header bx-def-border-header bx-shadow-header bx-def-z-index-nav cd-main-header">
-        <div class="bx-def-centered bx-def-padding-sec-leftright bx-def-box-sizing">
+        <div class="bx-def-padding-sec-leftright bx-def-box-sizing">
             <div class="bx-toolbar-content-wrapper bx-content-padding-header">
                 <div id="bx-toolbar-content" class="bx-toolbar-content bx-clearfix">
-                    <div id="bx-menu-toolbar-1-container" class="bx-toolbar-1-container">
+                    <div class="bx-toolbar-item">
+                        <!-- Sidebar Toggler -->
+                        <button id="toggleSidebar" aria-expanded="true" aria-controls="sidebar" class="hidden p-2 mr-6 text-gray-600 rounded cursor-pointer xl:inline hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700">
+                          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+                        </button>
+                        <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar" class="p-2 mr-2 text-gray-600 rounded cursor-pointer xl:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                          <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+                          <svg id="toggleSidebarMobileClose" class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                        </button>
+                    </div>
+                    <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-left bx-toolbar-1-container">
                         <bx_menu:sys_toolbar_site />
                     </div>
-                    <div id="bx-logo-container" class="bx-toolbar-logo-container">
+                    <div id="bx-logo-container" class="bx-toolbar-item bx-ti-logo bx-toolbar-logo-container">
                         <bx_injection:injection_logo_before />
                             __main_logo__
                         <bx_injection:injection_logo_after />
                     </div>
-                    <div id="bx-menu-toolbar-2-container" class="bx-toolbar-2-container cd-nav">
+                    <div class="bx-toolbar-item bx-ti-menu flex-2 hidden xl:block ml-4">
+                        <div class="bx-ti-cmt w-full">
+                            <bx_menu:sys_application />
+                        </div>
+                    </div>
+                    <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right bx-toolbar-2-container cd-nav">
                         <bx_menu:sys_toolbar_member />
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <div class="bx-main-content bx-def-page-width bx-def-centered">
-        <div class="bx-main-column narrow">
-            <div class="bx-menu-toolbar-padding">
-                <div class="bx-main-column-cnt bx-def-padding-topbottom">
-                    <bx_menu:sys_site_panel />
+    <div class="bx-main-content flex overflow-hidden">
+        <!-- BEG: Sidebar -->
+        <div id="sidebar" class="bx-main-column narrow fixed top-0 left-0 z-20 hidden xl:flex flex-col flex-shrink-0 w-64 h-full pt-16 duration-75 transition-width">
+            <div class="bx-mc-border relative flex flex-col flex-1 min-h-0 max-h-full pt-0 bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+                <div class="flex flex-col flex-1 py-2 overflow-y-auto">
+                    <div class="bx-mc-cnt flex-1 px-4 space-y-1 bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
+                        <bx_menu:sys_site_panel />
+                    </div>
+                </div>
+                <div class="absolute bottom-0 left-0 justify-center hidden w-full p-4 space-x-4 xl:flex" sidebar-bottom-menu>
+                    <!-- Some button based menu may be here -->
                 </div>
             </div>
         </div>
-        <div class="bx-main-column wide">
+        <div class="fixed inset-0 z-10 hidden bg-gray-900/50 dark:bg-gray-900/90" id="sidebarBackdrop"></div>
+        <!-- END: Sidebar -->
+
+        <!-- BEG: Main Content -->
+        <div id="main-content" class="bx-main-column wide relative w-full h-full overflow-y-auto xl:ml-64">
             <div class="cd-main-content-wrp">
                 <div class="cd-main-content bx-clearfix">
+                    <!-- default sys_site is here -->
                     <div class="content-wrapper-wrp">
                         <div class="content-wrapper bx-def-box-sizing">
                             <bx_injection:injection_between_cover_logo />

modules/boonex/decorous/data/template/system/scripts/BxTemplMenuSite.php

@@ -14,6 +14,7 @@ class BxTemplMenuSite extends BxTemplMenu
 {
     protected $_bSiteMenu;
     protected $_bSiteMenuInPanel;
+    protected $_bApplicationMenu;
 
     protected $_aHideFromSiteMenuInPanel;
 
@@ -23,6 +24,7 @@ class BxTemplMenuSite extends BxTemplMenu
 
         $this->_bSiteMenu = $this->_sObject == 'sys_site';
         $this->_bSiteMenuInPanel = $this->_sObject == 'sys_site_in_panel';
+        $this->_bApplicationMenu = $this->_sObject == 'sys_application';
 
         $this->_aHideFromSiteMenuInPanel = ['more-auto'];
     }
@@ -31,7 +33,7 @@ class BxTemplMenuSite extends BxTemplMenu
     {
         $sClass = 'bx-sliding-menu-main';
         $sStyle = 'display:none';
-        if($this->_bSiteMenu || $this->_bSiteMenuInPanel) {
+        if($this->_bSiteMenu || $this->_bSiteMenuInPanel || $this->_bApplicationMenu) {
             $sClass = 'bx-sliding-smenu-main';
             $sStyle = '';
         }

modules/boonex/decorous/install/sql/disable.sql

@@ -8,4 +8,4 @@ DELETE FROM `sys_alerts_handlers` WHERE `id` = @iHandler;
 
 
 -- INJECTIONS
-DELETE FROM `sys_injections` WHERE `name` = @sName;
+DELETE FROM `sys_injections` WHERE `name` IN (@sName, 'bx_decorous_footer');

modules/boonex/decorous/install/sql/enable.sql

@@ -13,4 +13,5 @@ INSERT INTO `sys_alerts` (`unit`, `action`, `handler_id`) VALUES
 
 -- INJECTIONS
 INSERT INTO `sys_injections` (`name`, `page_index`, `key`, `type`, `data`, `replace`, `active`) VALUES
-(@sName, 0, 'injection_head', 'service', 'a:2:{s:6:"module";s:11:"bx_decorous";s:6:"method";s:14:"include_css_js";}', 0, 1);
+(@sName, 0, 'injection_head', 'service', 'a:3:{s:6:"module";s:11:"bx_decorous";s:6:"method";s:14:"include_css_js";s:6:"params";a:1:{i:0;s:4:"head";}}', 0, 1),
+('bx_decorous_footer', 0, 'injection_footer', 'service', 'a:3:{s:6:"module";s:11:"bx_decorous";s:6:"method";s:14:"include_css_js";s:6:"params";a:1:{i:0;s:6:"footer";}}', 0, 1);

template/css/common.css

@@ -64,43 +64,45 @@ blockquote {
     min-height: 100vh;
 }
 
-.bx-main-content {
-    -webkit-flex-grow: 3;
-    flex-grow: 3;
+/*-- Application mode: Sidebar --*/
+.bx-main.bx-pt-application .bx-main-column .bx-menu-panel .bx-def-thumb-size {
+    width: 2rem;
+    height: 2rem;
+}
+.bx-main.bx-pt-application .bx-main-column.narrow.bx-mc-narrowed .bx-menu-panel .bx-profile-avatar-cnt {
+    -webkit-justify-content:center;
+    justify-content:center;
+}
+.bx-main.bx-pt-application .bx-main-column.narrow.bx-mc-narrowed .bx-mc-cnt {
+    padding-left: 0;
+    padding-right: 0;
+}
 
+/*-- Application mode: Toolbar --*/
+.bx-main.bx-pt-application .bx-toolbar-content {
     position: relative;
     display: -webkit-flex;
     display: flex;
-
-    height: 100%;
+    -webkit-align-items: center;
+    align-items: center;
 }
-.bx-main-column.narrow {
-    display: none;
-
+.bx-main.bx-pt-application .bx-toolbar-content .bx-toolbar-item.bx-ti-left {
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
-    
-    width: 0;
 }
-.bx-main-column.wide {
-    display: block;
-
-    -webkit-flex: 1 1 auto;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-
-    width: 100%;
-}
-.bx-media-desktop .bx-main-column.narrow {
-    display: block;
-    width: 25%;
+.bx-main.bx-pt-application .bx-toolbar-content .bx-toolbar-item.bx-ti-left .bx-menu-item-main-menu {
+    display: none;
 }
-.bx-media-desktop .bx-main-column.wide {
-    width: 75%;
+.bx-main.bx-pt-application .bx-toolbar-content .bx-toolbar-item.bx-ti-menu {
+    -webkit-flex: 2 1 auto;
+    -ms-flex: 2 1 auto;
+    flex: 2 1 auto;
 }
-.bx-main-content .bx-main-column .bx-def-page-width {
-    width: 100%;
+.bx-main.bx-pt-application .bx-toolbar-content .bx-toolbar-item.bx-ti-right {
+    -webkit-flex: 1 1 0%;
+    -ms-flex: 1 1 0%;
+    flex: 1 1 0%;
 }
 
 .bx-clear {

template/css/media-phone.css

@@ -52,7 +52,7 @@ html.bx-media-phone {
 
 
 /* general.css */
-.bx-media-phone #bx-toolbar-content .bx-toolbar-item.bx-ti-logo {
+.bx-media-phone .bx-main:not(.bx-pt-application) #bx-toolbar-content .bx-toolbar-item.bx-ti-logo {
     margin-left: 0.625rem;
     margin-right: 0.625rem;
 }

template/css/menu.css

@@ -316,7 +316,14 @@ ul.bx-menu-toolbar li a .bx-def-unit-alert-middle {
 }
 
 #bx-menu-toolbar-2-container .bx-menu-toolbar {
-    float:right;
+    position: relative;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+    -webkit-align-items: center;
+    align-items: center;
+    float: none;
 }
 
 #bx-menu-toolbar-2-container .bx-menu-toolbar .bx-menu-toolbar-item-title {
@@ -328,6 +335,53 @@ ul.bx-menu-toolbar li a .bx-def-unit-alert-middle {
     overflow:hidden;
 }
 
+/*--- Main (Application) Menu ---*/
+.bx-main.bx-pt-application .bx-sliding-smenu-main li.bx-menu-item {
+    width: auto;
+    height: auto;
+    margin-right: 0.5rem;
+}
+.bx-main.bx-pt-application .bx-sliding-smenu-main li.bx-menu-item.bx-menu-item-more-auto {
+    display: none;
+}
+.bx-main.bx-pt-application .bx-sliding-smenu-main .bx-menu-item a {
+    position: relative;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+
+    padding: 0.5rem;
+}
+.bx-main.bx-pt-application .bx-sliding-smenu-main .bx-menu-item .bx-menu-floating-blocks-icon .sys-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    margin: 0 0.5rem 0 0;
+    line-height: 1.5rem;
+    font-size: 1.25rem;
+}
+
+/*--- Sidebar (Application) Menu ---*/
+.bx-main.bx-pt-application .bx-main-column .bx-menu-panel .bx-menu-panel-item-cnt {
+    box-shadow: none;
+    border-width: 0px;
+}
+.bx-main.bx-pt-application .bx-main-column .bx-menu-panel .bx-menu-panel-item li.bx-menu-item {
+    margin-right: 0;
+}
+.bx-main.bx-pt-application .bx-main-column:not(.bx-mc-narrowed) .bx-menu-panel .bx-menu-panel-item li.bx-menu-item .bx-stl-mii .sys-icon {
+    margin-right: 0.5rem;
+}
+
+.bx-main.bx-pt-application .bx-main-column.bx-mc-narrowed .bx-menu-panel .bx-menu-panel-item li.bx-menu-item a {
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+.bx-main.bx-pt-application .bx-main-column.bx-mc-narrowed .bx-menu-panel .bx-menu-panel-item .bx-mpi-toggle-hidden {
+    position: absolute;
+    display: none;
+}
+
 /* --------------- floating blocks menu */
 .bx-sliding-menu-close,
 .bx-sliding-menu-close:hover {

template/menu_profile_followings.html

@@ -3,13 +3,13 @@
         <li class="bx-menu-item bx-menu-item-__name__ bx-def-round-corners __class_add__">
             <div class="bx-menu-item-cnt">
                 <div class="bx-menu-item-link bx-def-padding-thd-topbottom bx-def-padding-sec-leftright bx-def-color-bg-hl-hover">
-                    <a href="__link__" onclick="__onclick__"__attrs__>__title__</a>
-                    <span class="bx-menu-collapse bx-def-padding-sec-left">
-                        <a href="javascript:void(0)" onclick="javascript:bx_menu_toggle(this, '__object__', '__name__')">
+                    <a class="bx-stl-mil-gaps flex flex-auto items-center" href="__link__" onclick="__onclick__"__attrs__>
+                        <span class="bx-menu-item-title bx-stl-mit flex-1 uppercase" sidebar-toggle-item>__title__</span>
+                        <span class="bx-menu-collapse bx-def-padding-sec-left" sidebar-toggle-item>
                             <i class="sys-icon chevron-up bx-menu-hide"></i>
                             <i class="sys-icon chevron-down bx-menu-show"></i>
-                        </a>
-                    </span>
+                        </span>
+                    </a>
                 </div>
                 <bx_if:show_subitems>
                     <div class="bx-menu-item-subitems">

template/menu_profile_followings_subitems.html

@@ -3,7 +3,7 @@
         <div class="bx-menu-item-cnt bx-def-padding-thd-topbottom bx-def-padding-left bx-def-padding-sec-right">
             <a href="__link__" onclick="__onclick__"__attrs__>
                 <bx_include_auto:menu_icon.html />
-                <span class="bx-def-margin-sec-left-auto">__title__</span>
+                <span class="bx-def-margin-sec-left-auto" sidebar-toggle-item>__title__</span>
             </a>
             <bx_if:addon>
                 <div class="bx-menu-addon bx-def-padding-sec-left">

template/menu_vertical_more_less.html

@@ -6,10 +6,10 @@
                     <span class="bx-menu-item-icon">
                         <bx_include_auto:menu_icon.html />
                     </span>
-                    <span class="bx-menu-item-title bx-def-margin-sec-left-auto">__title__</span>
+                    <span class="bx-menu-item-title bx-def-margin-sec-left-auto" sidebar-toggle-item>__title__</span>
                 </a>
                 <bx_if:addon>
-                    <div class="bx-menu-addon bx-def-padding-sec-left">
+                    <div class="bx-menu-addon bx-def-padding-sec-left" sidebar-toggle-item>
                         <div class="bx-menu-addon-cnt bx-def-label menu">__addon__</div>
                     </div>
                 </bx_if:addon>

template/profile_avatar.html

@@ -1,24 +1,23 @@
 <div class="bx-profile-avatar bx-def-border-radius-block">
-    
-        <div class="bx-profile-avatar-cnt bx-def-padding-sec">
-            <div class="bx-pa-img">__profile_unit__</div>
-            <div class="bx-pa-info">
-                <div class="bx-pa-info-cnt bx-def-padding-left bx-def-box-sizing">
-                    <div class="bx-pai-line bx-def-font-h3">
-                        <a href="__profile_url__" title="__profile_title_attr__">__profile_title__</a>
-                    </div>
-                    <div class="bx-pai-line bx-def-margin-thd-top">
-                        <div><bx_include_auto:menu_icon.html /><span class="bx-def-padding-sec-left">__profile_acl_title__</span></div>
-                    </div>
+    <div class="bx-profile-avatar-cnt relative flex items-center">
+        <div class="bx-pa-img">__profile_unit__</div>
+        <div class="bx-pa-info w-full" sidebar-toggle-item>
+            <div class="bx-pa-info-cnt bx-def-padding-sec-left bx-def-box-sizing">
+                <div class="bx-pai-line font-semibold truncate">
+                    <a href="__profile_url__" title="__profile_title_attr__">__profile_title__</a>
                 </div>
-            </div>
-            <bx_if:show_switcher_icon>
-                <div class="bx-pa-actions">
-                    <a href="__switcher_url__" onclick="__switcher_onclick__">
-                        <div class="bx-pa-action bx-def-margin-sec-left bx-def-color-bg-hl bx-def-align-center"><i class="sys-icon arrows-alt-v"></i></div>
-                    </a>
+                <div class="bx-pai-line text-xs font-normal truncate uppercase tracking-wider">
+                    <div><bx_include_auto:menu_icon.html /><span class="bx-def-padding-sec-left">__profile_acl_title__</span></div>
                 </div>
-            </bx_if:show_switcher_icon>
+            </div>
         </div>
+        <bx_if:show_switcher_icon>
+            <div class="bx-pa-actions" sidebar-toggle-item>
+                <a href="__switcher_url__" onclick="__switcher_onclick__">
+                    <div class="bx-pa-action bx-def-margin-sec-left bx-def-color-bg-hl bx-def-align-center"><i class="sys-icon arrows-alt-v"></i></div>
+                </a>
+            </div>
+        </bx_if:show_switcher_icon>
+    </div>
 </div>
 __switcher__

template/pt_application.html

@@ -4,15 +4,30 @@
     <div id="bx-toolbar" class="bx-main-toolbar bx-def-z-index-nav">
         <div class="bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
             <div id="bx-toolbar-content" class="bx-clearfix">
-                <div id="bx-menu-toolbar-1-container">
+                <div class="bx-toolbar-item">
+                    <!-- Sidebar Toggler -->
+                    <button id="toggleSidebar" aria-expanded="true" aria-controls="sidebar" class="hidden p-2 mr-6 text-gray-600 rounded cursor-pointer xl:inline hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700">
+                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+                    </button>
+                    <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar" class="p-2 mr-2 text-gray-600 rounded cursor-pointer xl:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                      <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
+                      <svg id="toggleSidebarMobileClose" class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    </button>
+                </div>
+                <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-left bx-toolbar-1-container">
                     <bx_menu:sys_toolbar_site />
                 </div>
-                <div id="bx-logo-container">
+                <div id="bx-logo-container" class="bx-toolbar-item bx-ti-logo bx-toolbar-logo-container">
                     <bx_injection:injection_logo_before />
                     __main_logo__
                     <bx_injection:injection_logo_after />
                 </div>
-                <div id="bx-menu-toolbar-2-container">
+                <div class="bx-toolbar-item bx-ti-menu flex-2 hidden xl:block ml-4">
+                    <div class="bx-ti-cmt w-full">
+                        <bx_menu:sys_application />
+                    </div>
+                </div>
+                <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right bx-toolbar-2-container">
                     <bx_menu:sys_toolbar_member />
                 </div>
             </div>

template/scripts/BxBaseMenuSite.php

@@ -13,6 +13,8 @@
 class BxBaseMenuSite extends BxTemplMenu
 {
     protected $_bSiteMenuInPanel;
+    protected $_bApplicationMenu;
+
     protected $_aHideFromSiteMenuInPanel;
 
     public function __construct ($aObject, $oTemplate)
@@ -20,6 +22,7 @@ class BxBaseMenuSite extends BxTemplMenu
         parent::__construct ($aObject, $oTemplate);
 
         $this->_bSiteMenuInPanel = $this->_sObject == 'sys_site_in_panel';
+        $this->_bApplicationMenu = $this->_sObject == 'sys_application';
 
         $this->_aHideFromSiteMenuInPanel = ['more-auto'];
     }
@@ -28,11 +31,12 @@ class BxBaseMenuSite extends BxTemplMenu
     {
         $sClass = 'bx-sliding-menu-main';
         $sStyle = 'display:none';
-        if($this->_bSiteMenuInPanel)
+        if($this->_bSiteMenuInPanel || $this->_bApplicationMenu) {
+            $sClass = 'bx-sliding-smenu-main';
             $sStyle = '';
+        }
 
-        $s = parent::getCode();
-        return '<div id="bx-sliding-menu-' . $this->_sObject . '" class="' . $sClass . ' bx-def-z-index-nav bx-def-border-bottom" style="' . $sStyle . '"><div class="bx-sliding-menu-main-cnt">' . $s . '</div></div>';
+        return '<div id="bx-sliding-menu-' . $this->_sObject . '" class="' . $sClass . ' bx-def-z-index-nav bx-def-border-bottom" style="' . $sStyle . '"><div class="bx-sliding-menu-main-cnt">' . parent::getCode() . '</div></div>';
     }
     
     protected function _getMenuItem ($a)