feat: reorganize machine skeleton pages

app/app.vue

@@ -125,7 +125,7 @@
                 class="rounded-md px-2 py-1 transition-colors cursor-pointer"
                 :class="
                   isActive('/component-catalog') ||
-                    isActive('/component-category')
+                  isActive('/component-category')
                     ? 'bg-primary text-primary-content font-semibold shadow-sm'
                     : 'text-base-content hover:bg-primary/10 hover:text-primary'
                 "
@@ -178,8 +178,8 @@
                 class="rounded-md px-2 py-1 transition-colors cursor-pointer"
                 :class="
                   isActive('/sites') ||
-                    isActive('/documents') ||
-                    isActive('/constructeurs')
+                  isActive('/documents') ||
+                  isActive('/constructeurs')
                     ? 'bg-primary text-primary-content font-semibold shadow-sm'
                     : 'text-base-content hover:bg-primary/10 hover:text-primary'
                 "
@@ -241,10 +241,7 @@
               <IconLucideBoxes class="w-6 h-6" aria-hidden="true" />
             </div>
           </div>
-          <NuxtLink
-            to="/"
-            class="btn btn-ghost text-xl"
-          >
+          <NuxtLink to="/" class="btn btn-ghost text-xl">
             Inventaire Pro
           </NuxtLink>
         </div>
@@ -356,7 +353,7 @@
               class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
               :class="
                 isActive('/component-category') ||
-                  isActive('/component-catalog')
+                isActive('/component-catalog')
                   ? 'bg-primary text-primary-content font-semibold shadow-sm'
                   : 'text-base-content hover:bg-primary/10 hover:text-primary'
               "
@@ -409,8 +406,8 @@
               class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
               :class="
                 isActive('/sites') ||
-                  isActive('/documents') ||
-                  isActive('/constructeurs')
+                isActive('/documents') ||
+                isActive('/constructeurs')
                   ? 'bg-primary text-primary-content font-semibold shadow-sm'
                   : 'text-base-content hover:bg-primary/10 hover:text-primary'
               "
@@ -475,40 +472,6 @@
             <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
           </button>
 
-          <!-- Menu Nouveau -->
-          <div class="dropdown dropdown-end">
-            <div tabindex="0" role="button" class="btn btn-primary">
-              <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
-              Nouveau
-            </div>
-            <ul
-              tabindex="0"
-              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
-            >
-              <li>
-                <NuxtLink
-                  to="/machines?add=true"
-                  class="flex items-center gap-2"
-                >
-                  <IconLucideCpu class="w-4 h-4" aria-hidden="true" />
-                  Nouvelle Machine
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink to="/generator" class="flex items-center gap-2">
-                  <IconLucideFilePlus class="w-4 h-4" aria-hidden="true" />
-                  Nouveau Type
-                </NuxtLink>
-              </li>
-              <li>
-                <NuxtLink to="/sites?add=true" class="flex items-center gap-2">
-                  <IconLucideMapPin class="w-4 h-4" aria-hidden="true" />
-                  Nouveau Site
-                </NuxtLink>
-              </li>
-            </ul>
-          </div>
-
           <ClientOnly>
             <div v-if="activeProfile" class="dropdown dropdown-end">
               <div
@@ -531,12 +494,12 @@
                 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>
