Ticket #3657 - Application page type.

modules/boonex/artificer/classes/BxArtificerModule.php

@@ -34,12 +34,12 @@ class BxArtificerModule extends BxBaseModTemplateModule
         ]);
     }
 
-    public function serviceIncludeCssJs()
+    public function serviceIncludeCssJs($sType)
     {
         if(BxDolTemplate::getInstance()->getCode() != $this->_oConfig->getUri())
             return '';
 
-        return $this->_oTemplate->getIncludeCssJs();
+        return $this->_oTemplate->getIncludeCssJs($sType);
     }
 
     public function serviceGetSplashMarker($sName)

modules/boonex/artificer/classes/BxArtificerTemplate.php

@@ -20,21 +20,35 @@ class BxArtificerTemplate extends BxBaseModGeneralTemplate
         parent::__construct($oConfig, $oDb);
     }
 
-    public function getIncludeCssJs()
+    public function getIncludeCssJs($sType)
     {
-        $this->addCss(array(
-            'main.css'
-        ));
-        
-        $this->addJs(array(
-            'utils.js'
-        ));
-
-    	$sCss = trim(getParam($this->_oConfig->getName() . '_styles_custom'));
-        if(!empty($sCss))
-            $sCss = $this->_wrapInTagCssCode($sCss);
-
-        return $sCss;
+        $sResult = '';
+
+        switch($sType) {
+            case 'head':
+                $this->addCss([
+                    'main.css'
+                ]);
+
+                $this->addJs([
+                    'utils.js'
+                ]);
+
+                $sCss = trim(getParam($this->_oConfig->getName() . '_styles_custom'));
+                if(!empty($sCss))
+                    $sCss = $this->_wrapInTagCssCode($sCss);
+                
+                $sResult .= $sCss;
+                break;
+
+            case 'footer':
+                $sResult .= $this->addJs([
+                    'sidebar.js'
+                ], true);
+                break;
+        }
+
+        return $sResult;
     }
 
     public function getHeader()

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

@@ -41,7 +41,6 @@ import url(../../../../../../../template/css/general.css);
 }
 
 /*--- Join/Login Forms ---*/
-
 #sys_account .bx-form-element .bx-form-input-submit.bx-btn,
 #sys-form-login .bx-form-element .bx-form-input-submit.bx-btn {
     width: 100%;
@@ -51,47 +50,7 @@ import url(../../../../../../../template/css/general.css);
     text-align: right;
 }
 
