Merge pull request #374 from devforth/sidebarAndHeader

feat: enhance sidebar and header visibility control in custom layouts

Author: SerVitasik

adminforth/modules/configValidator.ts

@@ -159,8 +159,22 @@ export default class ConfigValidator implements IConfigValidator {
     if (!customization.customPages) {
       customization.customPages = [];
     }
+    const normalizeComponent = (comp: any) => {
+      if (typeof comp === 'string') {
+        return { file: comp, meta: {} };
+      }
+      const meta = comp.meta || {};
+      if (meta.sidebarAndHeader === undefined) {
+        meta.sidebarAndHeader = meta.customLayout === true ? 'none' : 'default';
+      }
+      delete meta.customLayout;
+      return { ...comp, meta };
+    };
+
     customization.customPages.forEach((page, i) => {
-      this.validateComponent(page.component, errors);
+      const normalizedComponent = normalizeComponent(page.component);
+      this.validateComponent(normalizedComponent, errors);
+      customization.customPages[i].component = normalizedComponent;
     });
 
     if (!customization.brandName) { //} === undefined) {

adminforth/spa/src/App.vue

@@ -75,15 +75,16 @@
     <Sidebar 
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
       :sideBarOpen="sideBarOpen"
+      :forceIconOnly="route.meta?.sidebarAndHeader === 'preferIconOnly'"
       @hideSidebar="hideSidebar"
       @loadMenu="loadMenu"
       @sidebarStateChange="handleSidebarStateChange"
     />
 
     <div class="transition-all duration-300 ease-in-out max-w-[100vw]" 
       :class="{
-        'sm:ml-18': isSidebarIconOnly,
-        'sm:ml-64': !isSidebarIconOnly,
+        'sm:ml-20': isSidebarIconOnly,
+        'sm:ml-[264px]': !isSidebarIconOnly,
         'sm:max-w-[calc(100%-4.5rem)]': isSidebarIconOnly,
         'sm:max-w-[calc(100%-16rem)]': !isSidebarIconOnly
       }"
@@ -229,16 +230,19 @@ async function initRouter() {
 
 async function loadMenu() {
   await initRouter();
-  if (!route.meta.customLayout) {
+  if (route.meta.sidebarAndHeader !== 'none') {
     // for custom layouts we don't need to fetch menu
     await coreStore.fetchMenuAndResource();
   }
   loginRedirectCheckIsReady.value = true;
 }
 
 function handleCustomLayout() {
-  if (route.meta?.customLayout) {
+  if (route.meta?.sidebarAndHeader === 'none') {
     defaultLayout.value = false;
+  } else if (route.meta?.sidebarAndHeader === 'preferIconOnly') {
+    defaultLayout.value = true;
+    isSidebarIconOnly.value = true;
   } else {
     defaultLayout.value = true;
   }

adminforth/spa/src/components/Sidebar.vue

@@ -31,7 +31,7 @@
             :adminUser="coreStore.adminUser"
           />
         </div>
-        <div class="absolute top-1.5 -right-4 z-10 hidden sm:block" v-if="iconOnlySidebarEnabled && (!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))">
+        <div class="absolute top-1.5 -right-4 z-10 hidden sm:block" v-if="!forceIconOnly && iconOnlySidebarEnabled && (!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))">
           <button class="text-sm text-lightSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" @click="toggleSidebar">
             <IconCloseSidebarSolid v-if="!isSidebarIconOnly" class="w-5 h-5 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
             <IconOpenSidebarSolid v-else class="w-5 h-5 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
@@ -286,6 +286,7 @@ import adminforth from '@/adminforth';
 
 interface Props {
   sideBarOpen: boolean;
+  forceIconOnly?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -304,15 +305,21 @@ const sidebarAside = ref(null);
 
 const smQuery = window.matchMedia('(min-width: 640px)');
 const isMobile = ref(!smQuery.matches);
-const iconOnlySidebarEnabled = computed(() => coreStore.config?.iconOnlySidebar?.enabled !== false);
-const isSidebarIconOnly = ref(!isMobile.value && localStorage.getItem('afIconOnlySidebar') === 'true');
+const iconOnlySidebarEnabled = computed(() => props.forceIconOnly === true || coreStore.config?.iconOnlySidebar?.enabled !== false);
+const isSidebarIconOnly = ref(false);
 
 function handleBreakpointChange(e: MediaQueryListEvent) {
   isMobile.value = !e.matches;
   if (isMobile.value) {
     isSidebarIconOnly.value = false;
   } else {
-    isSidebarIconOnly.value = iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true';
+    if (props.forceIconOnly === true) {
+      isSidebarIconOnly.value = true;
+    } else if (iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true') {
+      isSidebarIconOnly.value = true;
+    } else {
+      isSidebarIconOnly.value = false;
+    }
   }
 }
 
@@ -323,6 +330,9 @@ const isSidebarHovering = ref(false);
 const isTogglingSidebar = ref(false);
 
 function toggleSidebar() {
+  if (props.forceIconOnly) {
+    return;
+  }
   if (!iconOnlySidebarEnabled.value) {
     return;
   }
@@ -358,7 +368,7 @@ watch(()=>coreStore.menu, () => {
 
 
 watch(isSidebarIconOnly, (isIconOnly) => {
-  if (!isMobile.value && iconOnlySidebarEnabled.value) {
+  if (!isMobile.value && iconOnlySidebarEnabled.value && !props.forceIconOnly) {
     localStorage.setItem('afIconOnlySidebar', isIconOnly.toString());
   }
   emit('sidebarStateChange', { isSidebarIconOnly: isIconOnly, isSidebarHovering: isSidebarHovering.value });
@@ -416,4 +426,18 @@ onMounted(() => {
 onUnmounted(() => {
   smQuery.removeEventListener('change', handleBreakpointChange);
 })
+
+watch(() => props.forceIconOnly, (force) => {
+  if (isMobile.value) {
+    isSidebarIconOnly.value = false;
+    return;
+  }
+  if (props.forceIconOnly === true) {
+    isSidebarIconOnly.value = true;
+  } else if (iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true') {
+    isSidebarIconOnly.value = true;
+  } else {
+    isSidebarIconOnly.value = false;
+  }
+}, { immediate: true })
 </script>

adminforth/spa/src/router/index.ts

@@ -68,6 +68,7 @@ const router = createRouter({
       component: () => import('@/views/SettingsView.vue'),
       meta: { 
         title: 'Settings', 
+        sidebarAndHeader: 'preferIconOnly',
       },
     },
     /* IMPORTANT:ADMINFORTH ROUTES */

adminforth/types/Common.ts

@@ -261,7 +261,17 @@ export interface AdminForthComponentDeclarationFull {
    * </script>
    * 
    */
-  meta?: any,
+  meta?: {
+    /**
+     * Controls sidebar and header visibility for custom pages
+     * - 'default': Show both sidebar and header (default behavior)
+     * - 'none': Hide both sidebar and header (full custom layout)
+     * - 'preferIconOnly': Show header but prefer icon-only sidebar
+     */
+    sidebarAndHeader?: 'default' | 'none' | 'preferIconOnly',
+    
+    [key: string]: any,
+  }
 }
 import { type AdminForthActionInput } from './Back.js' 
 export { type AdminForthActionInput } from './Back.js'