adminforth 2.4.0-next.161 → 2.4.0-next.162

package/dist/spa/src/App.vue

@@ -72,123 +72,21 @@
       </div>
     </nav>
 
-    <aside 
-      ref="sidebarAside"
+    <Sidebar 
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
-      id="logo-lightSidebar" class="fixed border-none top-0 left-0 z-30 w-64 h-screen  transition-transform bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder  sm:translate-x-0 dark:bg-darkSidebar dark:border-darkSidebarBorder"
-      :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
-      aria-label="Sidebar"
-    >
-      <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder">
-        <div class="af-logo-title-wrapper flex ms-2 m-4">
-          <img v-if="coreStore.config?.showBrandLogoInSidebar !== false" :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
-          <span 
-            v-if="coreStore.config?.showBrandNameInSidebar"
-            class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
-          >
-            {{ coreStore.config?.brandName }}
-          </span>
-          <div 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)"
-              :meta="c.meta"
-              :adminUser="coreStore.adminUser"
-            />
-          </div>
-        </div>
-
-        <ul class="af-sidebar-container space-y-2 font-medium">
-          <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-            <div v-if="item.type === 'divider'" class="border-t border-lightSidebarDevider dark:border-darkSidebarDevider"></div>
-            <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
-            <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-lightSidebarHeading dark:text-darkSidebarHeading
-            ">{{ item.label }}</div>
-            <li v-else-if="item.children" class="af-sidebar-expand-container">
-              <button @click="clickOnMenuItem(i)" type="button" class="af-sidebar-expand-button flex items-center w-full p-2 text-base text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover"
-                  :class="opened.includes(i) ? 'af-sidebar-dropdown-expanded' : 'af-sidebar-dropdown-collapsed'"
-                  :aria-controls="`dropdown-example${i}`"
-                  :data-collapse-toggle="`dropdown-example${i}`"
-              >
-
-                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
-
-                <span class="text-ellipsis overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
-
-                  <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-                    fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
-                    <Tooltip v-if="item.badgeTooltip">
-                      {{ item.badge }}
-                      <template #tooltip>
-                        {{ item.badgeTooltip }}
-                      </template>
-                    </Tooltip>
-                    <template v-else>
-                      {{ item.badge }}
-                    </template> 
-                  </span>
-                </span>
-
-                <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-                </svg>
-              </button>
-
-              <ul :id="`dropdown-example${i}`" role="none" class="af-sidebar-dropdown pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
-                <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
-                  <li class="af-sidebar-menu-link">
-                      <MenuLink :item="child" isChild="true" @click="hideSidebar"/>
-                    </li>
-                </template>
-            </ul>
-        </li>
-        <li v-else class="af-sidebar-menu-link">
-          <MenuLink :item="item" @click="hideSidebar"/>
-        </li>
-        </template>
-      </ul>
-
-
-        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-          fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent text-sm" role="alert"
-          v-if="ctaBadge"
-        >
-          <div class="flex items-center mb-3" :class="!ctaBadge.title ? 'float-right' : ''">
-            <!-- <span class="bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity  text-sm font-semibold me-2 px-2.5 py-0.5 rounded "
-              v-if="ctaBadge.title"
-            > -->
-            <span>
-              {{ctaBadge.title}}
-            </span>
-            <button type="button" 
-              class="ms-auto -mx-1.5 -my-1.5 bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity inline-flex justify-center items-center w-6 h-6  rounded-lg  p-1 hover:brightness-110" 
-              
-              data-dismiss-target="#dropdown-cta" aria-label="Close"
-              v-if="ctaBadge?.closable" @click="closeCTA"
-            >
-              <span class="sr-only">Close</span>
-              <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-              </svg>
-            </button>
-          </div>
-          <p class="mb-3 text-sm " v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
-          <p class="mb-3 text-sm fill-lightNavbarText dark:fill-darkPrimary text-lightNavbarText dark:text-darkNavbarPrimary" v-else>
-            {{ ctaBadge.text }}  
-          </p>
-          <!-- <a class="text-sm text-lightPrimary underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a> -->
-        </div>
-
-        <component 
-          v-for="c in coreStore?.config?.globalInjections?.sidebar || []"
-          :is="getCustomComponent(c)"
-          :meta="c.meta"
-          :adminUser="coreStore.adminUser"
-        />
-      </div>
-    </aside>
+      :sideBarOpen="sideBarOpen"
+      @hideSidebar="hideSidebar"
+      @loadMenu="loadMenu"
+      @sidebarStateChange="handleSidebarStateChange"
+    />
 