-
-/* --- Content loader placeholder ---*/
-@-webkit-keyframes bxPlaceHolderShimmer {
-  0% {
-    background-position: -468px 0;
-  }
-  100% {
-    background-position: 468px 0;
-  }
-}
-
-@keyframes bxPlaceHolderShimmer {
-  0% {
-    background-position: -468px 0;
-  }
-  100% {
-    background-position: 468px 0;
-  }
-}
-
-.bx-cont-ph-inline, 
-.bx-cont-ph {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-  -webkit-animation-name: bxPlaceHolderShimmer;
-  animation-name: bxPlaceHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
-  background: #f6f7f8;
-  background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
-  background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
-  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
-  -webkit-background-size: 800px 104px;
-  background-size: 800px 104px;
-  position: relative;
-}
-
-.bx-cont-ph-inline {
-    display:inline-block;
+/*--- Page Type: Application ---*/
+.bx-menu-panel-item .bx-profile-avatar-cnt {
+    padding: 0;
 }

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

@@ -6,10 +6,10 @@
                     <a class="flex items-center w-full uppercase" href="__link__" onclick="__onclick__"__attrs__>
                         <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
                         <bx_if:image><img class="w-6 bg-contain bx-no-repeat bg-center" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-						<bx_if:icon-html>__icon__</bx_if:icon-html>
-                        <span class="ml-2">__title__</span>
+                        <bx_if:icon-html>__icon__</bx_if:icon-html>
+                        <span class="ml-2" sidebar-toggle-item>__title__</span>
                     </a>
-                    <span class="bx-menu-collapse pl-2">
+                    <span class="bx-menu-collapse pl-2" sidebar-toggle-item>
                         <a href="javascript:void(0)" onclick="javascript:bx_toggle_pf(this)">
                             <i class="sys-icon chevron-up bx-menu-hide"></i>
                             <i class="sys-icon chevron-down bx-menu-show"></i>

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

@@ -5,8 +5,8 @@
                 <a class="flex items-center" href="__link__" onclick="__onclick__"__attrs__>
                     <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
                     <bx_if:image><img class="w-6 bg-contain bx-no-repeat bg-center" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-					<bx_if:icon-html>__icon__</bx_if:icon-html>
-                    <span class="ml-2">__title__</span>
+                    <bx_if:icon-html>__icon__</bx_if:icon-html>
+                    <span class="ml-2" sidebar-toggle-item>__title__</span>
                 </a>
                 <bx_if:addon>
                     <div class="bx-menu-addon pl-2">

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

@@ -8,10 +8,10 @@
                         <bx_if:image><img class="h-5 w-5" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
                         <bx_if:icon-html>__icon__</bx_if:icon-html>
                     </span>
-                    <span class="truncate">__title__</span>
+                    <span class="truncate" sidebar-toggle-item>__title__</span>
                 </a>
                 <bx_if:addon>
-                    <div class="bx-menu-addon inline-block ml-auto bg-gray-200 dark:bg-gray-800 group-hover:bg-gray-300 dark:group-hover:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs rounded-full">
+                    <div class="bx-menu-addon inline-block ml-auto bg-gray-200 dark:bg-gray-800 group-hover:bg-gray-300 dark:group-hover:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs rounded-full" sidebar-toggle-item>
                         <div class="bx-menu-addon-cnt py-0.5 px-2">__addon__</div>
                     </div>
                 </bx_if:addon>

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

@@ -2,7 +2,7 @@
     <a href="__switcher_url__" onclick="__switcher_onclick__">
         <div class="bx-profile-avatar-cnt relative flex items-center px-4 py-2">
             <div class="bx-pa-img absolute">__profile_unit__</div>
-            <div class="bx-pa-info w-full">
+            <div class="bx-pa-info w-full" sidebar-toggle-item>
                 <div class="bx-pa-info-cnt flex flex-col justify-center h-10 pl-14 pr-4 box-border">
                     <div class="bx-pai-line text-gray-600 dark:text-gray-300 text-sm group-hover:text-gray-800 dark:group-hover:text-white font-semibold truncate">__profile_title__</div>
                     <div class="bx-pai-line text-green-600 dark:text-green-400 text-xs truncate uppercase tracking-wider font-normal">
@@ -11,7 +11,7 @@
                 </div>
             </div>
             <bx_if:show_switcher_icon>
-                <div class="bx-pa-actions absolute right-0 pr-4">
+                <div class="bx-pa-actions absolute right-0 pr-4" sidebar-toggle-item>
                     <div class="bx-pa-action flex items-center justify-center h-5"><i class="sys-icon arrows-alt-v flex-shrink-0 text-gray-400 group-hover:text-gray-500"></i></div>
                 </div>
             </bx_if:show_switcher_icon>

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

@@ -1,14 +1,23 @@
 <bx_include_auto:_header.html />
 <div class="bx-main bx-pt-application <bx_injection:injection_main_class />">
     <bx_injection:top />
-    <div id="bx-toolbar" class="bx-header bx-def-z-index-nav bg-white dark:bg-gray-800 shadow-sm">
-        <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">
+    <!-- BEG: Navigation -->
+    <nav class="fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+        <div class="px-3 py-3 lg:px-5 lg:pl-3">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center justify-start">
                     <!-- Mobile: Hamburger -->
-                    <div class="flex-none items-center lg:hidden mr-4">
+                    <div class="flex-none items-center lg:hidden mr-4 hidden">
                         <bx_menu:sys_toolbar_site />
                     </div>
+
+                    <button id="toggleSidebar" aria-expanded="true" aria-controls="sidebar" class="hidden p-2 mr-6 text-gray-600 rounded cursor-pointer lg: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 lg: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>
                     <!-- 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 />
@@ -27,65 +36,75 @@
                             <div class="relative w-full">__sys_site_search__</div>
                         </div>
                     </div>
+                </div>
+                <div class="flex items-center">
                     <!-- 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>
+                    <bx_menu:sys_toolbar_member />
                 </div>
             </div>
         </div>
-    </div>
-    <div class="bx-main-content bx-def-page-width bx-def-centered flex">
-        <div class="bx-main-column narrow flex-none w-1/4">
-            <div class="bx-main-column-cnt py-2 px-4">
-                <bx_menu:sys_site_panel />
-            </div>
-        </div>
-        <div class="bx-main-column wide flex-1 w-3/4">
-            <bx_injection:injection_between_cover_logo />
-            __cover__
-            <bx_injection:injection_between_cover_top_menu />
-            <div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 __site_submenu_hidden__">
-                <div id="bx-menu-main-bar" class="bx-menu-main-bar __site_submenu_class__ mx-auto px-4 sm:px-6 lg:px-8 box-border">
-                    <div class="bx-menu-main-bar-cnt relative -mb-px">
-                        <div class="absolute w-full">
-                            <bx_injection:injection_top_menu_before />
-                            <bx_menu:sys_site_submenu />
-                            <bx_injection:injection_top_menu_after />
-                        </div>
+    </nav>
+    <!-- END: Navigation -->
+
+    <div class="flex pt-16 overflow-hidden">
+        <!-- BEG: Sidebar -->
+        <aside id="sidebar" class="fixed top-0 left-0 z-20 flex flex-col flex-shrink-0 hidden w-64 h-full pt-16 duration-75 lg:flex transition-width" aria-label="Sidebar">
+            <div class="relative flex flex-col flex-1 min-h-0 pt-0 bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+                <div class="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
+                    <div class="flex-1 px-3 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 lg:flex" sidebar-bottom-menu>
+                    Some button based menu is here
+                </div>
             </div>
-            <bx_injection:injection_between_content_menu />
-            <div id="bx-content-wrapper">
-                __informer__
-                <div class="bx-page-wrapper mx-auto px-3 md:px-4 lg:px-6 box-border">
-                    <div id="bx-content-container" class="bx-content-container">
-                        <div id="bx-content-main" class="bx-content-main my-2 lg:my-3">
-                            <bx_injection:injection_content_before />
-                            __page_main_code__
-                            <bx_injection:injection_content_after />
-                            <bx_injection:banner_bottom />
-                        </div> <!-- #bx-content-main -->
-                        <bx_injection:injection_between_content_footer />
-                    </div> <!-- #bx-content-container -->
-                </div> <!-- .bx-page-wrapper -->
-            </div> <!-- #bx-content-wrapper -->
-        </div> <!-- .bx-main-column -->
-    </div> <!-- .bx-main-content -->
+        </aside>
+        <div class="fixed inset-0 z-10 hidden bg-gray-900/50 dark:bg-gray-900/90" id="sidebarBackdrop"></div>
+        <!-- END: Sidebar -->    
 
-    <div id="bx-footer-wrapper" class="">
-        <div class="bx-def-page-width mx-auto px-3 md:px-4 lg:px-6 box-border">
-            <div id="bx-footer" class="bx-footer">
-                <div class="bx-footer-cnt mb-4">
-                    <bx_injection:injection_footer_before />
-                    <div id="bx-menu-bottom">
-                        <bx_menu:sys_footer />
+        <!-- BEG: Main Content -->
+        <div id="main-content" class="relative w-full h-full overflow-y-auto lg:ml-64">
+            <main>
+                <bx_injection:injection_between_cover_logo />
+                __cover__
+                <bx_injection:injection_between_cover_top_menu />
+                <div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 __site_submenu_hidden__">
+                    <div id="bx-menu-main-bar" class="bx-menu-main-bar __site_submenu_class__ mx-auto px-4 sm:px-6 lg:px-8 box-border">
+                        <div class="bx-menu-main-bar-cnt relative -mb-px">
+                            <div class="absolute w-full">
+                                <bx_injection:injection_top_menu_before />
+                                <bx_menu:sys_site_submenu />
+                                <bx_injection:injection_top_menu_after />
+                            </div>
+                        </div>
                     </div>
-                    <bx_injection:injection_footer_after />
                 </div>
-            </div>
+                <bx_injection:injection_between_content_menu />
+                <div id="bx-content-wrapper">
+                    __informer__
+                    <div class="bx-page-wrapper mx-auto px-3 md:px-4 lg:px-6 box-border">
+                        <div id="bx-content-container" class="bx-content-container">
+                            <div id="bx-content-main" class="bx-content-main my-2 lg:my-3">
+                                <bx_injection:injection_content_before />
+                                __page_main_code__
+                                <bx_injection:injection_content_after />
+                                <bx_injection:banner_bottom />
+                            </div> <!-- #bx-content-main -->
+                            <bx_injection:injection_between_content_footer />
+                        </div> <!-- #bx-content-container -->
+                    </div> <!-- .bx-page-wrapper -->
+                </div> <!-- #bx-content-wrapper -->
+            </main>
+            <footer class="p-4 mx-4 my-6 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 xl:p-8 dark:bg-gray-800">
+                <bx_injection:injection_footer_before />
+                <div id="bx-menu-bottom">
+                    <bx_menu:sys_footer />
+                </div>
+                <bx_injection:injection_footer_after />
+            </footer>
         </div>
+        <!-- END: Main Content -->
     </div>
     <bx_menu:sys_site_action />
 </div> <!-- .bx-main -->

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

@@ -29,4 +29,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:12:"bx_artificer";s:6:"method";s:14:"include_css_js";}', 0, 1);
+('bx_artificer_head', 0, 'injection_head', 'service', 'a:3:{s:6:"module";s:12:"bx_artificer";s:6:"method";s:14:"include_css_js";s:6:"params";a:1:{i:0;s:4:"head";}}', 0, 1),
+('bx_artificer_footer', 0, 'injection_footer', 'service', 'a:3:{s:6:"module";s:12:"bx_artificer";s:6:"method";s:14:"include_css_js";s:6:"params";a:1:{i:0;s:6:"footer";}}', 0, 1);

