feat: add admin notification

gitsindonesia · Jan 17, 2023 · 1712813 · 1712813
1 parent 98aea51
commit 1712813
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 15 deletions.
diff --git a/starter/nuxt-admin/app.config.ts b/starter/nuxt-admin/app.config.ts
@@ -18,13 +18,28 @@ export default defineAppConfig({
       icon: 'ic:baseline-person',
       to: '/admin/profile',
     },
-    // {
-    //   divider: true
-    // },
-    // {
-    //   text: 'Logout',
-    //   icon: 'ic:baseline-logout',
-    //   to: '/admin/logout',
-    // },
   ],
+  notification: {
+    label: 'Notification',
+    items: [
+      {
+        title: 'Notification 1',
+        message: 'This is a notification',
+        icon: 'ic:baseline-person',
+        to: '/admin/profile',
+      },
+      {
+        title: 'Notification 2',
+        message: 'This is a notification',
+        icon: 'ic:baseline-person',
+        to: '/admin/profile',
+      },
+      {
+        title: 'Notification 3',
+        message: 'This is a notification',
+        icon: 'ic:baseline-person',
+        to: '/admin/profile',
+      },
+    ],
+  },
 });
diff --git a/starter/nuxt-admin/components/Admin/Header.vue b/starter/nuxt-admin/components/Admin/Header.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const appConfig = useAppConfig();
-
 const adminDrawer = useAdminDrawer();
 </script>
 
@@ -9,17 +8,20 @@ const adminDrawer = useAdminDrawer();
     <VBtn
       class="inline-flex xl:!hidden -ml-2"
       fab
-      prefix-icon="ic:round-menu"
       text
+      prefix-icon="ic:round-menu"
       @click="adminDrawer = !adminDrawer"
     />
     <NuxtLink to="/admin" class="font-semibold">
       {{ appConfig.adminTitle }}
     </NuxtLink>
-    <VDropdown
-      :label="appConfig.accountMenuLabel"
-      right
-      :items="appConfig.accountMenus"
-    />
+    <div class="flex items-center gap-2 xl:pr-2">
+      <AdminNotification />
+      <VDropdown
+        :label="appConfig.accountMenuLabel"
+        :items="appConfig.accountMenus"
+        right
+      />
+    </div>
   </VAppBar>
 </template>
diff --git a/starter/nuxt-admin/components/Admin/Notification.vue b/starter/nuxt-admin/components/Admin/Notification.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {VBtn} from '@gits-id/ui';
+
+const appConfig = useAppConfig();
+</script>
+
+<template>
+  <VDropdown
+    :label="appConfig.notification.label"
+    right
+    panel-class="!w-80 !p-0"
+  >
+    <template #activator>
+      <VDropdownButton
+        :as="VBtn"
+        fab
+        text
+        prefix-icon="ic:round-notifications"
+        class="relative"
+      >
+        <span
+          v-if="appConfig.notification.items.length > 0"
+          class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"
+        />
+      </VDropdownButton>
+    </template>
+    <VList hover>
+      <VListItemHeader class="!font-semibold">Notification</VListItemHeader>
+      <VListItemDivider />
+      <template
+        v-for="notif in appConfig.notification.items"
+        :key="notif.title"
+      >
+        <VListItem prepend-icon="ic:round-verified-user">
+          <div>
+            <h3 class="font-medium">
+              {{ notif.title }}
+            </h3>
+            <p class="text-gray-600 text-sm truncate" :title="notif.message">
+              {{ notif.message }}
+            </p>
+          </div>
+        </VListItem>
+      </template>
+      <VListItemDivider />
+      <VBtn block text color="primary">View all notifications</VBtn>
+    </VList>
+  </VDropdown>
+</template>