DONE: layout letter with letterhead and footer, notification for newly...

fe/src/themes/Enigma/SideMenu/SideMenu.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useBreadcrumb } from '@/composables/useBreadcrumb'
+import { useNotifications } from '@/modules/notification'
 import '@/assets/css/themes/enigma/side-menu.css'
 import logo from '@/assets/images/logo-kopkb.svg'
 import { useSideMenu } from '@/composables/useSideMenu'
@@ -9,6 +10,7 @@ import { Lucide } from '@/components/ui/lucide'
 import { Breadcrumb } from '@/components/ui/breadcrumb'
 import { AvatarRoot, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import mainMenu from '@/main/side-menu'
+import { useFilteredMenu } from '@/composables/useFilteredMenu'
 import { SideMenu } from '@/components/side-menu'
 import { AccountDropdown, AccountTrigger } from '@/components/account-dropdown'
 import { NotificationDropdown } from '@/components/notification-dropdown'
@@ -32,12 +34,15 @@ const {
 
 const authStore = useAuthStore()
 const breadcrumbItems = useBreadcrumb([])
+const filteredMenu = useFilteredMenu(mainMenu)
+const { unreadCount, fetchNotifications } = useNotifications()
 
 const appName = import.meta.env.VITE_APP_NAME
 const appVersion = import.meta.env.VITE_APP_VERSION
 
 onMounted(() => {
   authStore.fetchSession()
+  fetchNotifications()
 })
 </script>
 
@@ -101,7 +106,7 @@ onMounted(() => {
             '[-webkit-mask-composite:destination-in]',
           ].join(' ')">
             <ScrollAreaContent class="min-w-auto!">
-              <SideMenu :menu="mainMenu" />
+              <SideMenu :menu="filteredMenu" />
             </ScrollAreaContent>
           </ScrollAreaViewport>
           <ScrollAreaScrollbar class="bg-transparent xl:data-[orientation=vertical]:mr-9">
@@ -140,8 +145,19 @@ onMounted(() => {
                 <Breadcrumb v-if="breadcrumbItems.length"
                   class="mr-auto hidden xl:flex [&_ol]:text-(--color-nav-foreground)/70 [&_li]:last:text-(--color-nav-foreground)/90 [&_li]:hover:text-(--color-nav-foreground)/90"
                   :items="breadcrumbItems" />
-                <div class="group/notifications relative flex h-9 items-center">
-                  <Lucide class="[--color:var(--color-nav-foreground)]" icon="Bell" />
+                <div
+                  class="group/notifications relative flex size-10 flex-none cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 transition-colors hover:bg-(--color-nav-foreground)/20"
+                >
+                  <Lucide
+                    class="size-[22px] stroke-[1.75] [--color:var(--color-nav-foreground)]"
+                    icon="Bell"
+                  />
+                  <span
+                    v-if="unreadCount > 0"
+                    class="bg-danger text-background ring-background absolute -right-1.5 -top-1.5 flex min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[11px] font-semibold leading-none ring-2"
+                  >
+                    {{ unreadCount > 9 ? '9+' : unreadCount }}
+                  </span>
                   <NotificationDropdown class="absolute right-0 top-full mt-2 origin-top-right"
                     boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
                 </div>