match_making/resources/views/akademisi/navbar.blade.php

<?php
// Ambil detail pengguna berdasarkan role
$user = Auth::user();
$detail = null;

switch ($user->role) {
    case 'pemerintah':
        $detail = $user->pemerintahDetails; // Mengambil detail dari relasi
        break;
    case 'umkm':
        $detail = $user->umkmDetails; // Mengambil detail dari relasi
        break;
    case 'investor':
        $detail = $user->investorDetails; // Mengambil detail dari relasi
        break;
    case 'akademisi':
        $detail = $user->akademisiDetails; // Mengambil detail dari relasi
        break;
    case 'komunitas':
        $detail = $user->komunitasDetails; // Mengambil detail dari relasi
        break;
}
?>

<style>
    body {
        padding-top: 60px; /* Sesuaikan sesuai tinggi navbar Anda */
    }
    .navbar-area {
        background-color: #ffffff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar-nav .nav-link {
        color: #333;
        transition: color 0.3s ease;
    }
    .navbar-nav .nav-link:hover {
        color: #007bff; /* Warna saat hover */
    }
    .dropdown-menu {
        min-width: 200px; /* Lebar minimum dropdown */
    }
</style>

<!-- Navbar Area -->
<div class="navbar-area two fixed-top">
    <div class="mobile-nav">
        <a href="{{ url('/') }}" class="logo">
            <img src="{{ asset('assetslixi/img/logo.png') }}" alt="Logo">
        </a>
    </div>

    <div class="main-nav">
        <div class="container">
            <nav class="navbar navbar-expand-md navbar-light">
                <a class="navbar-brand" href="{{ url('/') }}">
                    <img src="{{ asset('assetslixi/img/logo.png') }}" alt="Logo" height="40">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
                <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a href="{{ url('akademisi') }}" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Permohonan <i class='bx bx-chevron-down'></i></a>
                            <ul class="dropdown-menu">
                                <li class="nav-item">
                                    <a href="{{ url('permohonanpelatihan') }}" class="nav-link">Pelatihan</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ url('permohonanriset') }}" class="nav-link">Riset</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('penawaranpendanaan') }}" class="nav-link">Pendanaan</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('permohonanprojects') }}" class="nav-link">Permohonan Program</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('penawaranprojects') }}" class="nav-link">Penawaran Program</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('notification/permohonan') }}" class="nav-link">Notifikasi Permohonan</a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('notification/penawaran') }}" class="nav-link">Notifikasi Penawaran</a>
                        </li>
                    </ul>

                 
                </div>
                <div class="nav-item dropdown ms-auto">
                    <!-- Profile Dropdown -->
                    <button class="btn btn-secondary dropdown-toggle d-flex align-items-center flex-grow-0"
                        type="button" id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false"
                        style="padding: 10px;">
                        @if ($detail && $detail->foto)
                            <img src="{{ asset('storage/' . $detail->foto) }}" alt="Profile" class="rounded-circle"
                                width="40" height="40" style="margin-right: 8px; object-fit: cover;">
                        @else
                            <img src="{{ asset('default_profile.png') }}" alt="Default Profile" class="rounded-circle"
                                width="40" height="40" style="margin-right: 8px; object-fit: cover;">
                        @endif
                        <span style="font-size: 16px;">{{ $user->full_name }}</span>
                    </button>

                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
                        <li>
                            <x-responsive-nav-link :href="route('profile.show')">
                                {{ __('Profile') }}
                            </x-responsive-nav-link>
                        </li>
                        <li>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <x-responsive-nav-link :href="route('logout')"
                                    onclick="event.preventDefault(); this.closest('form').submit();">
                                    {{ __('Log Out') }}
                                </x-responsive-nav-link>
                            </form>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="nav-item dropdown ms-auto">
        <!-- Profile Dropdown -->
        <button class="btn btn-secondary dropdown-toggle d-flex align-items-center" type="button" id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false">
            @if ($detail && $detail->foto)
                <img src="{{ asset('storage/' . $detail->foto) }}" alt="Profile" class="rounded-circle" width="40" height="40" style="margin-right: 8px; object-fit: cover;">
            @else
                <img src="{{ asset('default_profile.png') }}" alt="Default Profile" class="rounded-circle" width="40" height="40" style="margin-right: 8px; object-fit: cover;">
            @endif
            <span>{{ $user->full_name }}</span>
        </button>

        <ul class="dropdown-menu" aria-labelledby="profileDropdown">
            <li>
                <x-responsive-nav-link :href="route('profile.show')">
                    {{ __('Profile') }}
                </x-responsive-nav-link>
            </li>
            <li>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <x-responsive-nav-link :href="route('logout')" onclick="event.preventDefault(); this.closest('form').submit();">
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </form>
            </li>
        </ul>
    </div>
</div>

<style>
    @media (max-width: 991px) {
        .nav-item.dropdown button {
            width: 100%;
            justify-content: center;
            padding-top: 65px;
            padding-bottom: 10px;
        }


        .nav-item.dropdown .dropdown-menu {
            width: 100%;
            text-align: center;
        }

        .nav-item.dropdown .dropdown-menu a {
            display: block;
            width: 100%;
        }
    }
</style>