Flux_bot/pulse-crm-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Leads submenu with Kontakte and Firmen as children

Browse Source
This commit is contained in:
FluxKit
2026-02-25 13:19:41 +00:00
parent 2b059e1bfb
commit 954a1f01d6
1 changed files with 93 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/layouts/AppLayout.vue
View File

@@ -8,12 +8,19 @@ const route = useRoute()
const auth = useAuthStore()
const sidebarOpen = ref(false)
const isMobile = ref(false)
const leadsOpen = ref(true) // Leads submenu open by default
const baseNavItems = [
{ name: 'Inbox', path: '/inbox', icon: 'inbox' },
{ name: 'Dashboard', path: '/', icon: 'chart-pie' },
{
name: 'Leads',
icon: 'leads',
children: [
{ name: 'Kontakte', path: '/contacts', icon: 'users' },
{ name: 'Firmen', path: '/companies', icon: 'building-office' },
]
},
{ name: 'Pipeline', path: '/pipeline', icon: 'funnel' },
{ name: 'Aktivitäten', path: '/activities', icon: 'clipboard-list' },
]
@@ -39,6 +46,10 @@ function checkMobile() {
onMounted(() => {
checkMobile()
window.addEventListener('resize', checkMobile)
// Auto-expand leads if on contacts or companies page
if (route.path.startsWith('/contacts') || route.path.startsWith('/companies')) {
leadsOpen.value = true
}
})
onUnmounted(() => {
@@ -49,6 +60,10 @@ function toggleSidebar() {
sidebarOpen.value = !sidebarOpen.value
}
function toggleLeads() {
leadsOpen.value = !leadsOpen.value
}
function closeSidebarOnMobile() {
if (isMobile.value) {
sidebarOpen.value = false
@@ -64,6 +79,10 @@ function isActive(path) {
if (path === '/') return route.path === '/'
return route.path.startsWith(path)
}
function isLeadsActive() {
return route.path.startsWith('/contacts') || route.path.startsWith('/companies')
}
</script>
<template>
@@ -131,9 +150,10 @@ function isActive(path) {
<!-- Navigation -->
<nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
<template v-for="item in navItems" :key="item.path || item.name">
<!-- Regular nav item -->
<RouterLink
v-for="item in navItems"
:key="item.path"
v-if="!item.children"
:to="item.path"
:class="['sidebar-link', isActive(item.path) && 'active']"
@click="closeSidebarOnMobile"
@@ -146,12 +166,6 @@ function isActive(path) {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
<svg v-if="item.icon === 'users'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<svg v-if="item.icon === 'building-office'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
<svg v-if="item.icon === 'funnel'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
@@ -163,6 +177,51 @@ function isActive(path) {
</svg>
<span>{{ item.name }}</span>
</RouterLink>
<!-- Leads submenu -->
<div v-else class="space-y-1">
<button
@click="toggleLeads"
:class="['sidebar-link w-full justify-between', isLeadsActive() && 'active']"
>
<div class="flex items-center gap-3">
<svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>{{ item.name }}</span>
</div>
<svg
class="w-4 h-4 transition-transform duration-200"
:class="{ 'rotate-180': leadsOpen }"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- Submenu items -->
<div
v-show="leadsOpen"
class="pl-4 space-y-1"
>
<RouterLink
v-for="child in item.children"
:key="child.path"
:to="child.path"
:class="['sidebar-link', isActive(child.path) && 'active']"
@click="closeSidebarOnMobile"
>
<svg v-if="child.icon === 'users'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<svg v-if="child.icon === 'building-office'" class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
<span>{{ child.name }}</span>
</RouterLink>
</div>
</div>
</template>
</nav>
<!-- User -->