<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm py-2">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardNavbar"
            aria-controls="dashboardNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="dashboardNavbar">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100 d-flex justify-content-between text-center">
                <li class="nav-item">
                    <a class="nav-link px-3 urdu-regular <?= $font_size ?>" href="dashboard" title="ڈیش بورڈ">ڈیش
                        بورڈ</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle px-3 urdu-regular <?= $font_size ?>" href="#"
                        id="admissionDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        داخلہ
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark border-0 shadow text-end"
                        aria-labelledby="admissionDropdown">
                        <li><a class="dropdown-item urdu-regular <?= $font_size ?>" href="registrationForm">داخلہ
                                فارم</a>
                        </li>
                        <li><a class="dropdown-item urdu-regular <?= $font_size ?>" href="registrationUpdateForm">داخلہ
                                فارم
                                تبدیلی</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-3 urdu-regular <?= $font_size ?>" href="idCardStd"
                        title="طالب العلم کارڈ">طالب العلم
                        کارڈ</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-3 urdu-regular <?= $font_size ?>" href="resultFrm"
                        title="رزلٹ کا اندراج کیجیے">رزلٹ
                        بنائیے</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-3 urdu-regular <?= $font_size ?>" href="attendenceSheet"
                        title="کشف الحضور">کشف الحضور</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-3 urdu-regular <?= $font_size ?>" href="stdPromotion"
                        title="کسی بھی طالب العلم کا درجہ یا رول نمبر تبدیل کرنے کے لئے یہاں پر کلک کریں">ترقی طالب
                        علم</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle px-3 urdu-regular <?= $font_size ?>" href="#" id="darjaDropdown"
                        role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        درجات
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark border-0 shadow text-end"
                        aria-labelledby="darjaDropdown">
                        <li><a class="dropdown-item urdu-regular <?= $font_size ?>" href="addNewDarja">نیا درجہ</a>
                        </li>
                        <li><a class="dropdown-item urdu-regular <?= $font_size ?>" href="deleteDarja">درجہ مٹائیں</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle px-3 urdu-regular <?= $font_size ?>" href="#"
                        id="subjectsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        مضامین
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark border-0 shadow text-end"
                        aria-labelledby="subjectsDropdown">
                        <li><a class="dropdown-item urdu-regular <?= $font_size ?>" href="addSubjects">اندراج
                                مضامین</a></li>
                        <li><a class="dropdown-item urdu-regular <?= $font_size ?>" href="deleteSubject">مضامین
                                مٹائیں</a></li>
                        <li><a class="dropdown-item urdu-regular <?= $font_size ?>" href="editSubjects">مضامین
                                تبدیلی</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-3 urdu-regular <?= $font_size ?>" href="changePassword"
                        title="پاس ورڈ تبدیل کریں">پاس
                        ورڈ تبدیلی</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
    .navbar-dark .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.85);
        /* font-weight: 500; */
        transition: all 0.2s;
        font-size: 0.95rem;
    }

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
    }

    #dashboardNavbar .dropdown-menu {
        background: #212529;
        min-width: 200px;
        text-align: start;
    }

    #dashboardNavbar .dropdown-item {
        color: rgba(255, 255, 255, 0.85);
        padding: 10px 20px;
        transition: all 0.2s;
        text-align: start;
    }

    #dashboardNavbar .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    #dashboardNavbar ul {
        /* alignment handled dynamically */
    }
</style>