Primer commit

src/components/AdminSidebar.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { RouterLink } from 'vue-router'
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['close'])
+
+const navItems = [
+  {
+    name: 'Dashboard',
+    to: '/admin/dashboard',
+    icon: 'M3 3h8v8H3V3Zm10 0h8v5h-8V3ZM3 13h5v8H3v-8Zm7 3h11v5H10v-5Z',
+  },
+  {
+    name: 'Configuracion',
+    to: '/admin/configuracion',
+    icon: 'M4 17h16M7 13V7m5 10V4m5 13v-8',
+  },
+  {
+    name: 'Mis busquedas',
+    to: '/admin/misbusquedas',
+    icon: 'M16 19a4 4 0 0 0-8 0m4-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 8a3 3 0 0 0-6 0m3-5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM4 19a3 3 0 0 1 6 0m-3-5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z',
+  },
+  {
+    name: 'Facturacion',
+    to: '/admin/facturacion',
+    icon: 'M5 4h14v16l-3-2-3 2-3-2-3 2-2-1.33V4Zm4 4h6m-6 4h6',
+  },
+  {
+    name: 'Integraciones',
+    to: '/admin/integraciones',
+    icon: 'M7 7h10v10H7V7Zm-4 4h4m10 0h4M11 3v4m0 10v4',
+  },
+]
+
+const closeOnMobile = () => {
+  if (window.matchMedia('(max-width: 767px)').matches) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <button
+    v-if="isOpen"
+    type="button"
+    class="fixed inset-0 top-16 z-20 bg-slate-900/30 md:hidden"
+    aria-label="Cerrar menu lateral"
+    @click="emit('close')"
+  />
+
+  <aside
+    :class="[
+      'fixed left-0 top-16 z-30 flex h-[calc(100vh-4rem)] w-64 flex-col border-r border-slate-200 bg-white transition-transform duration-300',
+      isOpen ? 'translate-x-0' : '-translate-x-full',
+    ]"
+  >
+    <div class="border-b border-slate-200 px-6 py-4">
+      <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Control Center</p>
+      <h1 class="mt-1 text-lg font-semibold text-slate-900">Admin Panel</h1>
+    </div>
+
+    <nav class="flex-1 overflow-y-auto px-3 py-4">
+      <ul class="space-y-1.5">
+        <li v-for="item in navItems" :key="item.name">
+          <RouterLink :to="item.to" custom v-slot="{ href, navigate, isActive }">
+            <a
+              :href="href"
+              @click="(event) => { navigate(event); closeOnMobile() }"
+              :class="[
+                'group flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition',
+                isActive
+                  ? 'bg-indigo-50 text-indigo-600 font-semibold'
+                  : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
+              ]"
+            >
+              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <path
+                  :d="item.icon"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <span>{{ item.name }}</span>
+            </a>
+          </RouterLink>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+</template>