th.guenther/nexus
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

design installed

Browse Source
This commit is contained in:
th.guenther
2026-07-02 19:57:25 +02:00
parent 5c667fd1cf
commit 872972ea48
21 changed files with 1230 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/app.js
+18 -2
View File
@@ -8,9 +8,25 @@ import 'vue3-toastify/dist/index.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUser, faTrash, faCheck, faGear, faHouse } from '@fortawesome/free-solid-svg-icons'
import {
faUser, faTrash, faCheck, faGear, faHouse,
faMoneyBillWave, faFolder, faEnvelope, faArrowUpRightFromSquare,
faStar, faClock, faCircleQuestion, faSliders,
faBell, faMagnifyingGlass,
faGraduationCap, faFileInvoice, faHeart, faCertificate,
faChevronRight, faArrowRightFromBracket, faCube,
faTriangleExclamation,
} from '@fortawesome/free-solid-svg-icons'
library.add(faUser, faTrash, faCheck, faGear, faHouse)
library.add(
faUser, faTrash, faCheck, faGear, faHouse,
faMoneyBillWave, faFolder, faEnvelope, faArrowUpRightFromSquare,
faStar, faClock, faCircleQuestion, faSliders,
faBell, faMagnifyingGlass,
faGraduationCap, faFileInvoice, faHeart, faCertificate,
faChevronRight, faArrowRightFromBracket, faCube,
faTriangleExclamation,
)
InertiaProgress.init()
resources/js/layouts/AppLayout.vue
+286 -211
View File
@@ -1,129 +1,249 @@
<script setup>
import { ref } from 'vue'
const props = defineProps({
defineProps({
title: { type: String, default: 'Nexus' },
})
const sidebarOpen = ref(false)
const currentPath = typeof window !== 'undefined' ? window.location.pathname : '/'
function toggleSidebar() {
sidebarOpen.value = !sidebarOpen.value
}
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' },
]
function closeSidebar() {
sidebarOpen.value = false
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="closeSidebar"></div>
<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">
<div class="header">
<button class="hamburger-btn" @click="toggleSidebar" aria-label="Menü öffnen">
<span></span>
<span></span>
<span></span>
<header class="header">
<button class="hamburger-btn" @click="sidebarOpen = !sidebarOpen" aria-label="Menü öffnen">
<span></span><span></span><span></span>
</button>
<div class="left-side">
<h1>{{ props.title }}</h1>
<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-actions">
<a href="/logout" class="header-link-logout" title="Abmelden">Abmelden</a>
</div>
</div>
<div class="flexbox">
<div class="sidebar" :class="{ 'sidebar-open': sidebarOpen }">
<div class="logo">
<span class="logo-text">Nexus</span>
</div>
<nav class="nav">
<ul class="nav-links">
<li><a href="/" @click="closeSidebar">Dashboard</a></li>
</ul>
</nav>
</div>
<div class="content-area">
<div class="content">
<slot />
<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>
</div>
</header>
<footer class="footer">
<div class="footer-inner">
<span>Nexus</span>
<span>&copy; {{ new Date().getFullYear() }}</span>
</div>
</footer>
<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: sans-serif;
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;
margin: 20px;
box-shadow: 20px 20px 15px rgba(0, 0, 0, 0.1);
border-radius: 0 10px 0 0;
min-width: 0;
}
/* ── Header ── */
.header {
display: flex;
align-items: center;
height: 80px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 0;
position: relative;
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;
flex-shrink: 0;
}
.left-side {
flex: 1;
padding: 0 20px;
}
.left-side h1 {
margin: 0;
font-size: 1.4rem;
}
.header-actions {
display: flex;
align-items: center;
padding: 0 20px;
flex-shrink: 0;
}
.header-link-logout {
color: #000;
font-weight: bold;
text-decoration: none;
padding: 10px 20px;
}
.header-link-logout:hover {
background-color: #ff0000;
color: #fff;
}
.hamburger-btn {
@@ -132,162 +252,117 @@ function closeSidebar() {
justify-content: center;
align-items: center;
gap: 5px;
width: 50px;
height: 80px;
width: 36px;
height: 36px;
border: none;
background: transparent;
cursor: pointer;
flex-shrink: 0;
padding: 0 12px;
border-radius: 6px;
}
.hamburger-btn span {
display: block;
width: 24px;
height: 3px;
background-color: #333;
border-radius: 2px;
}
.hamburger-btn span { display: block; width: 20px; height: 2px; background: #374151; border-radius: 2px; }
.hamburger-btn:hover { background: #f3f4f6; }
.flexbox {
display: flex;
.header-search {
flex: 1;
background-color: #fafafb;
overflow: hidden;
gap: 1px;
position: relative;
max-width: 480px;
}
.sidebar {
flex-basis: 275px;
flex-shrink: 0;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
.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;
flex-direction: column;
background-color: #ffffff;
overflow-y: auto;
transition: transform 0.3s ease;
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);
background: rgba(0,0,0,0.4);
z-index: 99;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
height: 120px;
}
.logo-text {
font-size: 2rem;
font-weight: bold;
color: #1d4899;
}
.nav {
flex: 1;
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
border-bottom: 1px solid #ddd;
}
.nav-links li a {
color: #b6b6b6;
background-color: #fff;
padding: 16px 25px;
display: block;
text-decoration: none;
font-weight: bold;
}
.nav-links li a:hover {
background-color: #1d4899;
color: #fff;
}
.content-area {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
.content {
padding: 30px 20px;
flex: 1;
}
.footer {
background: #666666;
border-top: 1px solid #ddd;
color: #fff;
padding: 10px 15px;
font-size: 11pt;
font-weight: bold;
flex-shrink: 0;
}
.footer-inner {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
justify-content: space-between;
align-items: center;
}
@media (max-width: 1023px) {
.main {
margin: 0;
border-radius: 0;
box-shadow: none;
}
.hamburger-btn {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 100;
top: 0; left: 0; bottom: 0;
transform: translateX(-100%);
width: 260px;
flex-basis: 260px;
}
.sidebar.sidebar-open {
transform: translateX(0);
}
.sidebar-overlay.active {
display: block;
}
.sidebar.open { transform: translateX(0); }
.sidebar-overlay.active { display: block; }
.hamburger-btn { display: flex; }
.content { padding: 20px 16px; }
}
@media (max-width: 639px) {
.header {
height: 60px;
}
.hamburger-btn {
height: 60px;
}
.content {
padding: 15px 10px;
}
.header { padding: 0 12px; gap: 10px; }
.header-search { max-width: none; }
.content { padding: 16px 12px; }
}
</style>