feat : modification de la page employé WIP + ajout d'une navbar

frontend/components/AppTopNav.vue

@@ -0,0 +1,43 @@
+<template>
+  <header class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
+    <div class="flex h-full items-center justify-end">
+      <div class="flex gap-12 text-xl text-white">
+        <Icon name="mdi:bell-plus" class="self-center cursor-pointer" size="36" />
+        <div class="group relative flex gap-4">
+          <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
+          <p class="self-center cursor-pointer">{{ user?.username }}</p>
+          <div class="invisible absolute right-0 top-full z-20 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
+            <button
+              type="button"
+              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
+            >
+              Mon profil
+            </button>
+            <button
+              type="button"
+              class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
+              @click="handleLogout"
+            >
+              Déconnexion
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+ </template>
+
+<script setup lang="ts">
+import type { User } from '~/services/dto/user'
+
+defineProps<{
+  user?: User
+}>()
+
+const auth = useAuthStore()
+
+const handleLogout = async () => {
+  await auth.logout()
+  await navigateTo('/login')
+}
+</script>