feat: add customizable expanded sidebar width option

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -141,6 +141,8 @@ const admin = new AdminForth({
       enabled: true,  // Optional: Enable the collapsible icon-only sidebar feature
   //diff-add
       logo: '@@/logo.svg',  // Optional: Custom logo to display in icon-only mode
+  //diff-add
+      expandedSidebarWidth: '18.5rem', // Optional: sets the expanded sidebar width, defaults to 16.5rem
   //diff-add
     }, 
   },

adminforth/spa/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="">
+  <div>
     <nav 
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
       class="fixed h-14 top-0 z-30 w-full border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider"
@@ -82,11 +82,9 @@
     />
 
     <div class="af-content-wrapper transition-all duration-300 ease-in-out max-w-[100vw]" 
-      :class="{
-        'sm:ml-18': isSidebarIconOnly,
-        'sm:ml-[16.5rem]': !isSidebarIconOnly,
-        'sm:max-w-[calc(100%-4.5rem)]': isSidebarIconOnly,
-        'sm:max-w-[calc(100%-16rem)]': !isSidebarIconOnly
+      :style="{
+        marginLeft: isSidebarIconOnly ? '4.5rem' : expandedWidth,
+        maxWidth: isSidebarIconOnly ? 'calc(100% - 4.5rem)' : `calc(100% - ${expandedWidth})`
       }"
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout">
       <div class="p-0 dark:border-gray-700 mt-14">
@@ -147,12 +145,10 @@
     @apply opacity-100;
   }
 
-  @media (min-width: 640px) {
-    .sm\:ml-18 {
-      margin-left: 4.5rem;
-    }
-    .sm\:max-w-\[calc\(100\%-4\.5rem\)\] {
-      max-width: calc(100% - 4.5rem);
+  @media (max-width: 640px) {
+    .af-content-wrapper {
+      margin-left: 0 !important;
+      max-width: 100% !important;
     }
   }
 
@@ -200,6 +196,8 @@ const isSidebarIconOnly = ref(localStorage.getItem('afIconOnlySidebar') === 'tru
 
 const loggedIn = computed(() => !!coreStore?.adminUser);
 
+const expandedWidth = computed(() => coreStore.config?.iconOnlySidebar?.expandedSidebarWidth || '16.5rem');
+
 const theme = ref('light');
 
 function hideSidebar(): void {

adminforth/spa/src/components/MenuLink.vue

@@ -24,11 +24,11 @@
       }"
       :style="isSidebarIconOnly ? { 
         minWidth: isChild 
-          ? 'calc(16.5rem - 0.75rem*2 - 1.5rem*2 - 1.25rem - 0.75rem)'
-          : 'calc(16.5rem - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)',
+          ? `calc(${expandedWidth} - 0.75rem*2 - 1.5rem*2 - 1.25rem - 0.75rem)`
+          : `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`,
         width: isChild 
-          ? 'calc(16.5rem - 0.75rem*2 - 1.5rem*2 - 1.25rem - 0.75rem)'
-          : 'calc(16.5rem - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)'
+          ? `calc(${expandedWidth} - 0.75rem*2 - 1.5rem*2 - 1.25rem - 0.75rem)`
+          : `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`
       } : {}"
     >
       {{ item.label }}
@@ -55,10 +55,15 @@
 <script setup lang="ts">  
 import { getIcon } from '@/utils';
 import { Tooltip } from '@/afcl';
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
+import { useCoreStore } from '@/stores/core';
 
 const props = defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);
 
+const coreStore = useCoreStore();
+
+const expandedWidth = computed(() => coreStore.config?.iconOnlySidebar?.expandedSidebarWidth || '16.5rem');
+
 const BADGE_SHOW_DELAY_MS = 200;
 const showExpandedBadge = ref(false);
 let showBadgeTimer: ReturnType<typeof setTimeout> | null = null;

adminforth/spa/src/components/Sidebar.vue

@@ -23,7 +23,7 @@
         >
           {{ coreStore.config?.brandName }}
         </span>
-        <div class="flex items-center gap-2 w-auto" :class="{'w-full justify-end': coreStore.config?.showBrandLogoInSidebar === false}">
+        <div v-if="!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)" class="flex items-center gap-2 w-auto" :class="{'w-full justify-end': coreStore.config?.showBrandLogoInSidebar === false}">
           <component 
             v-for="c in coreStore?.config?.globalInjections?.sidebarTop || []"
             :is="getCustomComponent(c)"
@@ -106,8 +106,8 @@
                         'opacity-100 ms-3 translate-x-0 flex-1': !isSidebarIconOnly
                       }"
                       :style="isSidebarIconOnly ? { 
-                        minWidth: 'calc(16.5rem - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)',
-                        width: 'calc(16.5rem - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)'
+                        minWidth: `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`,
+                        width: `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`
                       } : {}"
                     >{{ item.label }}
 
@@ -188,7 +188,7 @@
 <style lang="scss" scoped>
   /* Sidebar width animations */
   .sidebar-container {
-    width: 16.5rem; /* Default expanded width (w-64) */
+    width: v-bind(expandedWidth); /* Default expanded width (w-64) */
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden; /* Prevent content from showing during animation */
     will-change: width, transform;
@@ -199,8 +199,8 @@
   }
   
   .sidebar-expanded {
-    width: 16.5rem; /* Expanded width (w-64) */
-    box-shadow: 12px 0px 18px -8px rgba(0, 0, 0, 0.15);
+    width: v-bind(expandedWidth); /* Expanded width (w-64) */
+    box-shadow: 3px 0px 12px -2px rgba(0, 0, 0, 0.15);
   }
 
   :deep(.dark) .sidebar-collapsed {
@@ -313,6 +313,8 @@ const isMobile = ref(!smQuery.matches);
 const iconOnlySidebarEnabled = computed(() => props.forceIconOnly === true || coreStore.config?.iconOnlySidebar?.enabled !== false);
 const isSidebarIconOnly = ref(false);
 
+const expandedWidth = computed(() => coreStore.config?.iconOnlySidebar?.expandedSidebarWidth || '16.5rem');
+
 function handleBreakpointChange(e: MediaQueryListEvent) {
   isMobile.value = !e.matches;
   if (isMobile.value) {

adminforth/types/Back.ts

@@ -700,6 +700,10 @@ interface AdminForthInputConfigCustomization {
   iconOnlySidebar?: {
     logo?: string,
     enabled?: boolean,
+    /**
+     * Width of expanded sidebar (default: '16.5rem')
+     */
+    expandedSidebarWidth?: string,
   },
 
   /**

adminforth/types/Common.ts

@@ -1110,6 +1110,7 @@ export interface AdminForthConfigForFrontend {
   iconOnlySidebar?: { 
     logo?: string,
     enabled?: boolean,
+    expandedSidebarWidth?: string,
   },
   singleTheme?: 'light' | 'dark',
   datesFormat: string,