mareike/resources/js/layouts/AppLayout.vue

<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>