initiation librodrome

2026-02-20 12:55:10 +01:00
commit 35e2897a73
208 changed files with 18951 additions and 0 deletions
--- a/app/components/admin/AdminSidebar.vue
+++ b/app/components/admin/AdminSidebar.vue
@@ -0,0 +1,148 @@
+<template>
+  <aside class="admin-sidebar">
+    <div class="sidebar-header">
+      <NuxtLink to="/admin" class="flex items-center gap-2 font-display text-lg font-bold">
+        <div class="i-lucide-settings h-5 w-5 text-primary" />
+        <span class="text-gradient">Admin</span>
+      </NuxtLink>
+    </div>
+
+    <nav class="sidebar-nav">
+      <p class="sidebar-section">Contenu</p>
+      <NuxtLink to="/admin" class="sidebar-link" exact-active-class="sidebar-link--active">
+        <div class="i-lucide-layout-dashboard h-4 w-4" />
+        Dashboard
+      </NuxtLink>
+      <NuxtLink to="/admin/site" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-globe h-4 w-4" />
+        Site
+      </NuxtLink>
+      <NuxtLink to="/admin/messages" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-message-square h-4 w-4" />
+        Messages
+      </NuxtLink>
+
+      <p class="sidebar-section">Pages</p>
+      <NuxtLink to="/admin/pages/home" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-home h-4 w-4" />
+        Accueil
+      </NuxtLink>
+      <NuxtLink to="/admin/pages/lire" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-book-open h-4 w-4" />
+        Lire
+      </NuxtLink>
+      <NuxtLink to="/admin/pages/ecouter" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-headphones h-4 w-4" />
+        Écouter
+      </NuxtLink>
+      <NuxtLink to="/admin/pages/gratewizard" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-sparkles h-4 w-4" />
+        GrateWizard
+      </NuxtLink>
+
+      <p class="sidebar-section">Livre</p>
+      <NuxtLink to="/admin/book" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-list h-4 w-4" />
+        Chapitres
+      </NuxtLink>
+      <NuxtLink to="/admin/songs" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-music h-4 w-4" />
+        Chansons
+      </NuxtLink>
+
+      <p class="sidebar-section">Médias</p>
+      <NuxtLink to="/admin/media" class="sidebar-link" active-class="sidebar-link--active">
+        <div class="i-lucide-image h-4 w-4" />
+        Navigateur
+      </NuxtLink>
+    </nav>
+
+    <div class="sidebar-footer">
+      <NuxtLink to="/" class="sidebar-link" target="_blank">
+        <div class="i-lucide-external-link h-4 w-4" />
+        Voir le site
+      </NuxtLink>
+      <button class="sidebar-link w-full" @click="logout">
+        <div class="i-lucide-log-out h-4 w-4" />
+        Déconnexion
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+async function logout() {
+  await $fetch('/api/admin/auth/logout', { method: 'POST' })
+  navigateTo('/admin/login')
+}
+</script>
+
+<style scoped>
+.admin-sidebar {
+  background: hsl(20 8% 5%);
+  border-right: 1px solid hsl(20 8% 14%);
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  position: sticky;
+  top: 0;
+}
+
+.sidebar-header {
+  padding: 1.25rem 1rem;
+  border-bottom: 1px solid hsl(20 8% 14%);
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 0.5rem;
+  overflow-y: auto;
+}
+
+.sidebar-section {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: hsl(20 8% 40%);
+  padding: 1rem 0.75rem 0.375rem;
+  margin: 0;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.85rem;
+  color: hsl(20 8% 60%);
+  text-decoration: none;
+  transition: all 0.2s;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.sidebar-link:hover {
+  background: hsl(20 8% 10%);
+  color: white;
+}
+
+.sidebar-link--active {
+  background: hsl(12 76% 48% / 0.12);
+  color: hsl(12 76% 68%);
+}
+
+.sidebar-footer {
+  padding: 0.5rem;
+  border-top: 1px solid hsl(20 8% 14%);
+}
+
+@media (max-width: 768px) {
+  .admin-sidebar {
+    display: none;
+  }
+}
+</style>