<nav class="navbar navbar-expand-lg">



    <div class="container">

        <!-- LOGO -->
        <a class="navbar-brand"
            href="/website-dispussip/index.php">

            <img
                src="/website-dispussip/assets/img/logo%20dispussip.png"
                alt="Logo DISPUSIP Banyuwangi">

        </a>


        <!-- TOMBOL MOBILE -->
        <button
            class="navbar-toggler"
            type="button"
            onclick="toggleMobileMenu()"
            aria-label="Buka menu">

            <span class="navbar-toggler-icon"></span>

        </button>


        <!-- MENU -->
        <div
            class="navbar-menu"
            id="menuNavbar">

            <ul class="navbar-nav">


                <!-- BERANDA -->

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="/website-dispussip/index.php">

                        Beranda

                    </a>

                </li>


                <!-- ============================== -->
                <!-- PROFIL -->
                <!-- ============================== -->

                <li class="nav-item dropdown-custom">

                    <button
                        type="button"
                        class="nav-link dropdown-button"
                        onclick="toggleDropdown('profilDropdown', this)">

                        Profil

                        <span class="arrow">▼</span>

                    </button>


                    <ul
                        class="dropdown-custom-menu"
                        id="profilDropdown">

                        <li>
                            <a
                                href="/website-dispussip/pages/sejarah.php">

                                Sejarah

                            </a>
                        </li>

                        <li>
                            <a
                                href="/website-dispussip/pages/visi-misi.php">

                                Visi dan Misi

                            </a>
                        </li>

                        <li>
                            <a
                                href="/website-dispussip/pages/tugas-fungsi.php">

                                Tugas dan Fungsi

                            </a>
                        </li>

                        <li>
                            <a
                                href="/website-dispussip/pages/struktur-organisasi.php">

                                Struktur Organisasi

                            </a>
                        </li>

                    </ul>

                </li>


                <!-- ============================== -->
                <!-- LAYANAN -->
                <!-- ============================== -->

                <li class="nav-item dropdown-custom">

                    <button
                        type="button"
                        class="nav-link dropdown-button"
                        onclick="toggleDropdown('layananDropdown', this)">

                        Layanan

                        <span class="arrow">▼</span>

                    </button>


                    <ul
                        class="dropdown-custom-menu"
                        id="layananDropdown">

                        <li>
                            <a
                                href="/website-dispussip/pages/layanan-perpustakaan.php">

                                Layanan Perpustakaan

                            </a>
                        </li>

                        <li>
                            <a
                                href="/website-dispussip/pages/layanan-kearsipan.php">

                                Layanan Kearsipan

                            </a>
                        </li>

                    </ul>

                </li>


                <!-- BERITA -->

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="/website-dispussip/pages/berita.php">

                        Berita

                    </a>

                </li>



                <!-- PENGUMUMAN -->

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="/website-dispussip/pages/pengumuman.php">

                        Pengumuman

                    </a>

                </li>


                <!-- GALERI -->

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="/website-dispussip/pages/galeri.php">

                        Galeri

                    </a>

                </li>

                <!-- SI LARON -->
                <li class="nav-item">
                    <a
                        class="nav-link"
                        href="https://silaron.banyuwangikab.go.id/"
                        target="_blank"
                        rel="noopener noreferrer">
                        SiLaron
                    </a>
                </li>

                <!-- BUDIWANGI -->
                <li class="nav-item">
                    <a
                        class="nav-link"
                        href="https://ebookbanyuwangi.id/"
                        target="_blank"
                        rel="noopener noreferrer">
                        Budiwangi
                    </a>
                </li>
            </ul>

        </div>

    </div>

</nav>

