@finema/finework-layer 0.2.75 → 0.2.76

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

@@ -1,270 +1,224 @@
-<template>
-  <div class="relative flex min-h-screen flex-1">
-    <div
-      :class="[
-        `
-        fixed inset-0 z-[102] hidden w-auto
-        lg:block
-      `,
-        {
-          'max-w-[88px]': isCollapsed,
-          'max-w-[260px]': !isCollapsed,
-        },
-      ]"
-    >
-      <Sidebar
-        :label="label"
-        :is-collapsed="isCollapsed"
-        :items="sidebarItems"
-        :is-group="isSidebarGroup"
-        @toggle-collapsed="isCollapsed = !isCollapsed"
-      />
-    </div>
-    <div
-      :class="[
-        'w-full bg-gray-50',
-        {
-          'lg:pl-[88px]': isCollapsed,
-          'lg:pl-[260px]': !isCollapsed,
-        },
-      ]"
-    >
-      <nav
-        class="fixed top-0 left-0 z-[101] flex min-h-[64px] w-screen items-center justify-between gap-4 bg-white px-5 lg:min-h-[72px] lg:justify-end"
-        style="box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04)"
-      >
-        <div class="flex items-center gap-4">
-          <Slideover
-            v-model:open="isShowSidebarMobile"
-            :ui="{
-              content: 'w-[80%] max-w-[260px] lg:hidden',
-              overlay: 'lg:hidden',
-            }"
-            side="left"
-          >
-            <svg
-              class="cursor-pointer lg:hidden"
-              width="19"
-              height="18"
-              viewBox="0 0 19 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              transform="scale(-1, 1)"
-              @click="isShowSidebarMobile = true"
-            >
-              <path
-                d="M10 18L10 16L19 16L19 18L10 18ZM6 2L6 -2.62268e-07L19 -8.30516e-07L19 2L6 2ZM-3.49691e-07 10L-4.37114e-07 8L19 8L19 10L-3.49691e-07 10Z"
-                fill="#4B5563"
-              />
-            </svg>
-
-            <template #content>
-              <Sidebar
-                :label="label"
-                :is-collapsed="false"
-                :is-mobile="true"
-                :items="sidebarItems"
-                :is-group="isSidebarGroup"
-                @toggle-collapsed="isShowSidebarMobile = false"
-              />
-            </template>
-          </Slideover>
-          <NuxtLink :to="routes.home.to">
-            <img
-              src="/logo-mini.png"
-              alt="logo_mini_color"
-              class="w-[126px] min-w-[126px] lg:hidden lg:w-[172px] lg:min-w-[172px]"
-            />
-          </NuxtLink>
-          <Apps class="lg:hidden" />
-        </div>
-
-        <div class="flex items-center justify-center gap-4">
-          <Slideover
-            :ui="{
-              content: 'mt-18',
-              header: 'border-0',
-            }"
-            :modal="false"
-            title="Notifications"
-          >
-            <Chip
-              inset
-              color="success"
-            >
-              <Icon
-                name="ph:bell"
-                class="size-6 cursor-pointer"
-              />
-            </Chip>
-
-            <template #body>
-              <NotificationList :items="notifications" />
-            </template>
-          </Slideover>
-          <DropdownMenu
-            size="xl"
-            :items="userMenuItems"
-            :content="{
-              align: 'end',
-              side: 'bottom',
-            }"
-            :ui="{
-              content: 'w-48',
-            }"
-          >
-            <div class="relative flex cursor-pointer items-center gap-2">
-              <div class="hidden flex-col justify-end text-right lg:flex">
-                <p class="font-bold">
-                  {{ auth.me.value?.display_name || auth.me.value?.full_name }}
-                </p>
-                <p class="text-muted text-sm">
-                  {{ auth.me.value?.email || "" }}
-                </p>
-              </div>
-              <Avatar
-                class="border-muted size-[40px] border text-2xl"
-                icon="ri:user-line"
-                :src="auth.me.value?.avatar_url || ''"
-              />
-              <Icon
-                name="i-ph:caret-down-light"
-                class="size-5"
-              />
-            </div>
-          </DropdownMenu>
-        </div>
-      </nav>
-      <div class="w-full bg-gray-50 pt-[64px] lg:pt-[72px]">
-        <main
-          :class="[
-            'mx-auto min-h-full flex-1 px-6 py-10 lg:px-8',
-            fullScreen ? 'w-full 2xl:max-w-[90%]' : 'max-w-7xl 2xl:max-w-[70%]',
-          ]"
-        >
-          <Breadcrumb
-            v-if="
-              !app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1
-            "
-            :items="breadcrumbsItems"
-            class="mb-5"
-            :ui="{
-              item: 'max-w-2/3',
-              list: 'w-full',
-            }"
-          />
-          <div
-            v-if="app.pageMeta.title"
-            class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-start"
-          >
-            <div class="flex flex-1 flex-col">
-              <h1
-                class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
-                :title="app.pageMeta.title"
-              >
-                {{ app.pageMeta.title }}
-                <span id="page-title-extra" />
-              </h1>
-
-              <div id="page-subtitle" />
-              <p
-                v-if="app.pageMeta.sub_title"
-                class="text-[#475467]"
-              >
-                {{ app.pageMeta.sub_title }}
-              </p>
-            </div>
-            <div id="page-header" />
-          </div>
-          <slot />
-        </main>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
-import { computed } from 'vue'
-import Sidebar from './Sidebar.vue'
-import Apps from '../Apps.vue'
-
-const props = withDefaults(
-  defineProps<{
-    label: string
-    sidebarItems: NavigationMenuItem[]
-    isSidebarGroup?: boolean
-    fullScreen?: boolean
-    rootAppPath?: string
-  }>(),
-  {
-    fullScreen: true,
-  },
-)
-
-const app = useApp()
-const isShowSidebarMobile = ref(false)
-const auth = useAuth()
-// Cookie to store user preference for desktop
-const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
-  default: () => false,
-  path: '/',
-})
-
-const notifications = [
-  {
-    id: 1,
-    userName: 'Phoenix Baker',
-    avatarSrc: '/mock/user-1.png',
-    date: '2025-01-01T08:00:00Z',
-    type: 'file',
-    description: 'Added a file to Marketing site redesign',
-    fileName: 'Tech requirements.pdf',
-    fileSize: '720 KB',
-    fileIcon: 'ph:file-pdf',
-    isRead: true,
-  },
-  {
-    id: 2,
-    userName: 'Lana Steiner',
-    avatarSrc: '/mock/user-2.png',
-    date: '2025-01-01T08:00:00Z',
-    type: 'invite',
-    description: 'Invited Alisa Hester to the team',
-    isRead: false,
-  },
-]
-
-const userMenuItems: DropdownMenuItem[] = [
-  {
-    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 breadcrumbsItems = computed(() => {
-  const list = app.pageMeta.breadcrumbs || []
-  if (!list.length) return []
-  const extra = list.map((item: any) => ({
-    ...item,
-    icon: '',
-  }))
-
-  return [
-    {
-      label: '',
-      icon: 'ph:house-line',
-      to: props.rootAppPath || '/',
-    },
-    ...extra,
-  ]
-})
-</script>
+<template>
+  <div class="relative flex min-h-screen flex-1">
+    <div
+      :class="[
+        `
+        fixed inset-0 z-[102] -mt-0.5 hidden w-auto
+        lg:block
+      `,
+        {
+          'max-w-[88px]': isCollapsed,
+          'max-w-[260px]': !isCollapsed,
+        },
+      ]"
+    >
+      <Sidebar
+        :label="label"
+        :is-collapsed="isCollapsed"
+        :items="sidebarItems"
+        :is-group="isSidebarGroup"
+        @toggle-collapsed="isCollapsed = !isCollapsed"
+      />
+    </div>
+    <div
+      :class="[
+        'w-full bg-gray-50',
+        {
+          'lg:pl-[88px]': isCollapsed,
+          'lg:pl-[260px]': !isCollapsed,
+        },
+      ]"
+    >
+      <nav
+        class="fixed top-0 left-0 z-[101] flex min-h-[64px] w-screen items-center justify-between gap-4 border-b border-gray-300 bg-white px-5 lg:min-h-[72px] lg:justify-end"
+      >
+        <div class="flex items-center gap-4">
+          <Slideover
+            v-model:open="isShowSidebarMobile"
+            :ui="{
+              content: 'w-[80%] max-w-[260px] lg:hidden',
+              overlay: 'lg:hidden',
+            }"
+            side="left"
+          >
+            <svg
+              class="cursor-pointer lg:hidden"
+              width="19"
+              height="18"
+              viewBox="0 0 19 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              transform="scale(-1, 1)"
+              @click="isShowSidebarMobile = true"
+            >
+              <path
+                d="M10 18L10 16L19 16L19 18L10 18ZM6 2L6 -2.62268e-07L19 -8.30516e-07L19 2L6 2ZM-3.49691e-07 10L-4.37114e-07 8L19 8L19 10L-3.49691e-07 10Z"
+                fill="#4B5563"
+              />
+            </svg>
+
+            <template #content>
+              <Sidebar
+                :label="label"
+                :is-collapsed="false"
+                :is-mobile="true"
+                :items="sidebarItems"
+                :is-group="isSidebarGroup"
+                @toggle-collapsed="isShowSidebarMobile = false"
+              />
+            </template>
+          </Slideover>
+          <NuxtLink :to="routes.home.to">
+            <img
+              src="/logo-mini.png"
+              alt="logo_mini_color"
+              class="w-[126px] min-w-[126px] lg:hidden lg:w-[172px] lg:min-w-[172px]"
+            />
+          </NuxtLink>
+          <Apps class="lg:hidden" />
+        </div>
+
+        <div class="flex items-center justify-center gap-4">
+          <Notifications :ui="{ content: 'mt-[64px] lg:mt-[72px]' }" />
+          <DropdownMenu
+            size="xl"
+            :items="userMenuItems"
+            :content="{
+              align: 'end',
+              side: 'bottom',
+            }"
+            :ui="{
+              content: 'w-48',
+            }"
+          >
+            <div class="relative flex cursor-pointer items-center gap-2">
+              <div class="hidden flex-col justify-end text-right lg:flex">
+                <p class="font-bold">
+                  {{ auth.me.value?.display_name || auth.me.value?.full_name }}
+                </p>
+                <p class="text-muted text-sm">
+                  {{ auth.me.value?.email || "" }}
+                </p>
+              </div>
+              <Avatar
+                class="border-muted size-[40px] border text-2xl"
+                icon="ri:user-line"
+                :src="auth.me.value?.avatar_url || ''"
+              />
+              <Icon
+                name="i-ph:caret-down-light"
+                class="size-5"
+              />
+            </div>
+          </DropdownMenu>
+        </div>
+      </nav>
+      <div class="w-full bg-gray-50 pt-[64px] lg:pt-[72px]">
+        <main
+          :class="[
+            'mx-auto min-h-full flex-1 px-6 py-10 lg:px-8',
+            fullScreen ? 'w-full 2xl:max-w-[90%]' : 'max-w-7xl 2xl:max-w-[70%]',
+          ]"
+        >
+          <Breadcrumb
+            v-if="
+              !app.pageMeta.isHideBreadcrumbs && breadcrumbsItems.length > 1
+            "
+            :items="breadcrumbsItems"
+            class="mb-5"
+            :ui="{
+              item: 'max-w-2/3',
+              list: 'w-full',
+            }"
+          />
+          <div
+            v-if="app.pageMeta.title"
+            class="mb-4 flex flex-col justify-between gap-1 md:mb-6 md:gap-4 lg:flex-row lg:items-start"
+          >
+            <div class="flex flex-1 flex-col">
+              <h1
+                class="text-3xl font-bold wrap-break-word lg:max-w-2/3"
+                :title="app.pageMeta.title"
+              >
+                {{ app.pageMeta.title }}
+                <span id="page-title-extra" />
+              </h1>
+
+              <div id="page-subtitle" />
+              <p
+                v-if="app.pageMeta.sub_title"
+                class="text-[#475467]"
+              >
+                {{ app.pageMeta.sub_title }}
+              </p>
+            </div>
+            <div id="page-header" />
+          </div>
+          <slot />
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
+import { computed } from 'vue'
+import Sidebar from './Sidebar.vue'
+import Apps from '../Apps.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    sidebarItems: NavigationMenuItem[]
+    isSidebarGroup?: boolean
+    fullScreen?: boolean
+    rootAppPath?: string
+  }>(),
+  {
+    fullScreen: true,
+  },
+)
+
+const app = useApp()
+const isShowSidebarMobile = ref(false)
+const auth = useAuth()
+// Cookie to store user preference for desktop
+const isCollapsed = useCookie<boolean>('app.admin.sidebar.isCollapsed', {
+  default: () => false,
+  path: '/',
+})
+
+const userMenuItems: DropdownMenuItem[] = [
+  {
+    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 breadcrumbsItems = computed(() => {
+  const list = app.pageMeta.breadcrumbs || []
+  if (!list.length) return []
+  const extra = list.map((item: any) => ({
+    ...item,
+    icon: '',
+  }))
+
+  return [
+    {
+      label: '',
+      icon: 'ph:house-line',
+      to: props.rootAppPath || '/',
+    },
+    ...extra,
+  ]
+})
+</script>

package/app/components/Layout/Apps.vue

@@ -1,45 +1,45 @@
-<template>
-  <Popover
-    :content="{
-      align: 'center',
-      side: 'bottom',
-      sideOffset: 8,
-    }"
-  >
-    <Button
-      icon="mingcute:dot-grid-line"
-      variant="ghost"
-      class="text-gray-500"
-    />
-
-    <template #content>
-      <Card class="w-[300px]">
-        <div
-          class="grid grid-cols-3 gap-6"
-        >
-          <Button
-            v-for="item in auth.menusNavbar.value"
-            :key="item.to"
-            class="flex flex-col items-center p-0 text-center"
-            variant="link"
-            :to="item.to"
-          >
-            <div class="flex h-[42px] items-center justify-center">
-              <img
-                :src="item.icon"
-                class="h-auto w-[32px]"
-              />
-            </div>
-            <span class="text-sm font-medium text-gray-700">
-              {{ item.label }}
-            </span>
-          </Button>
-        </div>
-      </Card>
-    </template>
-  </Popover>
-</template>
-
-<script lang="ts" setup>
-const auth = useAuth()
-</script>
+<template>
+  <Popover
+    :content="{
+      align: 'center',
+      side: 'bottom',
+      sideOffset: 8,
+    }"
+  >
+    <Button
+      icon="mingcute:dot-grid-line"
+      variant="ghost"
+      class="text-gray-500"
+    />
+
+    <template #content>
+      <Card class="w-[300px]">
+        <div
+          class="grid grid-cols-3 gap-6"
+        >
+          <Button
+            v-for="item in auth.menusNavbar.value"
+            :key="item.to"
+            class="flex flex-col items-center p-0 text-center"
+            variant="link"
+            :to="item.to"
+          >
+            <div class="flex h-[42px] items-center justify-center">
+              <img
+                :src="item.icon"
+                class="h-auto w-[32px]"
+              />
+            </div>
+            <span class="text-sm font-medium text-gray-700">
+              {{ item.label }}
+            </span>
+          </Button>
+        </div>
+      </Card>
+    </template>
+  </Popover>
+</template>
+
+<script lang="ts" setup>
+const auth = useAuth()
+</script>