Ticket #5228 - Issue with Sidebar in Application mode in all templates except Artificer.

install/sql/system.sql

@@ -4782,7 +4782,9 @@ INSERT INTO `sys_menu_templates` (`id`, `template`, `title`, `visible`) VALUES
 (29, 'menu_add_content.html', '_sys_menu_template_title_add_content', 0),
 (30, 'menu_panel.html', '_sys_menu_template_title_panel', 0),
 (31, 'menu_main_in_panel.html', '_sys_menu_template_title_main_in_panel', 0),
-(32, 'menu_multilevel.html', '_sys_menu_template_title_multilevel', 1);
+(32, 'menu_multilevel.html', '_sys_menu_template_title_multilevel', 1),
+(33, 'menu_toolbar_left.html', '_sys_menu_template_title_toolbar_left', 0),
+(34, 'menu_toolbar_right.html', '_sys_menu_template_title_toolbar_right', 0);
 
 CREATE TABLE IF NOT EXISTS `sys_objects_menu` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
@@ -4813,8 +4815,8 @@ INSERT INTO `sys_objects_menu` (`object`, `title`, `title_public`, `set_name`, `
 ('sys_site_manage', '_sys_menu_title_manage', '', '', 'system', 1, 0, 1, 'BxTemplMenuManage', ''),
 ('sys_site_panel', '_sys_menu_title_panel', '', 'sys_site_panel', 'system', 30, 0, 1, 'BxTemplMenuPanel', ''),
 ('sys_footer', '_sys_menu_title_footer', '', 'sys_footer', 'system', 2, 0, 1, 'BxTemplMenuFooter', ''),
-('sys_toolbar_site', '_sys_menu_title_toolbar_site', '', 'sys_toolbar_site', 'system', 5, 0, 1, 'BxTemplMenuToolbar', ''),
-('sys_toolbar_member', '_sys_menu_title_toolbar_member', '', 'sys_toolbar_member', 'system', 5, 0, 1, 'BxTemplMenuToolbar', ''),
+('sys_toolbar_site', '_sys_menu_title_toolbar_site', '', 'sys_toolbar_site', 'system', 33, 0, 1, 'BxTemplMenuToolbar', ''),
+('sys_toolbar_member', '_sys_menu_title_toolbar_member', '', 'sys_toolbar_member', 'system', 34, 0, 1, 'BxTemplMenuToolbar', ''),
 ('sys_add_content', '_sys_menu_title_add_content', '', 'sys_add_content_links', 'system', 29, 0, 1, 'BxTemplMenuSite', ''),
 ('sys_add_profile', '_sys_menu_title_add_profile', '', 'sys_add_profile_links', 'system', 14, 0, 1, 'BxTemplMenuProfileAdd', ''),
 ('sys_add_profile_vertical', '_sys_menu_title_add_profile_vertical', '', 'sys_add_profile_links', 'system', 6, 0, 1, 'BxTemplMenuProfileAdd', ''),

modules/base/template/js/sidebar.js

@@ -1,130 +1,132 @@
-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');
-        });
+document.addEventListener("DOMContentLoaded", function(event) {
+    const isSidebarExpanded = toggleSidebarEl => {
+        return toggleSidebarEl.getAttribute('aria-expanded') === 'true' ? true : false;
+    }
 
-        // 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');
-        });
+    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;
+        }
+    }
 
-        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');
-        });
+    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');
+    }
 
-        // toggle multi level menu item initial and full text
+    const sidebar = document.getElementById('sidebar');
+    const toggleSidebarEl = document.getElementById('toggleSidebar');
+    if(sidebar) {
         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');
+            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);
         });
 
-        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);
+        // 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);
+                }
+            });
+        }    
     }
 
-    if(toggleSidebarEl) {
-        toggleSidebarEl.addEventListener('click', () => {
-            localStorage.setItem('sidebarExpanded', !isSidebarExpanded(toggleSidebarEl));
-            toggleSidebar(sidebar, !isSidebarExpanded(toggleSidebarEl), true);
-        });
+    const toggleSidebarMobileEl = document.getElementById('toggleSidebarMobile');
+    if(toggleSidebarMobileEl) {
+        const sidebarBackdrop = document.getElementById('sidebarBackdrop');
+        const toggleSidebarMobileHamburger = document.getElementById('toggleSidebarMobileHamburger');
+        const toggleSidebarMobileClose = document.getElementById('toggleSidebarMobileClose');
 
-        sidebar.addEventListener('mouseenter', () => {
-            if (!isSidebarExpanded(toggleSidebarEl)) {
-                toggleSidebar(sidebar, true);
-            }
+        toggleSidebarMobileEl.addEventListener('click', () => {
+            toggleSidebarMobile(sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose);
         });
 
-        sidebar.addEventListener('mouseleave', () => {
-            if (!isSidebarExpanded(toggleSidebarEl)) {
-                toggleSidebar(sidebar, false);
-            }
+        sidebarBackdrop.addEventListener('click', () => {
+            toggleSidebarMobile(sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose);
         });
-    }    
-}
-
-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/artificer/classes/BxArtificerTemplate.php

@@ -26,7 +26,7 @@ class BxArtificerTemplate extends BxBaseModGeneralTemplate
 
         switch($sType) {
             case 'head':
-                $sResult .= $this->_oModule->_oTemplate->getJsCode('utils', [
+                $sResult .= $this->getJsCode('utils', [
                     'sColorScheme' => $this->_oConfig->getColorScheme()
                 ]);
 
@@ -38,6 +38,9 @@ class BxArtificerTemplate extends BxBaseModGeneralTemplate
                 break;
 
             case 'footer':
+                $sResult .= $this->addJs([
+                    'modules/base/template/js/|sidebar.js',
+                ], true);
                 break;
         }
 

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

@@ -39,10 +39,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="flex items-center">
-                    <!-- Members Toolbar -->
-                    <bx_menu:sys_toolbar_member />
-                </div>
+                <bx_menu:sys_toolbar_member />
             </div>
         </div>
     </nav>

modules/boonex/artificer/install/sql/enable.sql

@@ -35,8 +35,7 @@ INSERT INTO `sys_alerts` (`unit`, `action`, `handler_id`) VALUES
 -- PRELOADER
 INSERT INTO `sys_preloader` (`module`, `type`, `content`, `active`) VALUES
 ('bx_artificer', 'css_system', 'modules/boonex/artificer/template/css/|main.css', 1),
-('bx_artificer', 'js_system', 'modules/boonex/artificer/js/|utils.js', 1),
-('bx_artificer', 'js_system', 'modules/boonex/artificer/js/|sidebar.js', 1);
+('bx_artificer', 'js_system', 'modules/boonex/artificer/js/|utils.js', 1);
 
 
 -- INJECTIONS

modules/boonex/artificer/js/sidebar.js

@@ -1,133 +0,0 @@
-document.addEventListener("DOMContentLoaded", function(event) {
-    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/artificer/template/header.html

@@ -2,11 +2,7 @@
     <div class="bx-header-cnt bx-def-page-width mx-auto px-3 md:px-4 lg:px-6 box-border">
         <div class="bx-toolbar-content-wrapper">
             <div id="bx-toolbar-content" class="bx-toolbar-content relative flex items-center justify-start h-16">
-                <!-- Mobile: Hamburger -->
-                <div class="flex-none items-center lg:hidden mr-3">
-                    <bx_menu:sys_toolbar_site />
-                </div>
-
+                <bx_menu:sys_toolbar_site />
                 <!-- Logo -->
                 <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
                     <bx_injection:injection_logo_before />
@@ -20,15 +16,10 @@
                     </div>
                 </div>
                 <!-- Search -->
-                <div class="bx-toolbar-item bx-ti-search flex flex-grow flex-shrink items-center justify-end ml-6 w-32">
-                    <div class="flex items-start w-full hidden md:block">
-                        <div class="relative w-full">__sys_site_search__</div>
-                    </div>
-                </div>
-                <!-- Members Toolbar -->
-                <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right flex-none ml-4">
-                    <bx_menu:sys_toolbar_member />
+                <div class="bx-toolbar-item bx-ti-search flex-1 lg:flex-none flex items-center justify-end">
+                    __sys_toolbar_search__
                 </div>
+                <bx_menu:sys_toolbar_member />
             </div>
         </div>
     </div>

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

@@ -7,17 +7,13 @@
 	    <div class="bx-def-centered 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-clearfix">
-                        <div id="bx-menu-toolbar-1-container">
-                            <bx_menu:sys_toolbar_site />
-                        </div>
+                        <bx_menu:sys_toolbar_site />
                         <div id="bx-logo-container">
                             <bx_injection:injection_logo_before />
                                 __main_logo__
                             <bx_injection:injection_logo_after />
                         </div>
-                        <div id="bx-menu-toolbar-2-container" class="cd-nav">
-                            <bx_menu:sys_toolbar_member />
-                        </div>
+                        <bx_menu:sys_toolbar_member />
                     </div>
                 </div>
 	    </div>

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

@@ -15,9 +15,6 @@
                           <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-item bx-ti-logo bx-toolbar-logo-container">
                         <bx_injection:injection_logo_before />
                             __main_logo__
@@ -28,9 +25,7 @@
                             <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>
+                    <bx_menu:sys_toolbar_member />
                 </div>
             </div>
         </div>

modules/boonex/english/data/langs/system/en.xml

@@ -3480,6 +3480,8 @@ If it is not enabled then please consider implement this optimization, since it
     <string name="_sys_menu_template_title_main_in_panel"><![CDATA[Site Navigation Menu in Panel]]></string>
     <string name="_sys_menu_template_title_multilevel"><![CDATA[Multilevel Menu]]></string>
     <string name="_sys_menu_template_title_toolbar"><![CDATA[Toolbar Buttons]]></string>
+    <string name="_sys_menu_template_title_toolbar_left"><![CDATA[Toolbar Buttons (left)]]></string>
+    <string name="_sys_menu_template_title_toolbar_right"><![CDATA[Toolbar Buttons (right)]]></string>
     <string name="_sys_menu_template_title_ver"><![CDATA[Vertical Links]]></string>
     <string name="_sys_menu_template_title_ver_lite"><![CDATA[Vertical Links (lite)]]></string>
     <string name="_sys_menu_template_title_account_notifications"><![CDATA[Account notifications]]></string>

modules/boonex/lucid/data/template/system/_sub_header.html

@@ -7,11 +7,7 @@
             <div class="bx-toolbar-content-hgap 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-item bx-ti-left">
-                            <!-- <a href="#0" class="cd-nav-trigger cd-dropdown-trigger">Menu<span></span></a> -->
-
-                            <bx_menu:sys_toolbar_site />
-                        </div>
+                        <bx_menu:sys_toolbar_site />
                         <div id="bx-logo-container" class="bx-toolbar-item bx-ti-logo">
                             <bx_injection:injection_logo_before />
                                 __main_logo__
@@ -20,9 +16,7 @@
                         <div id="bx-menu-main-container" class="bx-toolbar-item bx-ti-menu bx-ti-stretcher">
                             <bx_menu:sys_site />
                         </div>
-                        <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right cd-nav">
-                            <bx_menu:sys_toolbar_member />
-                        </div>
+                        <bx_menu:sys_toolbar_member />
                     </div>
                 </div>
             </div>

modules/boonex/lucid/data/template/system/css/general.css

@@ -8,10 +8,6 @@
 
 #bx-logo-container {
     height: auto;
-
-    margin-left: 0.625rem;
-    margin-right: 0;
-
     text-align: left;
 }
 
@@ -27,9 +23,6 @@
 .bx-toolbar-content::after {
     display: none;
 }
-.bx-toolbar-content .bx-toolbar-item {
-    display: inline-block;
-}
 .bx-toolbar-content .bx-toolbar-item.bx-ti-menu {
     margin: 0;
     padding: 0 1.25rem;

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

@@ -15,22 +15,17 @@
                           <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_menu:sys_toolbar_site />
-                    </div>
                     <div id="bx-logo-container" class="bx-toolbar-item bx-ti-logo flex-2 xl:flex-none">
                         <bx_injection:injection_logo_before />
                             __main_logo__
                         <bx_injection:injection_logo_after />
                     </div>
-                    <div id="bx-menu-main-container" class="bx-toolbar-item bx-ti-menu bx-ti-stretcher flex-2 hidden xl:block ml-4">
+                    <div id="bx-menu-main-container" class="bx-toolbar-item bx-ti-menu bx-ti-stretcher flex-2 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 cd-nav">
-                        <bx_menu:sys_toolbar_member />
-                    </div>
+                    <bx_menu:sys_toolbar_member />
                 </div>
             </div>
         </div>

modules/boonex/ocean/data/template/system/_sub_header.html

@@ -9,21 +9,13 @@
 	    <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-toolbar-content bx-clearfix">
-	
-	            <div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-left">
-	                <bx_menu:sys_toolbar_site />
-	            </div>
-
+                    <bx_menu:sys_toolbar_site />
 	            <div id="bx-logo-container" class="bx-toolbar-item bx-ti-logo bx-ti-stretcher">
 	                <bx_injection:injection_logo_before />
 	                    __main_logo__
 	                <bx_injection:injection_logo_after />
 	            </div>
-	
-	            <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right">
-	                <bx_menu:sys_toolbar_member />
-	            </div>
-	
+                    <bx_menu:sys_toolbar_member />
 	        </div>
 	
 	    </div>

modules/boonex/protean/data/template/system/_sub_header.html

@@ -7,17 +7,13 @@
         <div class="bx-def-centered bx-def-padding-sec-leftright bx-def-page-width 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-item bx-ti-left">
-                        <bx_menu:sys_toolbar_site />
-                    </div>
+                    <bx_menu:sys_toolbar_site />
                     <div id="bx-logo-container" class="bx-toolbar-item bx-ti-logo bx-ti-stretcher">
                         <bx_injection:injection_logo_before />
                             __main_logo__
                         <bx_injection:injection_logo_after />
                     </div>
-                    <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right">
-                        <bx_menu:sys_toolbar_member />
-                    </div>
+                    <bx_menu:sys_toolbar_member />
                 </div>
             </div>
         </div>

modules/boonex/protean/data/template/system/css/media-phone.css

@@ -9,6 +9,10 @@
     padding-right: 0;
 }
 
+/*--- Menu ---*/
+.bx-media-phone .bx-header .bx-toolbar-content .bx-toolbar-item.bx-ti-menu .bx-sliding-smenu-main {
+    display: none;
+}
 
 /* --------------- design boxes */
 .bx-media-phone .bx-layout-cell > .bx-page-block-container > .bx-db-container {

modules/boonex/protean/data/template/system/menu_toolbar_left.html

@@ -0,0 +1,4 @@
+<!-- Toolbar Left Site Toolbar -->
+<div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-left bx-ti-hamburger flex-none items-center ltr:mr-4 rtl:ml-4">
+    <bx_include_auto:menu_toolbar.html />
+</div>

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

@@ -15,22 +15,17 @@
                           <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_menu:sys_toolbar_site />
-                    </div>
                     <div id="bx-logo-container" class="bx-toolbar-item bx-ti-logo">
                         <bx_injection:injection_logo_before />
                             __main_logo__
                         <bx_injection:injection_logo_after />
                     </div>
-                    <div class="bx-toolbar-item bx-ti-menu bx-ti-stretcher flex-2 hidden xl:block ml-4">
+                    <div id="bx-menu-main-container" class="bx-toolbar-item bx-ti-menu bx-ti-stretcher flex-2 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_menu:sys_toolbar_member />
-                    </div>
+                    <bx_menu:sys_toolbar_member />
                 </div>
             </div>
         </div>

modules/boonex/russian/data/langs/system/ru.xml

@@ -3446,6 +3446,8 @@
     <string name="_sys_menu_template_title_main_in_panel"><![CDATA[Навигация по сайту - Панель]]></string>
     <string name="_sys_menu_template_title_multilevel"><![CDATA[Многоуровневое меню]]></string>
     <string name="_sys_menu_template_title_toolbar"><![CDATA[Панель инструментов - Кнопки]]></string>
+    <string name="_sys_menu_template_title_toolbar_left"><![CDATA[Панель инструментов - Кнопки слева]]></string>
+    <string name="_sys_menu_template_title_toolbar_right"><![CDATA[Панель инструментов - Кнопки справа]]></string>
     <string name="_sys_menu_template_title_ver"><![CDATA[Вертикальные ссылки]]></string>
     <string name="_sys_menu_template_title_ver_lite"><![CDATA[Вертикальные ссылки (облегчённые)]]></string>
     <string name="_sys_menu_template_title_account_notifications"><![CDATA[Аккаунт - Уведомления]]></string>

template/_page_toolbar.html

@@ -3,11 +3,7 @@
     <div class="bx-header-cnt __sys_header_width__ mx-auto px-3 md:px-4 lg:px-6 box-border">
         <div class="bx-toolbar-content-wrapper">
             <div id="bx-toolbar-content" class="bx-toolbar-content relative flex items-center justify-start h-16">
-                <!-- Mobile: Hamburger -->
-                <div class="bx-toolbar-item bx-ti-hamburger flex-none items-center lg:hidden ltr:mr-4 rtl:ml-4">
-                    <bx_menu:sys_toolbar_site />
-                </div>
-
+                <bx_menu:sys_toolbar_site />
                 <div class="bx-toolbar-items-group relative flex flex-1 items-center justify-start h-16">
                     <!-- Logo -->
                     <div id="bx-logo-container" class="bx-toolbar-item bx-ti-left bx-ti-logo flex-none items-center">
@@ -26,10 +22,7 @@
                         __sys_toolbar_search__
                     </div>
                 </div>
-                <!-- Members Toolbar -->
-                <div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right flex-none">
-                    <bx_menu:sys_toolbar_member />
-                </div>
+                <bx_menu:sys_toolbar_member />
             </div>
         </div>
     </div>

template/_page_toolbar_search.html

@@ -1,7 +1,7 @@
-<div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 ltr:mr-2 rtl:ml-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
+<div class="bx-ti-search-box flex-auto flex items-start md:min-w-88 ltr:ml-2 rtl:mr-2 bg-white/95 dark:bg-gray-800/95 rounded-md shadow-md hidden">
     <div class="relative w-full">__sys_site_search__</div>
 </div>
-<div class="bx-ti-search-button group relative inline-flex items-center mx-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
+<div class="bx-ti-search-button group relative inline-flex items-center ltr:ml-2 rtl:mr-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 text-base font-medium leading-6 border border-transparent hover:border-gray-200/50 active:border-gray-300 dark:hover:border-gray-700/50 dark:active:border-gray-700 bg-gray-100 dark:bg-gray-700/50 active:bg-gray-300 dark:active:bg-black/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded-full">
     <a href="javascript:void(0)" onclick="javascript:bx_site_search_show(this)">
         <span class="relative flex items-center justify-center h-10 w-10">
             <div class="bx-icon">
@@ -9,4 +9,4 @@
             </div>
         </span>
     </a>
-</div>
+</div>

template/css/general.css

@@ -81,7 +81,6 @@
     box-sizing: border-box;
 
     height: 3rem;
-    margin:0 1.0rem;
     
     text-align: center;
     font-size: 2rem;

template/css/media-phone.css

@@ -52,10 +52,6 @@ html.bx-media-phone {
 
 
 /* general.css */
-.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;
-}
 .bx-media-phone #bx-footer-wrapper {
     height: auto;
 }

template/menu_toolbar_left.html

@@ -0,0 +1,4 @@
+<!-- Toolbar Left Site Toolbar -->
+<div id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-left bx-ti-hamburger flex-none items-center lg:hidden ltr:mr-4 rtl:ml-4">
+    <bx_include_auto:menu_toolbar.html />
+</div>

template/menu_toolbar_right.html

@@ -0,0 +1,4 @@
+<!-- Toolbar Right: Members Toolbar -->
+<div id="bx-menu-toolbar-2-container" class="bx-toolbar-item bx-ti-right flex-none ltr:ml-2 rtl:mr-2">
+    <bx_include_auto:menu_toolbar.html />
+</div>

template/pt_application.html

@@ -14,9 +14,6 @@
                       <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-item bx-ti-logo bx-toolbar-logo-container">
                     <bx_injection:injection_logo_before />
                     __main_logo__
@@ -27,9 +24,7 @@
                         <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>
+                <bx_menu:sys_toolbar_member />
             </div>
         </div>
     </div>