<style>
    /* ========================================= */
    /* NAVBAR */
    /* ========================================= */

    .navbar {

        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 80px;

        background: #07357e;


        z-index: 9999;

        display: flex;
        align-items: center;

        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);

    }

    .navbar .container,
    .navbar .container-fluid {
        background: transparent !important;
    }

    .navbar-brand img {
        background: transparent;
    }


    /* ========================================= */
    /* LOGO */
    /* ========================================= */

    .navbar-brand {

        padding: 0;

    }


    .navbar-brand img {

        width: 170px;

        height: 60px;

        object-fit: contain;

    }


    /* ========================================= */
    /* MENU */
    /* ========================================= */

    .navbar-menu {

        margin-left: auto;


    }


    .navbar-nav {

        display: flex;

        align-items: center;

        gap: 3px;

        list-style: none;

        margin: 0;

        padding: 0;

    }

    /* Menu */

    .nav-link {

        height: 80px;

        display: flex;

        align-items: center;

        padding: 0 18px;

        color: #fff;

        background: transparent;

        border: none;

        text-decoration: none;

        font-size: 16px;

        font-weight: 500;

    }

    .nav-link:hover,
    .nav-link.active {
        background: rgba(255, 255, 255, .18);
        color: #fff;
    }

    /* Dropdown */

    .dropdown-menu {
        border: none;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
        overflow: hidden;
    }

    .dropdown-item {
        padding: 12px 18px;
    }

    .dropdown-item:hover {
        background: #f5f5f5;
    }

    .dropdown-item.active {
        background: #07357e;
        color: #fff;
    }


    /* ========================================= */
    /* TOMBOL PROFIL & LAYANAN */
    /* ========================================= */

    .dropdown-button {

        font-family: inherit;

    }


    .arrow {

        font-size: 9px;

        margin-left: 7px;

        transition:
            transform 0.2s ease;

    }


    /* ========================================= */
    /* DROPDOWN */
    /* ========================================= */

    .dropdown-custom {

        position: relative;

    }


    .dropdown-custom-menu {

        display: none;

        position: absolute;

        top: 48px;

        left: 0;

        min-width: 230px;

        padding: 6px;

        margin: 0;

        background: white;

        border-radius: 8px;

        box-shadow:
            0 5px 20px rgba(0, 0, 0, 0.15);

        list-style: none;

        z-index: 9999;

    }


    .dropdown-custom-menu.show {

        display: block;

    }


    /* ========================================= */
    /* ITEM DROPDOWN */
    /* ========================================= */

    .dropdown-custom-menu li a {

        display: block;

        padding: 10px 13px;

        color: #333;

        font-size: 14px;

        text-decoration: none;

        border-radius: 5px;

    }


    .dropdown-custom-menu li a:hover {

        background-color: #07357e;
        color: white;

    }


    /* ========================================= */
    /* TOMBOL MOBILE */
    /* ========================================= */

    .navbar-toggler {

        display: none;

        background: transparent;

        border: 1px solid white;

        border-radius: 5px;

        padding: 7px 10px;

        cursor: pointer;

    }


    .navbar-toggler-icon {

        display: block;

        width: 22px;

        height: 16px;

        border-top:
            2px solid white;

        border-bottom:
            2px solid white;

        position: relative;

    }


    .navbar-toggler-icon::after {

        content: "";

        position: absolute;

        left: 0;

        top: 6px;

        width: 22px;

        border-top:
            2px solid white;

    }


    /* ========================================= */
    /* RESPONSIVE */
    /* ========================================= */

    @media (max-width: 991px) {

        .navbar-toggler {

            display: block;

        }


        .navbar-menu {

            display: none;

            width: 100%;

            margin-top: 10px;

        }


        .navbar-menu.show {

            display: block;

        }


        .navbar-nav {

            display: block;

            width: 100%;

        }


        .nav-item {

            width: 100%;

        }


        .nav-link {

            width: 100%;

            justify-content: flex-start;

        }


        .dropdown-custom-menu {

            position: static;

            width: 100%;

            box-shadow: none;

            border-radius: 5px;

            margin-bottom: 5px;

        }


        .navbar-brand img {

            width: 150px;

            height: 55px;

        }

        .btn-primary {
            background-color: #07357e !important;
            border-color: #07357e !important;
        }
    }
</style>

<script>
    function toggleDropdown(id, button) {

        const dropdown = document.getElementById(id);

        // Tutup dropdown lain
        document.querySelectorAll('.dropdown-custom-menu').forEach(function(menu) {
            if (menu !== dropdown) {
                menu.classList.remove('show');
            }
        });

        // Buka / tutup dropdown yang diklik
        dropdown.classList.toggle('show');

        // Putar tanda panah
        if (button) {
            button.classList.toggle('active');
        }
    }


    // Klik di luar dropdown → tutup
    document.addEventListener('click', function(event) {

        const dropdown = event.target.closest('.dropdown-custom');

        if (!dropdown) {

            document.querySelectorAll('.dropdown-custom-menu')
                .forEach(function(menu) {
                    menu.classList.remove('show');
                });

            document.querySelectorAll('.dropdown-button')
                .forEach(function(button) {
                    button.classList.remove('active');
                });
        }

    });
</script>
<button class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#mobileMenu">

    <span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="mobileMenu">

    <ul class="navbar-nav ms-auto">

        <li class="nav-item">
            <a class="nav-link" href="index.php">Beranda</a>
        </li>

        <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle"
                href="#"
                data-bs-toggle="dropdown">
                Profil
            </a>

            <ul class="dropdown-menu">

                <li><a class="dropdown-item" href="sejarah.php">Sejarah</a></li>
                <li><a class="dropdown-item" href="visi.php">Visi & Misi</a></li>
                <li><a class="dropdown-item" href="tugas.php">Tugas & Fungsi</a></li>

            </ul>

        </li>

        <li class="nav-item">
            <a class="nav-link" href="berita.php">Berita</a>
        </li>

    </ul>

</div>