369 lines
9.9 KiB
Vue
369 lines
9.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
defineProps({
|
|
title: { type: String, default: 'Nexus' },
|
|
})
|
|
|
|
const sidebarOpen = ref(false)
|
|
const currentPath = typeof window !== 'undefined' ? window.location.pathname : '/'
|
|
|
|
const mainNav = [
|
|
{ label: 'Startseite', icon: 'house', href: '/' },
|
|
{ label: 'Finanzen', icon: 'money-bill-wave', href: '/finanzen' },
|
|
{ label: 'Dokumente', icon: 'folder', href: '/dokumente' },
|
|
{ label: 'Verwaltung', icon: 'gear', href: '/verwaltung' },
|
|
{ label: 'Kommunikation', icon: 'envelope', href: '/kommunikation' },
|
|
{ label: 'Externe Anwendungen', icon: 'arrow-up-right-from-square', href: '/extern' },
|
|
]
|
|
|
|
const secondaryNav = [
|
|
{ label: 'Favoriten', icon: 'star', href: '/favoriten' },
|
|
{ label: 'Hilfe & Support', icon: 'circle-question', href: '/hilfe' },
|
|
{ label: 'Einstellungen', icon: 'sliders', href: '/einstellungen' },
|
|
]
|
|
|
|
function isActive(href) {
|
|
if (href === '/') return currentPath === '/'
|
|
return currentPath.startsWith(href)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-layout">
|
|
<div class="sidebar-overlay" :class="{ active: sidebarOpen }" @click="sidebarOpen = false"></div>
|
|
|
|
<aside class="sidebar" :class="{ open: sidebarOpen }">
|
|
<!-- BdP NEXUS Logo -->
|
|
<div class="logo">
|
|
<!-- BdP Badge: gelber Ring · blauer Kreis · weiße Lilie -->
|
|
<svg viewBox="0 0 100 100" width="42" height="42" class="logo-badge">
|
|
<circle cx="50" cy="50" r="49" fill="#f5c400"/>
|
|
<circle cx="50" cy="50" r="38" fill="#1a4799"/>
|
|
<!-- Lilie: Mittelblatt -->
|
|
<path d="M50,44 C47,36 44,24 47,16 C48.5,12 51.5,12 53,16 C56,24 53,36 50,44Z" fill="white"/>
|
|
<!-- Lilie: linkes Blatt -->
|
|
<path d="M49,44 C45,41 38,37 30,32 C25,28 25,22 29,20 C33,18 38,23 43,32 C46,37 48,41 49,44Z" fill="white"/>
|
|
<!-- Lilie: rechtes Blatt -->
|
|
<path d="M51,44 C55,41 62,37 70,32 C75,28 75,22 71,20 C67,18 62,23 57,32 C54,37 52,41 51,44Z" fill="white"/>
|
|
<!-- Lilie: Ring -->
|
|
<ellipse cx="50" cy="47" rx="8.5" ry="3.5" fill="white"/>
|
|
<!-- Lilie: Stiel -->
|
|
<rect x="48" y="50" width="4" height="13" rx="1.5" fill="white"/>
|
|
<!-- Lilie: Querbalken -->
|
|
<rect x="41" y="62" width="18" height="4" rx="2" fill="white"/>
|
|
</svg>
|
|
<div class="logo-text-group">
|
|
<span class="logo-title">NEXUS</span>
|
|
<span class="logo-sub">BdP Landesverband</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="nav">
|
|
<ul class="nav-list">
|
|
<li v-for="item in mainNav" :key="item.href">
|
|
<a :href="item.href" class="nav-item" :class="{ active: isActive(item.href) }"
|
|
@click="sidebarOpen = false">
|
|
<span class="nav-icon"><font-awesome-icon :icon="item.icon" /></span>
|
|
<span class="nav-label">{{ item.label }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="nav-divider"></div>
|
|
|
|
<ul class="nav-list">
|
|
<li v-for="item in secondaryNav" :key="item.href">
|
|
<a :href="item.href" class="nav-item" :class="{ active: isActive(item.href) }"
|
|
@click="sidebarOpen = false">
|
|
<span class="nav-icon"><font-awesome-icon :icon="item.icon" /></span>
|
|
<span class="nav-label">{{ item.label }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<a href="/logout" class="logout-btn">
|
|
<font-awesome-icon icon="arrow-right-from-bracket" />
|
|
<span>Abmelden</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="main">
|
|
<header class="header">
|
|
<button class="hamburger-btn" @click="sidebarOpen = !sidebarOpen" aria-label="Menü öffnen">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<div class="header-search">
|
|
<span class="search-icon"><font-awesome-icon icon="magnifying-glass" /></span>
|
|
<input type="text" placeholder="Suche nach Funktionen, Dokumenten..." class="search-input" />
|
|
</div>
|
|
<div class="header-right">
|
|
<button class="icon-btn" aria-label="Benachrichtigungen">
|
|
<font-awesome-icon icon="bell" />
|
|
</button>
|
|
<div class="user-avatar">
|
|
<font-awesome-icon icon="user" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
.app-layout {
|
|
display: flex;
|
|
height: 100vh;
|
|
background: #f0f2f5;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 2px 0 8px rgba(0,0,0,0.06);
|
|
z-index: 100;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 22px 20px 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.logo-badge { flex-shrink: 0; }
|
|
|
|
.logo-text-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.logo-title {
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
color: #1d4899;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.logo-sub {
|
|
font-size: 0.62rem;
|
|
color: #9ca3af;
|
|
letter-spacing: 0.02em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.nav-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.nav-list li { margin-bottom: 1px; }
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding: 9px 13px;
|
|
border-radius: 8px;
|
|
color: #6b7280;
|
|
text-decoration: none;
|
|
font-size: 0.86rem;
|
|
font-weight: 500;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.nav-item:hover { background: #f3f4f6; color: #111827; }
|
|
.nav-item.active { background: #1d4899; color: #fff; }
|
|
|
|
.nav-icon { width: 17px; text-align: center; flex-shrink: 0; font-size: 0.88rem; }
|
|
|
|
.nav-divider { height: 1px; background: #f0f0f0; margin: 10px 10px; }
|
|
|
|
.sidebar-footer {
|
|
padding: 14px 20px;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.logout-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: #9ca3af;
|
|
text-decoration: none;
|
|
font-size: 0.86rem;
|
|
font-weight: 500;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.logout-btn:hover { color: #ef4444; }
|
|
|
|
/* ── Main ── */
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ── Header ── */
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
height: 64px;
|
|
padding: 0 24px;
|
|
background: #fff;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
flex-shrink: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.hamburger-btn {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.hamburger-btn span { display: block; width: 20px; height: 2px; background: #374151; border-radius: 2px; }
|
|
.hamburger-btn:hover { background: #f3f4f6; }
|
|
|
|
.header-search {
|
|
flex: 1;
|
|
position: relative;
|
|
max-width: 480px;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #9ca3af;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 9px 14px 9px 36px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
color: #374151;
|
|
background: #f9fafb;
|
|
outline: none;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
}
|
|
|
|
.search-input:focus { border-color: #1d4899; background: #fff; }
|
|
.search-input::placeholder { color: #9ca3af; }
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border: none;
|
|
background: #f3f4f6;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
color: #6b7280;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.icon-btn:hover { background: #e5e7eb; color: #374151; }
|
|
|
|
.user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: #1d4899;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ── Content ── */
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 28px 28px;
|
|
background: #f5f6fa;
|
|
}
|
|
|
|
/* ── Mobile overlay ── */
|
|
.sidebar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.4);
|
|
z-index: 99;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0; left: 0; bottom: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
.sidebar.open { transform: translateX(0); }
|
|
.sidebar-overlay.active { display: block; }
|
|
.hamburger-btn { display: flex; }
|
|
.content { padding: 20px 16px; }
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.header { padding: 0 12px; gap: 10px; }
|
|
.header-search { max-width: none; }
|
|
.content { padding: 16px 12px; }
|
|
}
|
|
</style>
|