design installed
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
# Projektkonventionen
|
||||
|
||||
## Architektur: Actions (Request-Command-Response)
|
||||
|
||||
Jede fachliche Operation wird in eine eigene Action ausgelagert, die aus drei Klassen besteht.
|
||||
Pfad: `app/Domains/{Domain}/Actions/{ActionName}/`
|
||||
|
||||
### Struktur
|
||||
{ActionName}Request.php → Eingabedaten (Konstruktor oder Factory-Methoden) {ActionName}Command.php → Logik, ruft execute(): {ActionName}Response auf {ActionName}Response.php → Rückgabedaten (public Properties)
|
||||
|
||||
|
||||
### Regeln
|
||||
- Der Controller enthält **keine** fachliche Logik – nur Absicherung, Action-Aufruf und HTTP-Response
|
||||
- Commands sind nicht statisch und werden immer instanziiert
|
||||
- Hat ein Request mehrere Varianten, werden **Factory-Methoden** (`forX()`) statt mehrerer Konstruktoren verwendet
|
||||
- Aufrufreihenfolge im Controller: `new Request → new Command(request) → command->execute() → Response verwenden`
|
||||
|
||||
---
|
||||
|
||||
## Controller
|
||||
|
||||
- Alle Controller erben von `App\Scopes\CommonController`
|
||||
- `CommonController` stellt folgende Repositories bereit (keine eigene Instanziierung nötig):
|
||||
- `$this->eventParticipants` → `EventParticipantRepository`
|
||||
- `$this->events` → `EventRepository`
|
||||
- `$this->invoices` → `InvoiceRepository`
|
||||
- `$this->costUnits` → `CostUnitRepository`
|
||||
- `$this->users` → `UserRepository`
|
||||
- `$this->tenant` → aktueller `Tenant`
|
||||
|
||||
- Die Controller besitzen ausschließlich eine __invoke() - Funktion
|
||||
- Für die Speichern-Actions werden separate Controller-Klassen erstellt (z. B. `StoreEventParticipantController`)
|
||||
---
|
||||
|
||||
## Repositories
|
||||
|
||||
- Datenbankzugriffe gehören **immer** ins Repository, nie direkt in Controller oder Actions
|
||||
- Sicherheitschecks (z. B. „gehört diese Teilnahme dem eingeloggten User?") werden als eigene Repository-Methoden gekapselt
|
||||
- Tenant-Filter: `app('tenant')->slug`
|
||||
- Eingeloggter User: `auth()->user()`
|
||||
|
||||
---
|
||||
|
||||
## Models / Ressourcen
|
||||
|
||||
- Models erben von `App\Scopes\InstancedModel` (mit globalem `SiteScope`)
|
||||
- `$model->toResource()->toArray($request)` liefert das aufbereitete Array über die zugehörige Resource-Klasse
|
||||
- Resource-Klassen liegen in `app/Resources/{ModelName}Resource.php`
|
||||
|
||||
---
|
||||
|
||||
## Tenant
|
||||
|
||||
- Der aktuelle Tenant ist per `app('tenant')` verfügbar (gesetzt durch `IdentifyTenant`-Middleware)
|
||||
- Tenant-Slug: `app('tenant')->slug`
|
||||
- Jede tenant-spezifische DB-Abfrage filtert auf `['tenant' => app('tenant')->slug]`
|
||||
|
||||
---
|
||||
|
||||
## Routing
|
||||
|
||||
- API-Routen liegen in `app/Domains/{Domain}/Routes/api.php`
|
||||
- Alle Routen sind in `IdentifyTenant::class`-Middleware gewrappt
|
||||
- Authentifizierte Routen zusätzlich in `['auth']`-Middleware
|
||||
|
||||
---
|
||||
|
||||
## Mails
|
||||
|
||||
- Mails erben von `Illuminate\Mail\Mailable`
|
||||
- Attachments werden über `Attachment::fromData(fn () => $content, $filename)->withMime(...)` angehängt
|
||||
- Werden Daten sowohl in `content()` als auch in `attachments()` benötigt, wird eine **private Hilfsmethode mit Lazy-Caching** verwendet (einmaliges Berechnen, Ergebnis in private Property speichern)
|
||||
- Blade-Templates referenzieren Mail-Attachments per `cid:`-Link: `<a href="cid:{{ $filename }}">...</a>`
|
||||
|
||||
## Actions
|
||||
- Die Actions sind in `app/Domains/{Domain}/Actions/{ActionName}/`-Verzeichnissen organisiert
|
||||
- Jede Action besitzt einen Request, einen Command und einen Response
|
||||
- Der Request besitzt auschließlich einen Konstruktor, der die notwendigen Parameter annimmt
|
||||
- Die Response-Klasse enthält ausschließlich die notwendigen Daten für die Antwort
|
||||
- Die Action-Klasse enthält die Logik für die Verarbeitung der Anfrage und die Generierung der Antwort
|
||||
- Die Logik wird in einer execute() - Funktion innerhalb des Commands impplementiert. Private Funktionen, für ausgelagerte Prozesse sind zulässig, wenn der Code damit lesbarer wird.
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
@@ -1,12 +1,478 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const message = ref('Hallo Welt')
|
||||
const documentTiles = [
|
||||
{
|
||||
label: 'Schulbefreiung erstellen',
|
||||
description: 'Erstellt die notwendigen Schulbefreiungsformulare für Veranstaltungen.',
|
||||
icon: 'graduation-cap',
|
||||
color: '#e74c3c',
|
||||
href: '/schulbefreiung',
|
||||
},
|
||||
{
|
||||
label: 'Rechnung erstellen',
|
||||
description: 'Erstellt eine Rechnung nach BdP-Vorlage.',
|
||||
icon: 'file-invoice',
|
||||
color: '#27ae60',
|
||||
href: '/rechnung',
|
||||
},
|
||||
{
|
||||
label: 'Spendenquittung erstellen',
|
||||
description: 'Erstellt eine Spendenquittung für Einzelspenden.',
|
||||
icon: 'heart',
|
||||
color: '#c0397e',
|
||||
href: '/spendenquittung',
|
||||
},
|
||||
{
|
||||
label: 'Teilnahmebescheinigung erstellen',
|
||||
description: 'Erstellt eine Teilnahmebescheinigung.',
|
||||
icon: 'certificate',
|
||||
color: '#e67e22',
|
||||
href: '/teilnahmebescheinigung',
|
||||
},
|
||||
]
|
||||
|
||||
const externalApps = [
|
||||
{
|
||||
name: 'Mereba',
|
||||
description: 'Mitgliederverwaltung des BdP Landesverbands.',
|
||||
icon: 'arrow-up-right-from-square',
|
||||
color: '#1d4899',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
name: 'EFZ-Check',
|
||||
description: 'Einrichtung und Prüfung des erweiterten Führungszeugnisses.',
|
||||
icon: 'certificate',
|
||||
color: '#27ae60',
|
||||
href: '#',
|
||||
},
|
||||
]
|
||||
|
||||
const dummyTile = {
|
||||
label: 'Dummy',
|
||||
description: 'Platzhalter-Kachel für zukünftige Inhalte.',
|
||||
icon: 'cube',
|
||||
color: '#1d4899',
|
||||
href: '/dummy',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Dashboard">
|
||||
<h2>{{ message }}</h2>
|
||||
<AppLayout title="Startseite">
|
||||
<div class="dashboard">
|
||||
|
||||
<!-- ── Hero Banner ── -->
|
||||
<div class="hero">
|
||||
<svg class="hero-svg" viewBox="0 0 1200 185"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="hero-sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#9ccae0"/>
|
||||
<stop offset="100%" stop-color="#d8eef8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Himmel -->
|
||||
<rect width="1200" height="185" fill="url(#hero-sky)"/>
|
||||
|
||||
<!--
|
||||
Jeder Berg ist ein Polygon mit vielen Zwischenpunkten –
|
||||
leicht unregelmäßige Abstände erzeugen organische Hänge.
|
||||
Die Schneekappen folgen denselben Punkten entlang der Silhouette.
|
||||
-->
|
||||
|
||||
<!-- Berg 1: hinten, hellster -->
|
||||
<polygon fill="#a8c8dc" points="
|
||||
150,185
|
||||
222,160 298,126 362,98 416,70 458,50 492,36 516,28 524,32
|
||||
542,27 558,34 594,50 638,72 692,102 750,136 808,164 860,185"/>
|
||||
<!-- Schnee 1: folgt Hangpunkten, Abschluss bei y≈68 -->
|
||||
<polygon fill="white" points="
|
||||
421,68
|
||||
458,50 492,36 516,28 524,32 542,27 558,34 594,50
|
||||
624,68"/>
|
||||
|
||||
<!-- Berg 2: Mitte -->
|
||||
<polygon fill="#6090b8" points="
|
||||
340,185
|
||||
414,158 490,126 558,94 612,64 648,42 668,26 680,18
|
||||
690,16 702,20 722,34 758,56 802,86 858,118 915,150 968,170 1020,185"/>
|
||||
<!-- Schnee 2 -->
|
||||
<polygon fill="white" points="
|
||||
616,60
|
||||
648,42 668,26 680,18 690,16 702,20 722,34 758,56
|
||||
762,60"/>
|
||||
|
||||
<!-- Berg 3: vorne, dunkelster -->
|
||||
<polygon fill="#3868a2" points="
|
||||
560,185
|
||||
638,153 708,118 766,86 816,56 852,32 870,16 880,6
|
||||
892,12 920,34 958,64 1002,98 1058,134 1115,163 1162,179 1200,185"/>
|
||||
<!-- Schnee 3 -->
|
||||
<polygon fill="white" points="
|
||||
818,53
|
||||
852,32 870,16 880,6 892,12 920,34 958,64
|
||||
962,64 942,53"/>
|
||||
|
||||
<!-- Waldstreifen am Fuß (rechts) -->
|
||||
<rect x="655" y="170" width="545" height="15" fill="#1d3c22"/>
|
||||
|
||||
<!-- Tannen: Wipfel + Schürze, leicht versetzt in Höhe -->
|
||||
<g fill="#182e1a">
|
||||
<polygon points="672,167 663,182 681,182"/>
|
||||
<polygon points="672,175 661,185 683,185"/>
|
||||
|
||||
<polygon points="697,163 687,179 707,179"/>
|
||||
<polygon points="697,171 685,185 709,185"/>
|
||||
|
||||
<polygon points="723,166 713,182 733,182"/>
|
||||
<polygon points="723,174 711,185 735,185"/>
|
||||
|
||||
<polygon points="749,161 738,178 760,178"/>
|
||||
<polygon points="749,170 737,185 761,185"/>
|
||||
|
||||
<polygon points="776,164 765,181 787,181"/>
|
||||
<polygon points="776,172 763,185 789,185"/>
|
||||
|
||||
<polygon points="803,160 791,178 815,178"/>
|
||||
<polygon points="803,169 789,185 817,185"/>
|
||||
|
||||
<polygon points="830,163 818,180 842,180"/>
|
||||
<polygon points="830,171 816,185 844,185"/>
|
||||
|
||||
<polygon points="858,161 845,179 871,179"/>
|
||||
<polygon points="858,169 843,185 873,185"/>
|
||||
|
||||
<polygon points="886,164 873,181 899,181"/>
|
||||
<polygon points="886,172 871,185 901,185"/>
|
||||
|
||||
<polygon points="914,161 900,179 928,179"/>
|
||||
<polygon points="914,170 898,185 930,185"/>
|
||||
|
||||
<polygon points="942,164 928,181 956,181"/>
|
||||
<polygon points="942,172 926,185 958,185"/>
|
||||
|
||||
<polygon points="970,162 956,179 984,179"/>
|
||||
<polygon points="970,171 954,185 986,185"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Text overlay -->
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title">Willkommen im NEXUS!</h1>
|
||||
<p class="hero-sub">Deine zentrale Plattform für Dokumente, Tools und Anwendungen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Dokumente erstellen ── -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Dokumente erstellen</h2>
|
||||
<a href="#" class="section-link">
|
||||
Alle anzeigen <font-awesome-icon icon="chevron-right" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="doc-grid">
|
||||
<a v-for="tile in documentTiles" :key="tile.href" :href="tile.href" class="doc-tile">
|
||||
<div class="doc-tile-top">
|
||||
<div class="doc-icon-wrap" :style="{ background: tile.color + '18', color: tile.color }">
|
||||
<font-awesome-icon :icon="tile.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-tile-body">
|
||||
<p class="doc-title">{{ tile.label }}</p>
|
||||
<p class="doc-desc">{{ tile.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Weitere Anwendungen ── -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Weitere Anwendungen</h2>
|
||||
<a href="#" class="section-link">
|
||||
Alle anzeigen <font-awesome-icon icon="chevron-right" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="app-list">
|
||||
<div v-for="app in externalApps" :key="app.name" class="app-card">
|
||||
<div class="app-icon" :style="{ background: app.color + '18', color: app.color }">
|
||||
<font-awesome-icon :icon="app.icon" />
|
||||
</div>
|
||||
<div class="app-info">
|
||||
<p class="app-name">{{ app.name }}</p>
|
||||
<p class="app-desc">{{ app.description }}</p>
|
||||
</div>
|
||||
<a :href="app.href" target="_blank" rel="noopener" class="app-open-btn">
|
||||
<span class="status-dot"></span>
|
||||
Offen
|
||||
<font-awesome-icon icon="arrow-up-right-from-square" class="open-icon" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Dummy ── -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Weitere Module</h2>
|
||||
</div>
|
||||
|
||||
<div class="doc-grid">
|
||||
<a :href="dummyTile.href" class="doc-tile">
|
||||
<div class="doc-tile-top">
|
||||
<div class="doc-icon-wrap" :style="{ background: dummyTile.color + '18', color: dummyTile.color }">
|
||||
<font-awesome-icon :icon="dummyTile.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-tile-body">
|
||||
<p class="doc-title">{{ dummyTile.label }}</p>
|
||||
<p class="doc-desc">{{ dummyTile.description }}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
/* ── Hero Banner ── */
|
||||
.hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
|
||||
}
|
||||
|
||||
.hero-svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
color: #0f2d5e;
|
||||
text-shadow: 0 1px 3px rgba(255,255,255,0.6);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #1c3a6b;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 2px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/* ── Section ── */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.section-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.83rem;
|
||||
font-weight: 500;
|
||||
color: #1d4899;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-link:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Document tiles (white cards) ── */
|
||||
.doc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.doc-tile {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: box-shadow 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.doc-tile:hover {
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.11);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.doc-tile-top {
|
||||
padding: 18px 16px 12px;
|
||||
}
|
||||
|
||||
.doc-icon-wrap {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.doc-tile-body {
|
||||
padding: 6px 16px 18px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
margin: 0 0 5px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.doc-desc {
|
||||
margin: 0;
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── External app cards ── */
|
||||
.app-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.09);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
margin: 0 0 3px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
margin: 0;
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-open-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 16px;
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.app-open-btn:hover { background: #bbf7d0; }
|
||||
|
||||
.status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.open-icon { font-size: 0.72rem; }
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 768px) {
|
||||
.hero { height: 160px; }
|
||||
.hero-title { font-size: 1.4rem; }
|
||||
.doc-grid { grid-template-columns: 1fr 1fr; }
|
||||
.app-card { flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero { height: 140px; }
|
||||
.hero-text { left: 20px; }
|
||||
.hero-title { font-size: 1.2rem; }
|
||||
.doc-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Dummy\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class DummyController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Dummy/Dummy', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Dummy\Controllers\DummyController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/dummy', DummyController::class)->name('dummy');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Dummy">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #1d4899;">
|
||||
<font-awesome-icon icon="cube" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Dummy</h1>
|
||||
<p class="placeholder-text">Platzhalter-Seite für zukünftige Inhalte.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Rechnung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class RechnungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Rechnung/Rechnung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Rechnung\Controllers\RechnungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/rechnung', RechnungController::class)->name('rechnung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Rechnung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #27ae60;">
|
||||
<font-awesome-icon icon="file-invoice" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Rechnung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Schulbefreiung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class SchulbefreiungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Schulbefreiung/Schulbefreiung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Schulbefreiung\Controllers\SchulbefreiungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/schulbefreiung', SchulbefreiungController::class)->name('schulbefreiung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Schulbefreiung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #e74c3c;">
|
||||
<font-awesome-icon icon="graduation-cap" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Schulbefreiung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Spendenquittung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class SpendenquittungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Spendenquittung/Spendenquittung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Spendenquittung\Controllers\SpendenquittungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/spendenquittung', SpendenquittungController::class)->name('spendenquittung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Spendenquittung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #c0397e;">
|
||||
<font-awesome-icon icon="heart" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Spendenquittung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Domains\Teilnahmebescheinigung\Controllers;
|
||||
|
||||
use App\Providers\InertiaProvider;
|
||||
use Inertia\Response;
|
||||
|
||||
class TeilnahmebescheinigungController
|
||||
{
|
||||
public function __invoke(): Response
|
||||
{
|
||||
return (new InertiaProvider('Teilnahmebescheinigung/Teilnahmebescheinigung', []))->render();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Domains\Teilnahmebescheinigung\Controllers\TeilnahmebescheinigungController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/teilnahmebescheinigung', TeilnahmebescheinigungController::class)->name('teilnahmebescheinigung');
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/layouts/AppLayout.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Teilnahmebescheinigung erstellen">
|
||||
<div class="placeholder">
|
||||
<div class="placeholder-icon-wrap" style="background: #e67e22;">
|
||||
<font-awesome-icon icon="certificate" class="placeholder-icon" />
|
||||
</div>
|
||||
<h1 class="placeholder-title">Teilnahmebescheinigung erstellen</h1>
|
||||
<p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-icon-wrap {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
+18
-2
@@ -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()
|
||||
|
||||
|
||||
+285
-210
@@ -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>
|
||||
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<button class="hamburger-btn" @click="toggleSidebar" aria-label="Menü öffnen">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<div class="left-side">
|
||||
<h1>{{ props.title }}</h1>
|
||||
</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 }">
|
||||
<aside class="sidebar" :class="{ open: sidebarOpen }">
|
||||
<!-- BdP NEXUS Logo -->
|
||||
<div class="logo">
|
||||
<span class="logo-text">Nexus</span>
|
||||
<!-- 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-links">
|
||||
<li><a href="/" @click="closeSidebar">Dashboard</a></li>
|
||||
<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>
|
||||
|
||||
<div class="content-area">
|
||||
<div class="content">
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
<span>Nexus</span>
|
||||
<span>© {{ new Date().getFullYear() }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</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>
|
||||
|
||||
@@ -3,3 +3,8 @@
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
require_once __DIR__.'/../app/Domains/Dashboard/Routes/web.php';
|
||||
require_once __DIR__.'/../app/Domains/Schulbefreiung/Routes/web.php';
|
||||
require_once __DIR__.'/../app/Domains/Rechnung/Routes/web.php';
|
||||
require_once __DIR__.'/../app/Domains/Spendenquittung/Routes/web.php';
|
||||
require_once __DIR__.'/../app/Domains/Teilnahmebescheinigung/Routes/web.php';
|
||||
require_once __DIR__.'/../app/Domains/Dummy/Routes/web.php';
|
||||
|
||||
Reference in New Issue
Block a user