+                  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
@@ -586,99 +549,103 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRoute, navigateTo } from '#imports'
-import { useProfileSession } from '~/composables/useProfileSession'
-import IconLucideMenu from '~icons/lucide/menu'
-import IconLucideSettings from '~icons/lucide/settings'
-import IconLucideBoxes from '~icons/lucide/boxes'
-import IconLucidePlus from '~icons/lucide/plus'
-import IconLucideCpu from '~icons/lucide/cpu'
-import IconLucideFilePlus from '~icons/lucide/file-plus'
-import IconLucideMapPin from '~icons/lucide/map-pin'
-import IconLucideChevronRight from '~icons/lucide/chevron-right'
-import IconLucideLogOut from '~icons/lucide/log-out'
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useRoute, navigateTo } from "#imports";
+import { useProfileSession } from "~/composables/useProfileSession";
+import IconLucideMenu from "~icons/lucide/menu";
+import IconLucideSettings from "~icons/lucide/settings";
+import IconLucideBoxes from "~icons/lucide/boxes";
+import IconLucidePlus from "~icons/lucide/plus";
+import IconLucideCpu from "~icons/lucide/cpu";
+import IconLucideFilePlus from "~icons/lucide/file-plus";
+import IconLucideMapPin from "~icons/lucide/map-pin";
+import IconLucideChevronRight from "~icons/lucide/chevron-right";
+import IconLucideLogOut from "~icons/lucide/log-out";
 
 // État du modal des paramètres d'affichage
-const displaySettingsOpen = ref(false)
-const { activeProfile, ensureSession, logout } = useProfileSession()
+const displaySettingsOpen = ref(false);
+const { activeProfile, ensureSession, logout } = useProfileSession();
 
 // Route active pour souligner l'onglet sélectionné dans la navbar
-const route = useRoute()
+const route = useRoute();
 const isActive = (path) => {
-  if (path === '/') {
-    return route.path === '/'
+  if (path === "/") {
+    return route.path === "/";
   }
-  return route.path.startsWith(path)
-}
+  return route.path.startsWith(path);
+};
 
 // Ouvrir les paramètres d'affichage
 const openDisplaySettings = () => {
-  displaySettingsOpen.value = true
-}
+  displaySettingsOpen.value = true;
+};
 
 // Fermer les paramètres d'affichage
 const closeDisplaySettings = () => {
-  displaySettingsOpen.value = false
-}
+  displaySettingsOpen.value = false;
+};
 
 // Gérer les mises à jour des paramètres
 const handleSettingsUpdate = (settings) => {
-  console.log("Paramètres d'affichage mis à jour:", settings)
-}
+  console.log("Paramètres d'affichage mis à jour:", settings);
+};
 
 const handleLogout = async () => {
-  await logout()
-  await navigateTo('/profiles')
-}
+  await logout();
+  await navigateTo("/profiles");
+};
 
-const openDropdown = ref(null)
-let dropdownCloseTimer = null
+const openDropdown = ref(null);
+let dropdownCloseTimer = null;
 
 const setDropdown = (name) => {
   if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer)
-    dropdownCloseTimer = null
+    clearTimeout(dropdownCloseTimer);
+    dropdownCloseTimer = null;
   }
   if (openDropdown.value !== name) {
-    openDropdown.value = name
+    openDropdown.value = name;
   }
-}
+};
 
 const scheduleDropdownClose = (name) => {
   if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer)
+    clearTimeout(dropdownCloseTimer);
   }
   dropdownCloseTimer = setTimeout(() => {
     if (openDropdown.value === name) {
-      openDropdown.value = null
+      openDropdown.value = null;
     }
-    dropdownCloseTimer = null
-  }, 200)
-}
+    dropdownCloseTimer = null;
+  }, 200);
+};
 
 const activeProfileLabel = computed(() => {
-  if (!activeProfile.value) { return 'Profil inconnu' }
-  return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`
-})
+  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
+  if (!activeProfile.value) {
+    return "??";
+  }
+  const { firstName = "", lastName = "" } = activeProfile.value;
   return (
-    `${firstName.charAt(0) || ''}${lastName.charAt(0) || ''}`.toUpperCase() ||
-    '??'
-  )
-})
+    `${firstName.charAt(0) || ""}${lastName.charAt(0) || ""}`.toUpperCase() ||
+    "??"
+  );
+});
 
 onMounted(async () => {
-  await ensureSession()
-})
+  await ensureSession();
+});
 
 onUnmounted(() => {
   if (dropdownCloseTimer) {
-    clearTimeout(dropdownCloseTimer)
-    dropdownCloseTimer = null
+    clearTimeout(dropdownCloseTimer);
+    dropdownCloseTimer = null;
   }
-})
+});
 </script>