<div class="app-menu navbar-menu">
    <!-- LOGO -->
    <div class="navbar-brand-box">
        <!-- <a href="index.html" class="logo logo-dark">
            <span class="logo-sm">
                <img src="{{ asset('assets/images/logo-sm.png') }}" alt="" height="22">
            </span>
            <span class="logo-lg">
                <img src="{{ asset('assets/images/logo-dark.png') }}" alt="" height="17">
            </span>
        </a>
        <a href="index.html" class="logo logo-light">
            <span class="logo-sm">
                <img src="{{ asset('assets/images/logo-sm.png') }}" alt="" height="22">
            </span>
            <span class="logo-lg">
                <img src="{{ asset('assets/images/logo-light.png') }}" alt="" height="17">
            </span>
        </a> -->
        <button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover" id="vertical-hover">
            <i class="ri-record-circle-line"></i>
        </button>
    </div>

    <div id="scrollbar">
        <div class="container-fluid">
            <div id="two-column-menu"></div>
            <ul class="navbar-nav" id="navbar-nav">
                <li class="menu-title"><span data-key="t-menu">Menu</span></li>
                <li class="nav-item">
                    <a class="nav-link menu-link" href="{{ route('home') }}" role="button">
                        <i class="ri-dashboard-2-line"></i> <span>Home</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-link" href="" role="button">
                        <i class="ri-account-circle-line"></i> <span>Users</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-link collapsed" href="#sidebarCategories" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarCategories">
                        <i class="ri-bookmark-line"></i> <span>Book Categories</span>
                    </a>
                    <div class="collapse menu-dropdown" id="sidebarCategories">
                        <ul class="nav nav-sm flex-column">
                            <!-- Create Book Category -->
                            <li class="nav-item">
                                <a href="{{ route('categories.create') }}" class="nav-link">
                                    Create
                                </a>
                            </li>
                            <!-- Show Book Categories -->
                            <li class="nav-item">
                                <a href="{{ route('categories.index') }}" class="nav-link">
                                    Show
                                </a>
                </li>
                </ul>
                    </div>
                </li>

                 <!-- Books -->
                 <li class="nav-item">
                    <a class="nav-link menu-link collapsed" href="#sidebarBooks" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarBooks">
                        <i class="ri-book-line"></i> <span>Books</span>
                    </a>
                    <div class="collapse menu-dropdown" id="sidebarBooks">
                        <ul class="nav nav-sm flex-column">
                            <!-- Create Book -->
                            <li class="nav-item">
                                <a href="{{ route('books.create') }}" class="nav-link">
                                    Create
                                </a>
                            </li>
                            <!-- Show Books -->
                            <li class="nav-item">
                                <a href="{{ route('books.index') }}" class="nav-link">
                                    Show
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            

                <li class="nav-item">
    <a class="nav-link menu-link collapsed" href="#sidebarDuas" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarDuas">
        <i class="ri-bookmark-line"></i> <span>Duas</span>
    </a>
    <div class="collapse menu-dropdown" id="sidebarDuas">
        <ul class="nav nav-sm flex-column">
            <!-- Create Dua -->
            <li class="nav-item">
                <a href="{{ route('duas.create') }}" class="nav-link">
                    Create Dua
                </a>
            </li>
            <!-- Show Duas -->
            <li class="nav-item">
                <a href="{{ route('duas.index') }}" class="nav-link">
                    Show Duas
                </a>
            </li>
            <!-- Create Dua Category -->
            <li class="nav-item">
                <a href="{{ route('dua-categories.create') }}" class="nav-link">
                    Create Category
                </a>
            </li>
            <!-- Show Dua Categories -->
            <li class="nav-item">
                <a href="{{ route('dua-categories.index') }}" class="nav-link">
                    Show Categories
                </a>
            </li>
        </ul>
    </div>
</li>

                <!-- Quran -->
                <li class="nav-item">
                    <a class="nav-link menu-link collapsed" href="#sidebarQuran" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarQuran">
                        <i class="ri-book-open-line"></i> <span>Quran</span>
                    </a>
                    <div class="collapse menu-dropdown" id="sidebarQuran">
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <a href="{{ route('quran.index') }}" class="nav-link">
                                    Dashboard
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('quran.surahs') }}" class="nav-link">
                                    Surahs
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('quran.ayats') }}" class="nav-link">
                                    Ayats
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('quran.juzs') }}" class="nav-link">
                                    Juzs
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('quran.sajdahs') }}" class="nav-link">
                                    Sajdahs
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

              
                <li class="nav-item">
                    <a class="nav-link menu-link" href="S" role="button">
                        <i class="ri-apps-2-line"></i> <span>Donations</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link menu-link" href="{{route("api-docs")}}" role="button">
                        <i class="ri-apps-2-line"></i> <span>Apis</span>
                    </a>
                </li>

                <!-- Feedback -->
                <li class="nav-item">
                    <a class="nav-link menu-link" href="{{ route('feedback.index') }}" role="button">
                        <i class="ri-feedback-line"></i> <span>Feedback</span>
                    </a>
                </li>

                <!-- Guides -->
                <li class="nav-item">
                    <a class="nav-link menu-link" href="{{ route('guides.index') }}" role="button">
                        <i class="ri-file-paper-line"></i> <span>Guides</span>
                    </a>
                </li>

                <!-- Hadith -->
                <li class="nav-item">
                    <a class="nav-link menu-link collapsed" href="#sidebarHadith" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarHadith">
                        <i class="ri-book-open-line"></i> <span>Hadith</span>
                    </a>
                    <div class="collapse menu-dropdown" id="sidebarHadith">
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <a href="{{ route('hadith.index') }}" class="nav-link">
                                    All Hadiths
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('hadith.create') }}" class="nav-link">
                                    Create Hadith
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ route('hadith-categories.index') }}" class="nav-link">
                                    Categories
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="sidebar-background"></div>
</div>