feat: add check backup

layouts/default.vue

@@ -18,34 +18,43 @@
         <slot name="sidebar"/>
         <nav class="sidebar-nav" aria-label="Sections">
           <p class="nav-label">Navigation</p>
-          <div class="flex flex-col gap-2">
-            <div class="bg-m-tertiary rounded-lg border border-m-accent/6">
-              <NuxtLink
-                  to="/"
-                  class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
-              >
-                <IconifyIcon
-                    icon="mdi:home"
-                    class="text-lg"/>
-                <p>Home</p>
-              </NuxtLink>
-            </div>
-            <div class="bg-m-tertiary rounded-lg border border-m-accent/6">
-              <NuxtLink
-                  to="/backup"
-                  class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
-              >
-                <IconifyIcon
-                    icon="mdi:data"
-                    class="text-lg"/>
-                <p>Backup</p>
-              </NuxtLink>
-            </div>
-          </div>
+          <NuxtLink
+              v-for="item in navItems"
+              :key="`desktop-${item.to}`"
+              v-slot="{ href, navigate, isExactActive }"
+              :to="item.to"
+              custom
+          >
+            <a
+                :href="href"
+                class="nav-link"
+                :class="{ 'nav-link-active': isExactActive }"
+                :aria-current="isExactActive ? 'page' : undefined"
+                @click="navigate"
+            >
+              <span class="nav-link-main">
+                <span class="nav-icon">
+                  <IconifyIcon :icon="item.icon" class="text-lg"/>
+                </span>
+                <span>
+                  <span class="nav-title">{{ item.label }}</span>
+                  <span class="nav-caption">{{ item.caption }}</span>
+                </span>
+              </span>
+              <span class="nav-pill">{{ item.short }}</span>
+            </a>
+          </NuxtLink>
         </nav>
       </div>
       <div class="sidebar-footer">
         <div class="sidebar-divider"/>
+        <div class="status-card">
+          <p class="status-label">Environnement</p>
+          <p class="status-value">Production</p>
+          <p class="status-description">
+            Acces rapide au monitoring, aux sauvegardes et aux cartes systeme.
+          </p>
+        </div>
         <div class="footer-row">
           <p class="font-mono text-[10px] tracking-widest uppercase text-white/40">
             Supervisor {{ appVersion }}
@@ -224,6 +233,10 @@ const navItems = [
   letter-spacing: -0.02em;
 }
 
+.sidebar .brand-title {
+  margin-top: 0;
+}
+
 .brand-description {
   margin: 0.55rem 0 0;
   color: rgb(255 255 255 / 0.58);
@@ -245,7 +258,7 @@ const navItems = [
 
 .sidebar-content {
   flex: 1;
-  padding: 0.5rem 1rem 1rem;
+  padding: 0.75rem 1rem 1rem;
 }
 
 .sidebar-footer {
@@ -274,7 +287,7 @@ const navItems = [
 .sidebar-nav {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.625rem;
 }
 
 .nav-label {
@@ -321,6 +334,16 @@ const navItems = [
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
 }
 
+.nav-link-active .nav-icon {
+  background: rgb(var(--m-accent) / 0.18);
+  color: white;
+}
+
+.nav-link-active .nav-pill {
+  background: rgb(var(--m-accent) / 0.18);
+  color: white;
+}
+
 .nav-link-main {
   display: flex;
   align-items: center;
@@ -403,6 +426,9 @@ const navItems = [
 
 .content {
   background: rgb(var(--m-bg));
+  background-image:
+    linear-gradient(180deg, rgb(255 255 255 / 0.01), transparent 18%),
+    radial-gradient(circle at top right, rgb(var(--m-accent) / 0.08), transparent 20%);
   overflow-y: auto;
   min-height: 100vh;
   transition: background-color 0.4s ease;