-    <div class="sm:ml-64 max-w-[100vw] sm:max-w-[calc(100%-16rem)]" 
+    <div class="transition-all duration-300 ease-in-out max-w-[100vw]" 
+      :class="{
+        'sm:ml-18': isSidebarIconOnly,
+        'sm:ml-64': !isSidebarIconOnly,
+        'sm:max-w-[calc(100%-4.5rem)]': isSidebarIconOnly,
+        'sm:max-w-[calc(100%-16rem)]': !isSidebarIconOnly
+      }"
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout">
       <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
@@ -248,10 +146,20 @@
     @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);
+    }
+  }
+
+
 </style>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, onBeforeMount, nextTick, type Ref } from 'vue';
+import { computed, onMounted, ref, watch, onBeforeMount } from 'vue';
 import { RouterView } from 'vue-router';
 import { Dropdown } from 'flowbite'
 import './index.scss'
@@ -259,16 +167,12 @@ import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import AcceptModal from './components/AcceptModal.vue';
-import MenuLink from './components/MenuLink.vue';
+import Sidebar from './components/Sidebar.vue';
 import { useRoute, useRouter } from 'vue-router';
-import { getIcon, verySimpleHash } from '@/utils';
 import { createHead } from 'unhead'
-import { loadFile } from '@/utils';
+import { getCustomComponent } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
-import { getCustomComponent } from '@/utils';
-import type { AdminForthConfigMenuItem, AnnouncementBadgeResponse } from './types/Common';
-import { Tooltip } from '@/afcl';
 import { initFrontedAPI } from '@/adminforth';
 import adminforth from '@/adminforth';
 import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
@@ -284,16 +188,15 @@ const sideBarOpen = ref(false);
 const defaultLayout = ref(true);
 const route = useRoute();
 const router = useRouter();
-//create a ref to store the opened menu items with ts type;
-const opened = ref<(string|number)[]>([]);
 const publicConfigLoaded = ref(false);
 const dropdownUserButton = ref(null);
 
-const sidebarAside = ref(null);
 
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
 
+const isSidebarIconOnly = ref(localStorage.getItem('afIconOnlySidebar') === 'true');
+
 const loggedIn = computed(() => !!coreStore?.adminUser);
 
 const theme = ref('light');
@@ -302,19 +205,16 @@ function hideSidebar(): void {
   sideBarOpen.value = false;
 }
 
+function handleSidebarStateChange(state: { isSidebarIconOnly: boolean }) {
+  isSidebarIconOnly.value = state.isSidebarIconOnly;
+}
+
+
 function toggleTheme() {
   theme.value = theme.value === 'light' ? 'dark' : 'light';
   coreStore.toggleTheme();
 }
 
-function clickOnMenuItem(label: string | number) {
-  if (opened.value.includes(label)) {
-    opened.value = opened.value.filter((item) => item !== label);
-  } else {
-    opened.value.push(label);
-  }
- 
-}
 
 async function logout() {
   userStore.unauthorize();
@@ -374,13 +274,6 @@ watch([route, () => coreStore.resourceById, () => coreStore.config], async () =>
  
 });
 
