refactor: Reorganize sidebar menu structure
- Core features at top: Dashboard, Aufträge, Mitarbeiter, Verfügbarkeit, Stundenzettel, Objekte - Premium modules in collapsible 'Module' section - Settings and Help at bottom - Clean visual separation with dividers
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
@@ -15,44 +15,61 @@ defineEmits<{
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
const authStore = useAuthStore()
|
||||
const modulesExpanded = ref(true)
|
||||
|
||||
const navigation = computed(() => {
|
||||
// Core navigation - always visible
|
||||
const coreNavigation = computed(() => {
|
||||
const items = [
|
||||
{ name: t('nav.dashboard'), href: '/', icon: '📊' },
|
||||
{ name: t('nav.orders'), href: '/orders', icon: '📋' },
|
||||
]
|
||||
|
||||
if (authStore.canManageUsers) {
|
||||
items.push(
|
||||
{ name: t('nav.users'), href: '/users', icon: '👥' },
|
||||
{ name: t('nav.shifts'), href: '/shifts', icon: '📅' }
|
||||
)
|
||||
items.push({ name: t('nav.users'), href: '/users', icon: '👥' })
|
||||
}
|
||||
|
||||
items.push(
|
||||
{ name: t('nav.availability'), href: '/availability', icon: '🗓️' },
|
||||
{ name: t('nav.timesheets'), href: '/timesheets', icon: '⏱️' },
|
||||
{ name: t('nav.objects'), href: '/objects', icon: '🏢' }
|
||||
)
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
// Premium modules - shown under "Module" section
|
||||
const moduleNavigation = computed(() => {
|
||||
const items = [
|
||||
{ name: t('nav.qualifications'), href: '/qualifications', icon: '🎓' },
|
||||
{ name: t('nav.objects'), href: '/objects', icon: '🏢' },
|
||||
{ name: t('nav.shifts'), href: '/shifts', icon: '📅' },
|
||||
{ name: t('nav.patrols'), href: '/patrols', icon: '📍' },
|
||||
{ name: t('nav.incidents'), href: '/incidents', icon: '🚨' },
|
||||
{ name: t('nav.documents'), href: '/documents', icon: '📁' },
|
||||
)
|
||||
{ name: t('nav.vehicles'), href: '/vehicles', icon: '🚗' },
|
||||
]
|
||||
|
||||
if (authStore.canManageUsers) {
|
||||
items.push(
|
||||
{ name: t('nav.vehicles'), href: '/vehicles', icon: '🚗' },
|
||||
{ name: t('nav.customers'), href: '/customers', icon: '🤝' }
|
||||
{ name: t('nav.customers'), href: '/customers', icon: '🤝' },
|
||||
{ name: t('nav.partnerships'), href: '/partnerships', icon: '🔗' }
|
||||
)
|
||||
}
|
||||
|
||||
if (authStore.isChef) {
|
||||
items.push(
|
||||
{ name: t('nav.billing'), href: '/billing', icon: '💰' },
|
||||
{ name: t('nav.modules'), href: '/modules', icon: '⚙️' }
|
||||
)
|
||||
items.push({ name: t('nav.billing'), href: '/billing', icon: '💰' })
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
// Bottom navigation
|
||||
const bottomNavigation = computed(() => {
|
||||
const items = []
|
||||
|
||||
if (authStore.isChef) {
|
||||
items.push({ name: t('nav.modules'), href: '/modules', icon: '⚙️' })
|
||||
}
|
||||
|
||||
items.push(
|
||||
{ name: t('nav.settings'), href: '/settings', icon: '🔧' },
|
||||
{ name: t('nav.help'), href: '/help', icon: '📚' }
|
||||
@@ -65,17 +82,21 @@ function isActive(href: string) {
|
||||
if (href === '/') return route.path === '/'
|
||||
return route.path.startsWith(href)
|
||||
}
|
||||
|
||||
function toggleModules() {
|
||||
modulesExpanded.value = !modulesExpanded.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside
|
||||
:class="[
|
||||
'fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform lg:translate-x-0',
|
||||
'fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform lg:translate-x-0 flex flex-col',
|
||||
open ? 'translate-x-0' : '-translate-x-full'
|
||||
]"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<div class="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
|
||||
<template v-if="authStore.orgLogo">
|
||||
<img
|
||||
:src="authStore.orgLogo"
|
||||
@@ -89,26 +110,87 @@ function isActive(href: string) {
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="mt-6 px-3">
|
||||
<router-link
|
||||
v-for="item in navigation"
|
||||
:key="item.href"
|
||||
:to="item.href"
|
||||
:class="[
|
||||
'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
|
||||
isActive(item.href)
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
|
||||
]"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<span class="text-xl">{{ item.icon }}</span>
|
||||
<span class="font-medium">{{ item.name }}</span>
|
||||
</router-link>
|
||||
<nav class="flex-1 overflow-y-auto py-4 px-3">
|
||||
<!-- Core Navigation -->
|
||||
<div class="mb-4">
|
||||
<router-link
|
||||
v-for="item in coreNavigation"
|
||||
:key="item.href"
|
||||
:to="item.href"
|
||||
:class="[
|
||||
'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
|
||||
isActive(item.href)
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
|
||||
]"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<span class="text-xl">{{ item.icon }}</span>
|
||||
<span class="font-medium">{{ item.name }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Modules Section -->
|
||||
<div class="mb-4">
|
||||
<button
|
||||
@click="toggleModules"
|
||||
class="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider hover:text-gray-700 dark:hover:text-gray-200"
|
||||
>
|
||||
<span>{{ t('nav.modules') }}</span>
|
||||
<svg
|
||||
:class="['w-4 h-4 transition-transform', modulesExpanded ? 'rotate-180' : '']"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div v-show="modulesExpanded" class="mt-1">
|
||||
<router-link
|
||||
v-for="item in moduleNavigation"
|
||||
:key="item.href"
|
||||
:to="item.href"
|
||||
:class="[
|
||||
'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-sm',
|
||||
isActive(item.href)
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
|
||||
]"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<span class="text-lg">{{ item.icon }}</span>
|
||||
<span class="font-medium">{{ item.name }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="border-t border-gray-200 dark:border-gray-700 my-4"></div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div>
|
||||
<router-link
|
||||
v-for="item in bottomNavigation"
|
||||
:key="item.href"
|
||||
:to="item.href"
|
||||
:class="[
|
||||
'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
|
||||
isActive(item.href)
|
||||
? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
|
||||
]"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<span class="text-xl">{{ item.icon }}</span>
|
||||
<span class="font-medium">{{ item.name }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- User info -->
|
||||
<div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
|
||||
<span class="text-primary-600 dark:text-primary-300 font-medium">
|
||||
|
||||
Reference in New Issue
Block a user