@finema/finework-layer 0.1.10 → 0.1.12

package/app/components/Layout/Admin/Sidebar.vue

@@ -1,289 +1,293 @@
-<template>
-  <aside
-    :class="[
-      `
-      flex h-full flex-col overflow-y-auto bg-white
-      transition-all duration-300
-    `,
-    ]"
-  >
-    <div
-      :class="[
-        'flex h-[72px] items-center max-sm:pr-5',
-        {
-          'justify-center': isCollapsed,
-          'w-[260px] justify-between pl-5': !isCollapsed,
-        },
-      ]"
-    >
-      <NuxtLink :to="routes.home.to">
-        <img
-          v-if="!isCollapsed"
-          src="/logo-mini.png"
-          alt="logo_mini_color"
-          class="h-[27px]"
-        />
-      </NuxtLink>
-
-      <Navbar />
-    </div>
-    <div
-      class="bg-primary flex items-center justify-between px-7 py-4 font-bold text-white"
-    >
-      {{ isCollapsed ? "" : label }}
-
-      <Icon
-        v-if="!isCollapsed"
-        name="fluent:arrow-circle-left-24-regular"
-        class="size-[24px] cursor-pointer"
-        @click="$emit('toggle-collapsed')"
-      />
-      <Icon
-        v-else
-        name="fluent:arrow-circle-right-24-regular"
-        class="size-[24px] cursor-pointer"
-        @click="$emit('toggle-collapsed')"
-      />
-    </div>
-
-    <div class="flex-1 overflow-y-auto border-r border-gray-200 p-4">
-      <div v-if="isGroup" class="space-y-4 divide-y-1 divide-[#d9d9d9]">
-        <div v-for="group in navigationItems" :key="group.label" class="pb-4">
-          <div class="mt-2 mb-2 text-[10px] font-semibold text-gray-400">
-            {{ group.label }}
-          </div>
-          <NavigationMenu
-            orientation="vertical"
-            :items="group.children"
-            :collapsed="isCollapsed"
-            :popover="isCollapsed"
-            :tooltip="isCollapsed"
-            :ui="{
-              list: 'space-y-2 ',
-              label: [
-                'text-sm font-bold text-gray-500 py-[12px] px-[10px] rounded-lg',
-                'hover:text-primary',
-              ],
-              link: [
-                'cursor-pointer text-sm font-bold text-gray-500 px-[10px] rounded-lg gap-3',
-                'hover:text-primary',
-                'data-active:before:bg-white data-active:before:rounded-lg data-active:text-primary font-semibold',
-              ],
-              linkLeadingIcon:
-                'group-data-[state=open]:text-current text-current size-[24px] group-hover:text-primary',
-              childList:
-                'border-none ms-0 pl-8 bg-gray-100 mt-2 py-1 rounded-lg',
-              childLink: 'ps-0',
-              childItem: 'ps-0',
-            }"
-            class="w-full justify-center"
-          />
-        </div>
-      </div>
-      <NavigationMenu
-        v-else
-        orientation="vertical"
-        :items="navigationItems"
-        :collapsed="isCollapsed"
-        :popover="isCollapsed"
-        :tooltip="isCollapsed"
-        :ui="{
-          list: 'space-y-2 ',
-          label: [
-            'text-sm font-bold text-gray-500 py-[12px] px-[10px] rounded-lg',
-            'hover:text-primary',
-          ],
-          link: [
-            'cursor-pointer text-sm font-bold text-gray-500 px-[10px] rounded-lg gap-3',
-            'hover:text-primary',
-            'data-active:before:bg-white data-active:before:rounded-lg data-active:text-primary font-semibold',
-          ],
-          linkLeadingIcon:
-            'group-data-[state=open]:text-current text-current size-[24px] group-hover:text-primary ',
-          childList: 'border-none ms-0 pl-8 bg-gray-100 mt-2 py-1 rounded-lg',
-          childLink: 'ps-0',
-          childItem: 'ps-0',
-        }"
-        class="w-full justify-center"
-      />
-    </div>
-    <div v-if="isMobile" class="border-t border-gray-100 p-3">
-      <div class="flex items-center justify-between gap-2">
-        <div class="flex min-w-0 flex-1 items-center gap-3">
-          <Avatar
-            class="border-muted size-[32px] flex-shrink-0 border text-lg"
-            icon="ri:user-line"
-            :src="auth.me.value?.avatar_url || ''"
-          />
-          <div class="flex min-w-0 flex-1 flex-col">
-            <p class="truncate text-sm font-bold">
-              {{ auth.me.value?.display_name || auth.me.value?.full_name }}
-            </p>
-            <p class="text-muted truncate text-xs">
-              {{ auth.me.value?.email || "" }}
-            </p>
-          </div>
-        </div>
-        <DropdownMenu
-          arrow
-          size="xl"
-          :items="userMenuItems"
-          :ui="{
-            content: 'w-48',
-          }"
-        >
-          <Button
-            icon="ph:dots-three-outline-vertical-bold"
-            variant="ghost"
-            color="neutral"
-            size="xs"
-          />
-        </DropdownMenu>
-      </div>
-    </div>
-  </aside>
-</template>
-
-<script lang="ts" setup>
-import type { NavigationMenuItem } from '@nuxt/ui'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import type { Permission, UserModule } from '#imports'
-import Navbar from '../Apps.vue'
-
-defineEmits<{
-  'toggle-collapsed': []
-}>()
-
-const props = defineProps<{
-  label: string
-  isCollapsed: boolean
-  isMobile?: boolean
-  items: NavigationMenuItem[]
-  isGroup?: boolean
-}>()
-
-const route = useRoute()
-const auth = useAuth()
-const userMenuItems = [
-  {
-    label: 'View profile',
-    icon: 'i-lucide-user',
-    to: routes.account.profile.to,
-  },
-
-  {
-    label: routes.logout.label,
-    icon: 'i-lucide-log-out',
-    to: routes.logout.to,
-    external: true,
-  },
-]
-
-const mappedItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
-  return items.map((item) => {
-    let isAnyChildActive = false
-    const mappedChildren = item.children?.map((child) => {
-      const isChildCurrentlyActive = route.path === child.to
-
-      if (isChildCurrentlyActive) {
-        isAnyChildActive = true
-      }
-
-      return {
-        active: isChildCurrentlyActive,
-        class:
-          'hover:bg-transparent hover:text-gray-700 hover:font-bold py-2 data-active:before:bg-transparent data-active:text-gray-700 data-active:font-bold',
-        icon: '',
-        ...child,
-      }
-    })
-
-    const selfIsActive = item.to
-      ? route.path.startsWith(String(item.to))
-      : false
-
-    const itemIsActive = selfIsActive || isAnyChildActive // A root item is active if its own link matches OR if any child is active
-
-    const itemDefaultOpen = item.children ? isAnyChildActive : false
-
-    return {
-      ...item,
-      active: itemIsActive,
-      class: itemIsActive
-        ? 'before:bg-primary before:rounded-lg text-white'
-        : '',
-      defaultOpen: itemDefaultOpen || selfIsActive,
-      open: itemDefaultOpen || selfIsActive,
-      children: mappedChildren,
-      to: mappedChildren ? undefined : item.to,
-    }
-  })
-}
-
-// filter items base on auth.hasPermission and nested children  , permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER']
-const filterItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
-  return items
-    .filter((item) => {
-      if (item.permissions && Array.isArray(item.permissions)) {
-        // permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER'] => module: 'pmo', permissions: ['USER', 'ADMIN', 'SUPER']
-        const permissionStrings = item.permissions as string[]
-
-        // Extract module from first permission (all should have same module)
-        const firstPermission = permissionStrings[0]
-
-        if (!firstPermission) {
-          return true
-        }
-
-        const [moduleStr] = firstPermission.split(':')
-
-        // Extract all permission levels
-        const permissionLevels = permissionStrings.map(
-          (p) => p.split(':')[1],
-        ) as Permission[]
-
-        return auth.hasPermission(moduleStr as UserModule, ...permissionLevels)
-      }
-
-      // Recursively filter children
-      if (item.children) {
-        const filteredChildren = filterItems(
-          item.children as NavigationMenuItem[],
-        )
-
-        // Only include parent if it has visible children or no permission requirement
-        return filteredChildren.length > 0
-      }
-
-      return true
-    })
-    .map((item) => {
-      // Apply filtering to children
-      if (item.children) {
-        return {
-          ...item,
-          children: filterItems(item.children as NavigationMenuItem[]),
-        }
-      }
-
-      return item
-    })
-}
-
-const navigationItems = computed<NavigationMenuItem[]>(() => {
-  // First filter items based on permissions
-  const filteredItems = filterItems(props.items)
-
-  if (props.isGroup) {
-    return filteredItems.map((group) => {
-      return {
-        ...group,
-        children: mappedItems(group.children as NavigationMenuItem[]),
-      }
-    })
-  }
-
-  return mappedItems(filteredItems)
-})
-</script>
+<template>
+  <aside
+    :class="[
+      `
+      flex h-full flex-col overflow-y-auto bg-white
+      transition-all duration-300
+    `,
+    ]"
+  >
+    <div
+      :class="[
+        'flex h-[72px] items-center max-sm:pr-5',
+        {
+          'justify-center': isCollapsed,
+          'w-[260px] justify-between pl-5': !isCollapsed,
+        },
+      ]"
+    >
+      <NuxtLink :to="routes.home.to">
+        <img
+          v-if="!isCollapsed"
+          src="/logo-mini.png"
+          alt="logo_mini_color"
+          class="h-[27px]"
+        />
+      </NuxtLink>
+
+      <Navbar />
+    </div>
+    <div
+      class="bg-primary flex items-center justify-between px-7 py-4 font-bold text-white"
+    >
+      {{ isCollapsed ? "" : label }}
+
+      <Icon
+        v-if="!isCollapsed"
+        name="fluent:arrow-circle-left-24-regular"
+        class="size-[24px] cursor-pointer"
+        @click="$emit('toggle-collapsed')"
+      />
+      <Icon
+        v-else
+        name="fluent:arrow-circle-right-24-regular"
+        class="size-[24px] cursor-pointer"
+        @click="$emit('toggle-collapsed')"
+      />
+    </div>
+
+    <div class="flex-1 overflow-y-auto border-r border-gray-200 p-4">
+      <div v-if="isGroup" class="space-y-4 divide-y-1 divide-[#d9d9d9]">
+        <div v-for="group in navigationItems" :key="group.label" class="pb-4">
+          <div class="mt-2 mb-2 text-[10px] font-semibold text-gray-400">
+            {{ group.label }}
+          </div>
+          <NavigationMenu
+            orientation="vertical"
+            :items="group.children"
+            :collapsed="isCollapsed"
+            :popover="isCollapsed"
+            :tooltip="isCollapsed"
+            :ui="{
+              list: 'space-y-2 ',
+              label: [
+                'text-sm font-bold text-gray-500 py-[12px] px-[10px] rounded-lg',
+                'hover:text-primary',
+              ],
+              link: [
+                'cursor-pointer text-sm font-bold text-gray-500 px-[10px] rounded-lg gap-3',
+                'hover:text-primary',
+                'data-active:before:bg-white data-active:before:rounded-lg data-active:text-primary font-semibold',
+              ],
+              linkLabel: '!text-[#344054]',
+              linkLeadingIcon:
+                'group-data-[state=open]:text-current text-current size-[24px] group-hover:text-primary',
+              childList: 'border-none ms-0  bg-white mt-2 rounded-lg',
+              childLink: 'ps-0',
+              childItem: 'ps-0',
+            }"
+            class="w-full justify-center"
+          />
+        </div>
+      </div>
+      <NavigationMenu
+        v-else
+        orientation="vertical"
+        :items="navigationItems"
+        :collapsed="isCollapsed"
+        :popover="isCollapsed"
+        :tooltip="isCollapsed"
+        :ui="{
+          list: 'space-y-2 ',
+          label: [
+            'text-sm font-bold text-gray-500 py-[12px] px-[10px] rounded-lg',
+            'hover:text-primary ',
+          ],
+          link: [
+            'cursor-pointer text-sm font-bold text-gray-500 px-[10px] rounded-lg gap-3',
+            'hover:text-primary',
+            'data-active:before:bg-[#F9FAFB] data-active:before:rounded-lg data-active:text-primary font-semibold',
+          ],
+          linkLabel: '!text-[#344054]',
+          linkLeadingIcon:
+            'group-data-[state=open]:text-current text-current size-[24px] group-hover:text-primary ',
+          childList: 'border-none ms-0  bg-white mt-2 rounded-lg',
+          childLink: 'ps-0',
+          childItem: 'ps-0',
+        }"
+        class="w-full justify-center"
+      />
+    </div>
+    <div v-if="isMobile" class="border-t border-gray-100 p-3">
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex min-w-0 flex-1 items-center gap-3">
+          <Avatar
+            class="border-muted size-[32px] flex-shrink-0 border text-lg"
+            icon="ri:user-line"
+            :src="auth.me.value?.avatar_url || ''"
+          />
+          <div class="flex min-w-0 flex-1 flex-col">
+            <p class="truncate text-sm font-bold">
+              {{ auth.me.value?.display_name || auth.me.value?.full_name }}
+            </p>
+            <p class="text-muted truncate text-xs">
+              {{ auth.me.value?.email || "" }}
+            </p>
+          </div>
+        </div>
+        <DropdownMenu
+          arrow
+          size="xl"
+          :items="userMenuItems"
+          :ui="{
+            content: 'w-48',
+          }"
+        >
+          <Button
+            icon="ph:dots-three-outline-vertical-bold"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+          />
+        </DropdownMenu>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import type { NavigationMenuItem } from '@nuxt/ui'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import type { Permission, UserModule } from '#imports'
+import Navbar from '../Apps.vue'
+
+defineEmits<{
+  'toggle-collapsed': []
+}>()
+
+const props = defineProps<{
+  label: string
+  isCollapsed: boolean
+  isMobile?: boolean
+  items: NavigationMenuItem[]
+  isGroup?: boolean
+}>()
+
+const route = useRoute()
+const auth = useAuth()
+const userMenuItems = [
+  {
+    label: 'View profile',
+    icon: 'i-lucide-user',
+    to: routes.account.profile.to,
+  },
+
+  {
+    label: routes.logout.label,
+    icon: 'i-lucide-log-out',
+    to: routes.logout.to,
+    external: true,
+  },
+]
+
+const normalizePath = (path: string) => path.replace(/\/$/, '')
+
+const mappedItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
+  return items.map((item) => {
+    let isAnyChildActive = false
+    const mappedChildren = item.children?.map((child) => {
+      const isChildCurrentlyActive
+        = normalizePath(route.path) === normalizePath(String(child.to))
+
+      if (isChildCurrentlyActive) {
+        isAnyChildActive = true
+      }
+
+      return {
+        active: isChildCurrentlyActive,
+        class:
+          'hover:bg-[#F9FAFB] hover:text-gray-700 hover:font-bold py-2 pl-8 data-active:before:bg-[#F9FAFB] data-active:text-primary data-active:font-bold',
+        icon: '',
+        ...child,
+      }
+    })
+
+    const selfIsActive = item.to
+      ? normalizePath(route.path) === normalizePath(String(item.to))
+      : false
+
+    const itemIsActive = selfIsActive || isAnyChildActive // A root item is active if its own link matches OR if any child is active
+
+    const itemDefaultOpen = item.children ? isAnyChildActive : false
+
+    return {
+      ...item,
+      active: itemIsActive,
+      class: itemIsActive
+        ? 'before:bg-[#F9FAFB] before:rounded-lg text-primary'
+        : '',
+      defaultOpen: itemDefaultOpen || selfIsActive,
+      open: itemDefaultOpen || selfIsActive,
+      children: mappedChildren,
+      to: mappedChildren ? undefined : item.to,
+    }
+  })
+}
+
+// filter items base on auth.hasPermission and nested children  , permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER']
+const filterItems = (items: NavigationMenuItem[]): NavigationMenuItem[] => {
+  return items
+    .filter((item) => {
+      if (item.permissions && Array.isArray(item.permissions)) {
+        // permissions: ['pmo:USER', 'pmo:ADMIN', 'pmo:SUPER'] => module: 'pmo', permissions: ['USER', 'ADMIN', 'SUPER']
+        const permissionStrings = item.permissions as string[]
+
+        // Extract module from first permission (all should have same module)
+        const firstPermission = permissionStrings[0]
+
+        if (!firstPermission) {
+          return true
+        }
+
+        const [moduleStr] = firstPermission.split(':')
+
+        // Extract all permission levels
+        const permissionLevels = permissionStrings.map(
+          (p) => p.split(':')[1],
+        ) as Permission[]
+
+        return auth.hasPermission(moduleStr as UserModule, ...permissionLevels)
+      }
+
+      // Recursively filter children
+      if (item.children) {
+        const filteredChildren = filterItems(
+          item.children as NavigationMenuItem[],
+        )
+
+        // Only include parent if it has visible children or no permission requirement
+        return filteredChildren.length > 0
+      }
+
+      return true
+    })
+    .map((item) => {
+      // Apply filtering to children
+      if (item.children) {
+        return {
+          ...item,
+          children: filterItems(item.children as NavigationMenuItem[]),
+        }
+      }
+
+      return item
+    })
+}
+
+const navigationItems = computed<NavigationMenuItem[]>(() => {
+  // First filter items based on permissions
+  const filteredItems = filterItems(props.items)
+
+  if (props.isGroup) {
+    return filteredItems.map((group) => {
+      return {
+        ...group,
+        children: mappedItems(group.children as NavigationMenuItem[]),
+      }
+    })
+  }
+
+  return mappedItems(filteredItems)
+})
+</script>