modules/boonex/artificer/js/sidebar.js

@@ -0,0 +1,123 @@
+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.add('lg:w-64');
+        sidebarEl.classList.remove('lg:w-16');
+        mainContentEl.classList.add('lg:ml-64');
+        mainContentEl.classList.remove('lg:ml-16');
+
+        document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
+            sidebarToggleEl.classList.remove('lg:hidden');
+            sidebarToggleEl.classList.remove('lg:absolute');
+        });
+
+        // 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.remove('lg:w-64');
+        sidebarEl.classList.add('lg:w-16');
+        mainContentEl.classList.remove('lg:ml-64');
+        mainContentEl.classList.add('lg:ml-16');
+        document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
+            sidebarToggleEl.classList.add('lg:hidden');
+            sidebarToggleEl.classList.add('lg:absolute');
+        });
+
+        // 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 toggleSidebarEl = document.getElementById('toggleSidebar');
+const sidebar = document.getElementById('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);
+    }
+}
+
+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 toggleSidebarMobile = (sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose) => {
+    sidebar.classList.toggle('hidden');
+    sidebarBackdrop.classList.toggle('hidden');
+    toggleSidebarMobileHamburger.classList.toggle('hidden');
+    toggleSidebarMobileClose.classList.toggle('hidden');
+}
+
+const toggleSidebarMobileEl = document.getElementById('toggleSidebarMobile');
+const sidebarBackdrop = document.getElementById('sidebarBackdrop');
+const toggleSidebarMobileHamburger = document.getElementById('toggleSidebarMobileHamburger');
+const toggleSidebarMobileClose = document.getElementById('toggleSidebarMobileClose');
+/*
+const toggleSidebarMobileSearch = document.getElementById('toggleSidebarMobileSearch');
+
+toggleSidebarMobileSearch.addEventListener('click', () => {
+    toggleSidebarMobile(sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose);
+});
+*/
+
+toggleSidebarMobileEl.addEventListener('click', () => {
+    toggleSidebarMobile(sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose);
+});
+
+sidebarBackdrop.addEventListener('click', () => {
+    toggleSidebarMobile(sidebar, sidebarBackdrop, toggleSidebarMobileHamburger, toggleSidebarMobileClose);
+});

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

