MIF_E31230580/resources/views/layouts/navigation.blade.php

<style>
    /* 1. VARIABEL TEMA NAVIGASI */
    :root {
        --nav-blue: #0052cc;
        --nav-sky: #00b3ff;
        --nav-ice: #f2f7ff;
        --nav-white: #ffffff;
        --nav-text: #1e293b;
        --nav-muted: #64748b;
        --nav-border: #e2e8f0;
        --nav-shadow: 0 4px 20px rgba(0, 82, 204, 0.04);
        --nav-rose: #f43f5e;
    }

    /* 2. AREA NAVIGASI UTAMA */
    .nav-bar-css {
        background-color: var(--nav-white);
        border-bottom: 1px solid var(--nav-border);
        box-shadow: var(--nav-shadow);
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 72px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .nav-container-css {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 3. LOGO BRAND */
    .nav-logo-css {
        font-size: 20px;
        font-weight: 900;
        text-decoration: none;
        letter-spacing: -0.5px;
        background: linear-gradient(to right, var(--nav-blue), var(--nav-sky));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: transform 0.3s ease;
    }

    .nav-logo-css:hover { transform: scale(1.03); }

    /* 4. TAUTAN MENU NAVIGASI */
    .nav-menu-css {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .nav-link-css {
        font-size: 13px;
        font-weight: 750;
        color: var(--nav-muted);
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 12px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nav-link-css:hover, .nav-link-css.active {
        color: var(--nav-blue);
        background-color: var(--nav-ice);
        border: 1px solid rgba(0, 82, 204, 0.1);
    }

    /* 5. BLOK AKUN & TOMBOL AKSI */
    .nav-right-css {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .nav-user-info { text-align: right; }
    .nav-user-name { font-size: 13px; font-weight: 800; color: var(--nav-text); margin: 0; line-height: 1; }
    .nav-user-role { font-size: 9px; font-weight: 900; text-transform: uppercase; color: var(--nav-blue); letter-spacing: 0.5px; margin-top: 3px; display: inline-block; }

    .nav-btn-profile {
        background-color: var(--nav-ice);
        color: var(--nav-blue);
        border: 1px solid rgba(0, 82, 204, 0.1);
        font-size: 11px;
        font-weight: 800;
        padding: 10px 18px;
        border-radius: 12px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
    }

    .nav-btn-logout {
        background-color: #fff1f2;
        color: var(--nav-rose);
        border: 1px solid rgba(244, 63, 94, 0.1);
        font-size: 11px;
        font-weight: 800;
        padding: 10px 18px;
        border-radius: 12px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
    }

    .nav-btn-profile:hover, .nav-btn-logout:hover { transform: translateY(-1px); }
</style>

<nav class="nav-bar-css">
    <div class="nav-container-css">
        <div class="nav-menu-css">
            <a href="{{ route('landing') }}" class="nav-logo-css">BELAJAR ISYARAT</a>

            @if(auth()->user()->role === 'admin')
                <!-- Menu Khusus Admin -->
                <a href="{{ route('dashboard') }}" class="nav-link-css {{ request()->routeIs('dashboard') ? 'active' : '' }}">Dashboard</a>
                <a href="{{ route('admin.gesture') }}" class="nav-link-css {{ request()->routeIs('admin.gesture*') ? 'active' : '' }}">Kelola Gesture</a>
                <a href="{{ route('admin.users') }}" class="nav-link-css {{ request()->routeIs('admin.users') ? 'active' : '' }}"> Kelola User</a>
            @else
                <!-- Menu User Biasa -->
                <a href="{{ route('dashboard') }}" class="nav-link-css {{ request()->routeIs('dashboard') ? 'active' : '' }}">Dashboard</a>
                <a href="{{ route('gesture.index') }}" class="nav-link-css {{ request()->routeIs('gesture.index') ? 'active' : '' }}">Gesture</a>
                <a href="{{ route('translate.index') }}" class="nav-link-css {{ request()->routeIs('translate.index') ? 'active' : '' }}">Latihan</a>
                <a href="{{ route('history.index') }}" class="nav-link-css {{ request()->routeIs('history.index') ? 'active' : '' }}">Riwayat</a>
            @endif
        </div>

        <div class="nav-right-css">
            <div class="nav-user-info">
                <p class="nav-user-name">{{ auth()->user()->name }}</p>
                <span class="nav-user-role">{{ auth()->user()->role === 'admin' ? 'Administrator' : 'Teman Tuli' }}</span>
            </div>
            <a href="{{ route('profile.edit') }}" class="nav-btn-profile">Profil</a>
            <form method="POST" action="{{ route('logout') }}" style="margin: 0;">
                @csrf
                <button type="submit" class="nav-btn-logout">Keluar</button>
            </form>
        </div>
    </div>
</nav>