feat: add profile management flow

app/app.vue

@@ -10,13 +10,81 @@
             </svg>
           </div>
           <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-            <li><NuxtLink to="/">Dashboard</NuxtLink></li>
-            <li><NuxtLink to="/machines">Machines</NuxtLink></li>
-            <li><NuxtLink to="/types">Types de Machines</NuxtLink></li>
-            <li><NuxtLink to="/sites">Sites</NuxtLink></li>
-            <li><NuxtLink to="/generator">Générateur</NuxtLink></li>
-            <li><NuxtLink to="/documents">Documents</NuxtLink></li>
-            <li><NuxtLink to="/constructeurs">Constructeurs</NuxtLink></li>
+            <li class="pt-1 pb-2 lg:hidden">
+              <button
+                @click="openDisplaySettings"
+                class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                </svg>
+                Paramètres d'affichage
+              </button>
+            </li>
+            <li>
+              <NuxtLink
+                to="/"
+                class="rounded-md px-2 py-1 transition-colors"
+                :class="isActive('/') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              >
+                Dashboard
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="/machines"
+                class="rounded-md px-2 py-1 transition-colors"
+                :class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              >
+                Machines
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="/types"
+                class="rounded-md px-2 py-1 transition-colors"
+                :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              >
+                Types de Machines
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="/sites"
+                class="rounded-md px-2 py-1 transition-colors"
+                :class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              >
+                Sites
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="/generator"
+                class="rounded-md px-2 py-1 transition-colors"
+                :class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              >
+                Générateur
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="/documents"
+                class="rounded-md px-2 py-1 transition-colors"
+                :class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              >
+                Documents
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="/constructeurs"
+                class="rounded-md px-2 py-1 transition-colors"
+                :class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+              >
+                Constructeurs
+              </NuxtLink>
+            </li>
           </ul>
         </div>
         <div class="flex items-center space-x-3">
@@ -32,13 +100,69 @@
       </div>
       <div class="navbar-center hidden lg:flex">
         <ul class="menu menu-horizontal px-1">
-          <li><NuxtLink to="/" class="link link-hover">Dashboard</NuxtLink></li>
-          <li><NuxtLink to="/machines" class="link link-hover">Machines</NuxtLink></li>
-          <li><NuxtLink to="/types" class="link link-hover">Types de Machines</NuxtLink></li>
-          <li><NuxtLink to="/sites" class="link link-hover">Sites</NuxtLink></li>
-          <li><NuxtLink to="/generator" class="link link-hover">Générateur</NuxtLink></li>
-          <li><NuxtLink to="/documents" class="link link-hover">Documents</NuxtLink></li>
-          <li><NuxtLink to="/constructeurs" class="link link-hover">Constructeurs</NuxtLink></li>
+          <li>
+            <NuxtLink
+              to="/"
+              class="transition-colors px-3 py-2 rounded-md"
+              :class="isActive('/') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+            >
+              Dashboard
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink
+              to="/machines"
+              class="transition-colors px-3 py-2 rounded-md"
+              :class="isActive('/machines') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+            >
+              Machines
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink
+              to="/types"
+              class="transition-colors px-3 py-2 rounded-md"
+              :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+            >
+              Types de Machines
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink
+              to="/sites"
+              class="transition-colors px-3 py-2 rounded-md"
+              :class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+            >
+              Sites
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink
+              to="/generator"
+              class="transition-colors px-3 py-2 rounded-md"
+              :class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+            >
+              Générateur
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink
+              to="/documents"
+              class="transition-colors px-3 py-2 rounded-md"
+              :class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+            >
+              Documents
+            </NuxtLink>
+          </li>
+          <li>
+            <NuxtLink
+              to="/constructeurs"
+              class="transition-colors px-3 py-2 rounded-md"
+              :class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
+            >
+              Constructeurs
+            </NuxtLink>
+          </li>
         </ul>
       </div>
       <div class="navbar-end">
@@ -46,7 +170,7 @@
           <!-- Bouton paramètres d'affichage -->
           <button 
             @click="openDisplaySettings" 
-            class="btn btn-ghost btn-circle"
+            class="btn btn-ghost btn-circle hidden lg:inline-flex"
             title="Paramètres d'affichage"
           >
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -91,6 +215,39 @@
               </li>
             </ul>
           </div>
+
+          <ClientOnly>
+            <div class="dropdown dropdown-end" v-if="activeProfile">
+              <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar placeholder">
+                <div class="bg-secondary text-secondary-content rounded-full w-10">
+                  <span class="text-sm font-semibold">{{ activeProfileInitials }}</span>
+                </div>
+              </div>
+              <ul tabindex="0" class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64">
+                <li class="px-2 py-1 text-sm text-base-content/70">
+                  Connecté en tant que<br />
+                  <span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
+                </li>
+                <li><hr class="my-1" /></li>
+                <li>
+                  <NuxtLink to="/profiles/manage" class="justify-between">
+                    Gestion des profils
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                  </NuxtLink>
+                </li>
+                <li>
+                  <button type="button" class="text-error justify-between" @click="handleLogout">
+                    Déconnexion
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1" />
+                    </svg>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </ClientOnly>
         </div>
       </div>
     </div>
@@ -118,10 +275,22 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, navigateTo } from '#imports'
+import { useProfileSession } from '~/composables/useProfileSession'
 
 // État du modal des paramètres d'affichage
 const displaySettingsOpen = ref(false)
+const { activeProfile, ensureSession, logout } = useProfileSession()
+
+// Route active pour souligner l'onglet sélectionné dans la navbar
+const route = useRoute()
+const isActive = (path) => {
+  if (path === '/') {
+    return route.path === '/'
+  }
+  return route.path.startsWith(path)
+}
 
 // Ouvrir les paramètres d'affichage
 const openDisplaySettings = () => {
@@ -137,4 +306,24 @@ const closeDisplaySettings = () => {
 const handleSettingsUpdate = (settings) => {
   console.log('Paramètres d\'affichage mis à jour:', settings)
 }
+
+const handleLogout = async () => {
+  await logout()
+  await navigateTo('/profiles')
+}
+
+const activeProfileLabel = computed(() => {
+  if (!activeProfile.value) return 'Profil inconnu'
+  return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`
+})
+
+const activeProfileInitials = computed(() => {
+  if (!activeProfile.value) return '??'
+  const { firstName = '', lastName = '' } = activeProfile.value
+  return `${firstName.charAt(0) || ''}${lastName.charAt(0) || ''}`.toUpperCase() || '??'
+})
+
+onMounted(async () => {
+  await ensureSession()
+})
 </script>