first commit

components/layout/full/vertical-header/NotificationDD.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {notifications} from '~/_mockApis/headerData';
+import { Icon } from '@iconify/vue';
+</script>
+<template>
+    <!-- ---------------------------------------------- -->
+    <!-- notifications DD -->
+    <!-- ---------------------------------------------- -->
+    <v-menu open-on-hover open-on-click >
+        <template v-slot:activator="{ props }">
+            <v-btn icon class="custom-hover-primary" size="small" variant="text" color="primary" v-bind="props">
+                <Icon icon="solar:bell-bing-line-duotone" height="22"   />
+            </v-btn>
+        </template>
+        <v-sheet rounded="md" width="360" elevation="10">
+            <div class="px-6 pt-6 pb-4">
+                <div class="d-flex align-center justify-space-between">
+                    <h6 class="text-h5">Notifications</h6>
+                    <v-chip color="primary" variant="flat" size="small" class="text-white rounded-sm">5 New</v-chip>
+                </div>
+            </div>
+            <perfect-scrollbar style="height: 350px">
+                <v-list class="py-0 theme-list" lines="two">
+                    <v-list-item v-for="item in notifications" :key="item.title" :value="item" color="primary" class="py-3 px-6">
+                        <template v-slot:prepend>
+                            <v-avatar size="45" :color=" 'light' + item.color" rounded="circle">
+                                <Icon :icon="'solar:' + item.avatar" height="20" :class="'text-' + item.color"/>
+                            </v-avatar>
+                        </template>
+                        <div class="d-flex justify-space-between">
+                            <h6 class="text-subtitle-1 heading mb-1">{{ item.title }}</h6>
+                            <span class="text-subtitle-2 textSecondary">{{ item.time }}</span>
+                        </div>
+                        <p class="text-subtitle-2 font-weight-regular textSecondary">{{ item.subtitle }}</p>
+                    </v-list-item>
+                </v-list>
+            </perfect-scrollbar>
+            <div class="py-4 px-6 text-center">
+                <v-btn color="primary" variant="flat" size="large" block>See all Notifications</v-btn>
+            </div>
+        </v-sheet>
+    </v-menu>
+</template>