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

Basic design created

Browse Source
This commit is contained in:
Thomas Günther
2026-02-03 09:33:18 +01:00
parent 3570f442f5
commit e280fcfba8
29 changed files with 1055 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
resources/js/layouts/AppLayout.vue Normal file
View 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">
&copy; 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>