-watch(()=>coreStore.menu, () => {
-    coreStore.menu.forEach((item, i) => {
-    if (item.open) {
-      opened.value.push(i);
-    };
-  });
-})
 
 watch(dropdownUserButton, (dropdownUserButton) => {
   if (dropdownUserButton) {
@@ -399,11 +292,6 @@ async function loadPublicConfig() {
   publicConfigLoaded.value = true;
 }
 
-watch(sidebarAside, (sidebarAside) => {
-  if (sidebarAside) {
-    coreStore.fetchMenuBadges();
-  }
-})
 
 // initialize components based on data attribute selectors
 onMounted(async () => {
@@ -431,32 +319,4 @@ watch(() => coreStore.config?.singleTheme, (singleTheme) => {
   }
 }, { immediate: true })
 
-
-const ctaBadge: Ref<(AnnouncementBadgeResponse & { hash: string; }) | null> = computed(() => {
-  const badge = coreStore.config?.announcementBadge;
-  if (!badge) {
-    return null;
-  }
-  const hash = badge.closable ? verySimpleHash(JSON.stringify(badge)) : '';
-  if (badge.closable && window.localStorage.getItem(`ctaBadge-${hash}`)) {
-    return null;
-  }
-  return {...badge, hash};
-});
-
-function closeCTA() {
-  if (!ctaBadge.value) {
-    return;
-  }
-  const hash = ctaBadge.value.hash;
-  window.localStorage.setItem(`ctaBadge-${hash}`, '1');
-  nextTick( async() => {
-    loadMenu();
-    await coreStore.fetchMenuBadges();
-    adminforth.menu.refreshMenuBadges();
-  })
-
-}
-
-
 </script>

package/dist/spa/src/components/MenuLink.vue

@@ -1,24 +1,46 @@
 <template>
   <RouterLink 
       :to="{name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {}}" 
-      class="flex group items-center py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default  hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover" role="menuitem"
+      class="af-menu-link flex group relative items-center w-full py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default transition-all duration-200 ease-in-out" 
       :class="{ 
-        'px-4': isChild,
-        'px-2': !isChild,
+        'ml-1': isSidebarIconOnly && !isSidebarHovering && isChild,
+        'hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover': !['divider', 'gap', 'heading'].includes(item.type),
+        'px-6': (isChild && !isSidebarIconOnly && !isSidebarHovering) || (isChild && isSidebarIconOnly && isSidebarHovering),
+        'px-3.5': !isChild || (isSidebarIconOnly && !isSidebarHovering),
+        'max-w-13': isSidebarIconOnly && !isSidebarHovering,
         'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"
   >
-    <component v-if="item.icon" :is="getIcon(item.icon)" class="min-w-5 min-h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
-    <span class="text-ellipsis overflow-hidden ms-3">{{ item.label }}</span>
-    <span v-if="item.badge"
+    <component v-if="item.icon" :is="getIcon(item.icon)" 
+      class="text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-all duration-200 ease-in-out"
+      :class="{
+        'min-w-4 min-h-4': isSidebarIconOnly && !isSidebarHovering && isChild,
+        'min-w-5 min-h-5': !(isSidebarIconOnly && !isSidebarHovering && isChild)
+      }" >
+    </component>
+    <span 
+      class="overflow-hidden block ms-3 text-left rtl:text-right transition-all duration-200 ease-in-out"
+      :class="{
+        'opacity-0 ms-0 translate-x-4 flex-none': isSidebarIconOnly && !isSidebarHovering,
+        'opacity-100 ms-3 translate-x-0 flex-none': isSidebarIconOnly && isSidebarHovering,
+        'opacity-100 ms-3 translate-x-0 flex-1': !isSidebarIconOnly
+      }"
+      :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)',
+        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)'
+      } : {}"
     >
-          
+      {{ item.label }}
+      <template v-if="item.badge && (!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))">
         <Tooltip v-if="item.badgeTooltip">
           <div class="af-badge inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
           fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
-
           <template #tooltip>
             {{ item.badgeTooltip }}
           </template>
@@ -26,17 +48,19 @@
         <template v-else>
           <div class="af-badge inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
           fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
-        </template> 
-
+        </template>
+      </template>
     </span>
-
+    <div v-if="item.badge && isSidebarIconOnly && !isSidebarHovering"  class="af-badge absolute right-1 top-1/2 -translate-y-1/2 inline-flex items-center justify-center h-2 w-2 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+      fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
+    </div>
   </RouterLink>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts">  
 import { getIcon } from '@/utils';
 import { Tooltip } from '@/afcl';
-const props = defineProps(['item', 'isChild']);
 
+defineProps(['item', 'isChild', 'isSidebarIconOnly', 'isSidebarHovering']);
 
 </script>