155 lines
4.0 KiB
Vue
155 lines
4.0 KiB
Vue
<template>
|
|
<aside
|
|
:class="[
|
|
'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
|
|
isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
|
|
]"
|
|
>
|
|
<nav class="h-full overflow-y-auto py-4">
|
|
<div v-for="(item, index) in menuItems" :key="index" class="mb-2">
|
|
<!-- Menu item with submenu -->
|
|
<template v-if="item.id">
|
|
<button
|
|
@click="toggleMenu(item.id)"
|
|
class="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-100"
|
|
>
|
|
<div class="flex items-center">
|
|
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
|
<span>{{ item.text }}</span>
|
|
</div>
|
|
<component
|
|
:is="expandedMenus[item.id] ? ChevronUpIcon : ChevronDownIcon"
|
|
class="w-4 h-4"
|
|
/>
|
|
</button>
|
|
|
|
<div v-show="expandedMenus[item.id]">
|
|
<template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
|
|
<router-link
|
|
v-if="subItem.to"
|
|
:to="subItem.to"
|
|
class="block px-4 py-2 pl-12 hover:bg-gray-100"
|
|
>
|
|
{{ subItem.text }}
|
|
</router-link>
|
|
<button
|
|
v-else
|
|
@click="subItem.onClick"
|
|
class="w-full text-left px-4 py-2 pl-12 hover:bg-gray-100"
|
|
>
|
|
{{ subItem.text }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Simple menu item -->
|
|
<router-link
|
|
v-else
|
|
:to="item.to"
|
|
class="block px-4 py-2 hover:bg-gray-100"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<component :is="item.icon" class="w-5 h-5 mr-3" />
|
|
<span>{{ item.text }}</span>
|
|
</div>
|
|
<span
|
|
v-if="item.badge"
|
|
class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"
|
|
>
|
|
{{ item.badge }}
|
|
</span>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import {
|
|
BookOpenIcon,
|
|
PlusIcon,
|
|
ArrowDownTrayIcon,
|
|
GlobeAltIcon,
|
|
ArrowsRightLeftIcon,
|
|
CalendarIcon,
|
|
ClockIcon,
|
|
Cog6ToothIcon,
|
|
ComputerDesktopIcon,
|
|
ChevronDownIcon,
|
|
ChevronUpIcon
|
|
} from '@heroicons/vue/24/outline';
|
|
|
|
const props = defineProps({
|
|
isOpen: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['close', 'add-manga-click']);
|
|
|
|
const expandedMenus = ref({
|
|
mangas: true,
|
|
settings: false,
|
|
system: false
|
|
});
|
|
|
|
const toggleMenu = (menuId) => {
|
|
expandedMenus.value[menuId] = !expandedMenus.value[menuId];
|
|
};
|
|
|
|
const menuItems = [
|
|
{
|
|
icon: BookOpenIcon,
|
|
text: 'Mangas',
|
|
id: 'mangas',
|
|
subItems: [
|
|
{ icon: PlusIcon, text: 'Ajouter un nouveau', onClick: () => emit('add-manga-click') },
|
|
{ icon: ArrowDownTrayIcon, text: 'Import bibliothèque', to: '/import' },
|
|
{ icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' },
|
|
]
|
|
},
|
|
{
|
|
icon: ArrowsRightLeftIcon,
|
|
text: 'Convertir CBR en CBZ',
|
|
to: '/convert'
|
|
},
|
|
{
|
|
icon: CalendarIcon,
|
|
text: 'Calendrier',
|
|
to: '/calendar'
|
|
},
|
|
{
|
|
icon: ClockIcon,
|
|
text: 'Activité',
|
|
to: '/activity',
|
|
badge: '3'
|
|
},
|
|
{
|
|
icon: Cog6ToothIcon,
|
|
text: 'Paramètres',
|
|
id: 'settings',
|
|
subItems: [
|
|
{ text: 'Général', to: '/settings/general' },
|
|
{ text: 'Dossiers', to: '/settings/folders' },
|
|
{ text: 'Scrappers', to: '/settings/scrappers' },
|
|
{ text: 'UI', to: '/settings/ui' }
|
|
]
|
|
},
|
|
{
|
|
icon: ComputerDesktopIcon,
|
|
text: 'Système',
|
|
id: 'system',
|
|
subItems: [
|
|
{ text: 'Status', to: '/system/status' },
|
|
{ text: 'Backup', to: '/system/backup' },
|
|
{ text: 'Logs', to: '/system/logs' },
|
|
{ text: 'Updates', to: '/system/updates' }
|
|
]
|
|
},
|
|
];
|
|
</script> |