Basic design created
This commit is contained in:
@@ -1,11 +0,0 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../storage/framework/views/*.php';
|
||||
@source '../**/*.blade.php';
|
||||
@source '../**/*.js';
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
}
|
||||
@@ -5,6 +5,15 @@ 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'
|
||||
|
||||
// Icons importieren
|
||||
import { faUser, faTrash, faCheck } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(faUser, faTrash, faCheck)
|
||||
|
||||
|
||||
InertiaProgress.init()
|
||||
|
||||
createInertiaApp({
|
||||
@@ -24,12 +33,28 @@ createInertiaApp({
|
||||
const vueApp = createApp({ render: () => h(App, props) })
|
||||
|
||||
vueApp.use(plugin)
|
||||
|
||||
vueApp.component('font-awesome-icon', FontAwesomeIcon)
|
||||
|
||||
vueApp.use(Vue3Toastify, {
|
||||
autoClose: 3000,
|
||||
position: 'top-right',
|
||||
autoClose: 10000,
|
||||
position: 'bottom-right',
|
||||
pauseOnHover: true,
|
||||
hideProgressBar: false, // Progressbar anzeigen
|
||||
toastDefaults: {
|
||||
success: {
|
||||
style: {background: '#4caf50', color: '#fff'}, // grün
|
||||
progressStyle: {background: '#2e7d32', height: '4px'},
|
||||
},
|
||||
error: {
|
||||
style: {background: '#f44336', color: '#fff'}, // rot
|
||||
progressStyle: {background: '#c62828', height: '4px'},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
||||
vueApp.config.globalProperties.$toast = toast
|
||||
vueApp.mount(el)
|
||||
},
|
||||
|
||||
195
resources/js/layouts/AppLayout.vue
Normal file
195
resources/js/layouts/AppLayout.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<script setup>
|
||||
import Icon from "../../../app/Views/Components/Icon.vue";
|
||||
import GlobalWidgets from "../../../app/Views/Partials/GlobalWidgets/GlobalWidgets.vue";
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, default: 'App' },
|
||||
user: { type: Object, },
|
||||
flash: { type: Object, default: () => ({}) },
|
||||
navbar: { type: Object },
|
||||
tenant: String,
|
||||
currentPath: String,
|
||||
})
|
||||
|
||||
console.log(props.currentPath)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<!-- Sidebar -->
|
||||
<!-- Main content -->
|
||||
<div class="main">
|
||||
<!-- Header -->
|
||||
<div class="flexbox">
|
||||
<div class="sidebar">
|
||||
<div class="logo">
|
||||
<img src="../../../public/images/logo.png" alt="Logo" />
|
||||
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<ul class="nav-links" v-if="props.navbar.personal.length > 0">
|
||||
<li v-for="navlink in props.navbar.personal">
|
||||
<a
|
||||
:class="{ navlink_active: navlink.url.endsWith(props.currentPath) }"
|
||||
:href="navlink.url"
|
||||
>{{navlink.display}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav-links" v-if="props.navbar.common.length > 0">
|
||||
<li v-for="navlink in props.navbar.common">
|
||||
<a
|
||||
:class="{ navlink_active: navlink.url.endsWith(props.currentPath) }"
|
||||
:href="navlink.url"
|
||||
>{{navlink.display}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-links" v-if="props.navbar.costunits.length > 0">
|
||||
<li v-for="navlink in props.navbar.costunits">
|
||||
<a
|
||||
:class="{ navlink_active: navlink.url.endsWith(props.currentPath) }"
|
||||
:href="navlink.url"
|
||||
>{{navlink.display}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-links" v-if="props.navbar.events.length > 0">
|
||||
<li v-for="navlink in props.navbar.events">
|
||||
<a
|
||||
:class="{ navlink_active: navlink.url.endsWith(props.currentPath) }"
|
||||
:href="navlink.url"
|
||||
>{{navlink.display}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<div class="left-side"><h1>{{ props.title }}</h1></div>
|
||||
<div class="user-info" v-if="props.user !== null">
|
||||
<a href="/messages" class="header-link-anonymous" title="Meine Nachrichten">
|
||||
<Icon name="envelope" />
|
||||
</a>
|
||||
|
||||
<a href="/profile" class="header-link-anonymous" title="Mein Profil">
|
||||
<Icon name="user" />
|
||||
</a>
|
||||
|
||||
<a href="/logout" class="header-link-anonymous-logout" title="Abmelden">
|
||||
<Icon name="lock" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="anonymous-actions" v-else>
|
||||
<a href="/register" class="header-link-anonymous">Registrieren</a>
|
||||
<a href="/login" class="header-link-anonymous"> Anmelden </a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<global-widgets :user="props.user" :tenant="props.tenant" v-if="props.user !== null" />
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
© 2026 Your Company
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Toaster -->
|
||||
<transition name="fade">
|
||||
<div v-if="flash.message" class="toaster">
|
||||
{{ flash.message }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.header-link-anonymous,
|
||||
.header-link-anonymous-logout {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
background-color: #ffffff;
|
||||
padding: 10px 30px;
|
||||
margin: 0 -20px 0 30px;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.header-link-anonymous-logout {
|
||||
padding-right: 35px !important;
|
||||
}
|
||||
|
||||
.header-link-anonymous:hover {
|
||||
background-color: #1d4899;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.header-link-anonymous-logout:hover {
|
||||
background-color: #ff0000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 285px;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
color: #b6b6b6;
|
||||
background-color: #fff;
|
||||
padding: 20px 25px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: calc(100% - 50px);
|
||||
font-weight: bold;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
flex: 1;
|
||||
margin-left: -10px;
|
||||
width: 275px;
|
||||
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
padding: 8px 12px;
|
||||
display: block;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
background-color: #1d4899;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.navlink_active {
|
||||
background-color: #fae39c !important;
|
||||
color: #1d4899 !important; /* Dunklere Schrift beim Hover */
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
<link rel="stylesheet" href="css/elements.css" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
|
||||
<!-- Base href für relative Assets -->
|
||||
<base href="/">
|
||||
|
||||
<!-- Vite Assets -->
|
||||
@vite('resources/js/app.js')
|
||||
|
||||
@inertiaHead
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user