Ticket #3766 - Artificer template (part 3): Application page type.

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

@@ -19,12 +19,17 @@ import url(../../../../../../../template/css/common.css);
 .bx-clearfix:after {
     clear:both;
 }
+
+/*--- Application ---*/
 .bx-main.bx-pt-application .bx-menu-toolbar-padding {
     padding-top: 0;
 }
-.bx-main-content .bx-main-column .bx-def-page-width {
+.bx-main.bx-pt-application .bx-main-content .bx-main-column .bx-def-page-width {
     width: 100%;
 }
+.bx-main.bx-pt-application .bx-main-column.narrow.bx-mc-narrowed .bx-mc-cnt {
+    padding: 0;
+}
 
 /*--- Design Boxes ---*/
 .bx-db-container {

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

@@ -129,6 +129,34 @@ div.bx-popup-menu-main.sys-add-content ul {
     flex-direction: column;
 }
 
+/*--- Pannel Menu ---*/
+.bx-menu-panel {}
+
+.bx-menu-panel .bx-menu-panel-item .bx-mpi-toggle-hidden {
+    position: absolute;
+    display: none;
+}
+
+.bx-mc-narrowed .bx-menu-panel li .bx-stl-mil {
+    -webkit-justify-content: center;
+    justify-content: center;
+
+    padding: 0;
+}
+.bx-mc-narrowed .bx-menu-panel li .bx-stl-mii {
+    width: 100%;
+    margin: 0;
+    text-align: center;
+}
+.bx-mc-narrowed .bx-menu-panel .bx-def-thumb-size {
+    width: 2rem;
+    height: 2rem;
+}
+.bx-mc-narrowed .bx-menu-panel .bx-profile-avatar-cnt {
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
 /*--- Profile Stats/Followings Menu ---*/
 .bx-db-content .bx-profile-stats .bx-profile-avatar-cnt,
 .bx-db-content .bx-profile-stats .bx-menu-profile-stats,
@@ -136,6 +164,11 @@ div.bx-popup-menu-main.sys-add-content ul {
 .bx-db-content.bx-content-padding-block .bx-menu-profile-followings {
     margin: -0.75rem;
 }
+.bx-main.bx-pt-application .bx-main-column.narrow .bx-menu-profile-stats,
+.bx-main.bx-pt-application .bx-main-column.narrow .bx-menu-profile-followings {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+}
 
 /*--- Profile Followings Menu ---*/
 .bx-menu-ver.bx-menu-object-sys_profile_followings li .bx-menu-show {

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

@@ -56,9 +56,9 @@
     <div class="bx-main-content flex pt-16 overflow-hidden">
         <!-- BEG: Sidebar -->
         <aside id="sidebar" class="bx-main-column narrow 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">
+            <div class="bx-mc-border 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 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>

modules/boonex/artificer/js/sidebar.js

@@ -6,6 +6,8 @@ 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('lg:w-64');
         sidebarEl.classList.remove('lg:w-16');
         mainContentEl.classList.add('lg:ml-64');
@@ -14,6 +16,7 @@ const toggleSidebar = (sidebarEl, expand, setExpanded = false) => {
         document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
             sidebarToggleEl.classList.remove('lg:hidden');
             sidebarToggleEl.classList.remove('lg:absolute');
+            sidebarToggleEl.classList.remove('bx-mpi-toggle-hidden');
         });
 
         // toggle multi level menu item initial and full text
@@ -27,7 +30,10 @@ const toggleSidebar = (sidebarEl, expand, setExpanded = false) => {
         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 {
+    } 
+    else {
+        sidebarEl.classList.add('bx-mc-narrowed');
+        sidebarEl.classList.remove('bx-mc-expanded');
         sidebarEl.classList.remove('lg:w-64');
         sidebarEl.classList.add('lg:w-16');
         mainContentEl.classList.remove('lg:ml-64');
@@ -35,6 +41,7 @@ const toggleSidebar = (sidebarEl, expand, setExpanded = false) => {
         document.querySelectorAll('#' + sidebarEl.getAttribute('id') + ' [sidebar-toggle-item]').forEach(sidebarToggleEl => {
             sidebarToggleEl.classList.add('lg:hidden');
             sidebarToggleEl.classList.add('lg:absolute');
+            sidebarToggleEl.classList.add('bx-mpi-toggle-hidden');
         });
 
         // toggle multi level menu item initial and full text

plugins_public/tailwind/js/tailwind.config.js

@@ -92,6 +92,7 @@ module.exports = {
     },
     extend: {
         width: {
+            '21': '5.25rem',
             '46': '11.5rem',
             '50': '12.5rem',
             '112': '28rem',