KoogleApp/src/Koogle.Web/Components/Layout/PublicLayout.razor

@using Koogle.Web.Services
@using Microsoft.AspNetCore.Components.Authorization
@inherits LayoutComponentBase

<MudThemeProvider Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="1" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%);">
        @* Mobile Menu Button (unter lg: 1280px) - LINKS *@
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Class="mobile-only" OnClick="ToggleDrawer" />

        @* Desktop Navigation (ab lg: 1280px) - LINKS *@
        <div class="desktop-only" style="display: flex; align-items: center; gap: 8px;">
            <MudButton Href="/" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Home">Home</MudButton>
            <MudButton Href="/about" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Info">Über uns</MudButton>
            <MudButton Href="/preise" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Euro">Preise</MudButton>
            <MudButton Href="/blog" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Article">Blog</MudButton>

            <MudDivider Vertical FlexItem Class="mx-2" Style="background-color: rgba(255,255,255,0.3); height: 24px;" />

            <AuthorizeView>
                <Authorized>
                    <MudButton Href="/dashboard" Variant="Variant.Filled" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Dashboard">
                        &Uuml;bersicht
                    </MudButton>
                </Authorized>
                <NotAuthorized>
                    <MudButton Href="/account/login" Variant="Variant.Outlined" Color="Color.Inherit" StartIcon="@Icons.Material.Filled.Login" Style="border-color: rgba(255,255,255,0.5);">
                        Login
                    </MudButton>
                </NotAuthorized>
            </AuthorizeView>
        </div>

        <MudSpacer />

        @* Logo - RECHTS *@
        <MudLink Href="/" Class="d-flex align-center" Style="text-decoration: none;">
            <MudPaper Class="pa-0 rounded-lg" Style="background: #2d5a4d;" Elevation="2">
                <MudImage Src="gw_app_icon2.png" Alt="KOOGLE" Height="32" />
            </MudPaper>
        </MudLink>
    </MudAppBar>

    @* Mobile Overlay *@
    @if (_drawerOpen)
    {
        <div class="mobile-overlay" @onclick="CloseDrawer"></div>
    }

    @* Mobile Drawer *@
    <div class="mobile-drawer @(_drawerOpen ? "open" : "")">
        <div class="drawer-header">
            <MudText Typo="Typo.h6" Style="color: white;">Menü</MudText>
            <MudIconButton Icon="@Icons.Material.Filled.Close" Color="Color.Inherit" Style="color: white;" OnClick="CloseDrawer" />
        </div>
        <div class="drawer-content">
            <MudNavMenu Bordered Dense>
                <MudNavLink Href="/" Icon="@Icons.Material.Filled.Home" Match="NavLinkMatch.All" OnClick="CloseDrawer">Home</MudNavLink>
                <MudNavLink Href="/about" Icon="@Icons.Material.Filled.Info" OnClick="CloseDrawer">Über uns</MudNavLink>
                <MudNavLink Href="/preise" Icon="@Icons.Material.Filled.Euro" OnClick="CloseDrawer">Preise</MudNavLink>
                <MudNavLink Href="/blog" Icon="@Icons.Material.Filled.Article" OnClick="CloseDrawer">Blog</MudNavLink>

                <MudNavGroup Title="Rechtliches" Icon="@Icons.Material.Filled.Gavel" Expanded="false">
                    <MudNavLink Href="/impressum" OnClick="CloseDrawer">Impressum</MudNavLink>
                    <MudNavLink Href="/datenschutz" OnClick="CloseDrawer">Datenschutz</MudNavLink>
                    <MudNavLink Href="/agb" OnClick="CloseDrawer">AGB</MudNavLink>
                </MudNavGroup>

                <MudDivider Class="my-2" />

                <AuthorizeView>
                    <Authorized>
                        <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard" IconColor="Color.Success" OnClick="CloseDrawer">Dashboard</MudNavLink>
                    </Authorized>
                    <NotAuthorized>
                        <MudNavLink Href="/account/login" Icon="@Icons.Material.Filled.Login" OnClick="CloseDrawer">Login</MudNavLink>
                        <MudNavLink Href="/account/register" Icon="@Icons.Material.Filled.PersonAdd" OnClick="CloseDrawer">Registrieren</MudNavLink>
                    </NotAuthorized>
                </AuthorizeView>
            </MudNavMenu>
        </div>
    </div>

    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="py-4">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {
    private MudTheme _theme = CustomThemes.GoodwoodTheme;
    private bool _drawerOpen;

    private void ToggleDrawer() => _drawerOpen = !_drawerOpen;
    private void CloseDrawer() => _drawerOpen = false;
}

<style>
    /* Responsive: Mobile nur unter 1280px, Desktop ab 1280px */
    .mobile-only {
        display: flex !important;
    }
    .desktop-only {
        display: none !important;
    }

    @@media (min-width: 1280px) {
        .mobile-only {
            display: none !important;
        }
        .desktop-only {
            display: flex !important;
        }
    }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1299;
    }

    .mobile-drawer {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background: white;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        z-index: 1300;
        display: flex;
        flex-direction: column;
        transition: left 0.3s ease;
    }

    .mobile-drawer.open {
        left: 0;
    }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%);
    }

    .drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
    }
</style>