99 lines
2.8 KiB
Vue
99 lines
2.8 KiB
Vue
<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>
|