@@ -45,8 +45,8 @@
             <div id="bx-content-wrapper">
                 __informer__
                 <div class="bx-page-wrapper bx-def-padding-sec-leftright bx-def-box-sizing">
-                    <div id="bx-content-container" class="bx-def-padding-sec-left bx-def-padding-sec-right">
-                        <div id="bx-content-main" class="bx-def-margin-top">
+                    <div id="bx-content-container" class="bx-content-container bx-def-padding-sec-leftright">
+                        <div id="bx-content-main" class="bx-content-main bx-def-margin-top">
                             <bx_injection:injection_content_before />
                             __page_main_code__
                             <bx_injection:injection_content_after />

plugins_public/tailwind/js/tailwind.config.js

@@ -24,7 +24,7 @@ module.exports = {
     './template/*.html',
   ],
   safelist: [
-    'w-8', 'w-10', 'w-24', 'w-48', 'w-4/6', 
+    'w-8', 'w-10', 'w-16', 'w-24', 'w-48', 'w-4/6', 
     'h-8', 'h-10', 'h-24', 'h-48',
     '-m-2',
     'text-red-400', 

template/_header_js_toolbar.html

@@ -1,20 +1,22 @@
 <script language="javascript">
     $(document).ready(function () {
         // hide toolbar on scrolldown, show - on scroll up
-        new Headroom($('#bx-toolbar').get(0), {
-            tolerance: {
-                down: 10,
-                up: 20
-            },
-            offset: 200,
-            classes: {
-                initial: "bx-toolbar-anim",
-                pinned: "bx-toolbar-reset",
-                unpinned: "bx-toolbar-up"
-            },
-            onUnpin: function() {
-                bx_menu_slide_close_all_opened();
-            }
-        }).init();
+        var oToolbar = $('#bx-toolbar');
+        if(oToolbar && oToolbar.length > 0)
+            new Headroom(oToolbar.get(0), {
+                tolerance: {
+                    down: 10,
+                    up: 20
+                },
+                offset: 200,
+                classes: {
+                    initial: "bx-toolbar-anim",
+                    pinned: "bx-toolbar-reset",
+                    unpinned: "bx-toolbar-up"
+                },
+                onUnpin: function() {
+                    bx_menu_slide_close_all_opened();
+                }
+            }).init();
     });
 </script>

template/css/common.css

@@ -65,20 +65,38 @@ blockquote {
 }
 
 .bx-main-content {
+    -webkit-flex-grow: 3;
+    flex-grow: 3;
+
     position: relative;
     display: -webkit-flex;
     display: flex;
+
+    height: 100%;
 }
 .bx-main-column.narrow {
+    display: none;
+
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
-    width: 25%;
+    
+    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-media-desktop .bx-main-column.wide {
     width: 75%;
 }
 .bx-main-content .bx-main-column .bx-def-page-width {

template/css/media-phone.css

@@ -42,7 +42,11 @@ html.bx-media-phone {
 /* default.css */ 
 
 .bx-media-phone .bx-def-page-width {
-    width:auto;
+    width: auto;
+}
+
+.bx-media-phone .bx-pt-application .bx-main-content.bx-def-page-width {
+    width: 100%;
 }
 
 .bx-media-phone .bx-page-wrapper.bx-def-padding-sec-leftright {

template/css/media-tablet.css

@@ -42,6 +42,9 @@ html.bx-media-tablet {
     width:auto;
 }
 
+.bx-media-tablet .bx-pt-application .bx-main-content.bx-def-page-width {
+    width: 100%;
+}
 
 /* page layouts */
 .bx-media-tablet .bx-layout-wrapper.bx-layout-top-area-bcb .bx-layout-col {
@@ -49,7 +52,7 @@ html.bx-media-tablet {
     width:auto !important;
 }
 .bx-media-tablet .bx-layout-wrapper.bx-layout-top-area-bcb .bx-layout-col .bx-layout-cell {
-	padding-left: 0 !important;
-	padding-right: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
 }
 

template/layout_2_columns.html

@@ -1,13 +1,13 @@
 <!-- layout 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-2-columns">
-    <div class="bx-layout-row bx-clearfix">
-        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half">
-            <div class="bx-layout-cell bx-def-padding-sec-right" id="bx-layout-cell-1">
+    <div class="bx-layout-row flex">
+        <div class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half w-1/2">
+            <div class="bx-layout-cell pr-2 lg:pr-3" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </div>
-        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half">
-            <div class="bx-layout-cell bx-def-padding-sec-left" id="bx-layout-cell-2">
+        <div class="bx-layout-col bx-layout-2-columns-column2 bx-layout-column-half w-1/2">
+            <div class="bx-layout-cell pl-2 lg:pl-3" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </div>

template/pt_application.html

@@ -41,8 +41,8 @@
             <div id="bx-content-wrapper">
                 __informer__
                 <div class="bx-page-wrapper bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
-                    <div id="bx-content-container" class="bx-def-padding-sec-left bx-def-padding-sec-right">
-                        <div id="bx-content-main" class="bx-def-margin-top">
+                    <div id="bx-content-container" class="bx-content-container bx-def-padding-sec-leftright">
+                        <div id="bx-content-main" class="bx-content-main bx-def-margin-top">
                             <bx_injection:injection_content_before />
                             __page_main_code__
                             <bx_injection:injection_content_after />