laravel running

resources/css/app.css

@@ -0,0 +1,9 @@
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+}

resources/js/app.js

@@ -0,0 +1,56 @@
+import '../css/app.css'
+import './bootstrap.js'
+import { createApp, h } from 'vue'
+import { createInertiaApp } from '@inertiajs/vue3'
+import { InertiaProgress } from '@inertiajs/progress'
+import Vue3Toastify, { toast } from 'vue3-toastify'
+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'
+
+library.add(faUser, faTrash, faCheck, faGear, faHouse)
+
+InertiaProgress.init()
+
+createInertiaApp({
+    resolve: name => {
+        const pages = import.meta.glob('@domains/**/*.vue')
+
+        const key = Object.keys(pages).find(k =>
+            k.endsWith(`/${name}.vue`) || k.endsWith(`/${name}/index.vue`)
+        )
+
+        if (!key) throw new Error(`Page not found: ${name}`)
+
+        return pages[key]()
+    },
+
+    setup({ el, App, props, plugin }) {
+        const vueApp = createApp({ render: () => h(App, props) })
+
+        vueApp.use(plugin)
+        vueApp.component('font-awesome-icon', FontAwesomeIcon)
+
+        vueApp.use(Vue3Toastify, {
+            autoClose: 10000,
+            position: 'bottom-right',
+            pauseOnHover: true,
+            hideProgressBar: false,
+            toastDefaults: {
+                success: {
+                    style: { background: '#4caf50', color: '#fff' },
+                    progressStyle: { background: '#2e7d32', height: '4px' },
+                },
+                error: {
+                    style: { background: '#f44336', color: '#fff' },
+                    progressStyle: { background: '#c62828', height: '4px' },
+                },
+            },
+        })
+
+        vueApp.config.globalProperties.$toast = toast
+        vueApp.mount(el)
+    },
+})

resources/js/bootstrap.js

@@ -0,0 +1,4 @@
+import axios from 'axios'
+window.axios = axios
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

resources/js/layouts/AppLayout.vue

@@ -0,0 +1,293 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+    title: { type: String, default: 'Nexus' },
+})
+
+const sidebarOpen = ref(false)
+
+function toggleSidebar() {
+    sidebarOpen.value = !sidebarOpen.value
+}
+
+function closeSidebar() {
+    sidebarOpen.value = false
+}
+</script>
+
+<template>
+    <div class="app-layout">
+        <div class="sidebar-overlay" :class="{ active: sidebarOpen }" @click="closeSidebar"></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 }">
+                    <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>
+                </div>
+            </div>
+
+            <footer class="footer">
+                <div class="footer-inner">
+                    <span>Nexus</span>
+                    <span>&copy; {{ new Date().getFullYear() }}</span>
+                </div>
+            </footer>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.app-layout {
+    display: flex;
+    height: 100vh;
+    background: #f0f2f5;
+    font-family: sans-serif;
+    overflow: hidden;
+}
+
+.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;
+}
+
+.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;
+    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 {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    width: 50px;
+    height: 80px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: 0 12px;
+}
+
+.hamburger-btn span {
+    display: block;
+    width: 24px;
+    height: 3px;
+    background-color: #333;
+    border-radius: 2px;
+}
+
+.flexbox {
+    display: flex;
+    flex: 1;
+    background-color: #fafafb;
+    overflow: hidden;
+    gap: 1px;
+}
+
+.sidebar {
+    flex-basis: 275px;
+    flex-shrink: 0;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    overflow-y: auto;
+    transition: transform 0.3s ease;
+}
+
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    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;
+        transform: translateX(-100%);
+        width: 260px;
+        flex-basis: 260px;
+    }
+
+    .sidebar.sidebar-open {
+        transform: translateX(0);
+    }
+
+    .sidebar-overlay.active {
+        display: block;
+    }
+}
+
+@media (max-width: 639px) {
+    .header {
+        height: 60px;
+    }
+
+    .hamburger-btn {
+        height: 60px;
+    }
+
+    .content {
+        padding: 15px 10px;
+    }
+}
+</style>

resources/views/app.blade.php

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title inertia>{{ config('app.name', 'Nexus') }}</title>
+
+        @vite(['resources/js/app.js'])
+        @inertiaHead
+    </head>
+    <body>
+        @inertia
+    </body>
+</html>