        <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
                <div class="sidebar-brand-icon rotate-n-15">
                    <i class="fas fa-laugh-wink"></i>
                </div>
                <div class="sidebar-brand-text mx-3">Kumify</div>
            </a>

            <!-- Divider -->
            <hr class="sidebar-divider my-0">

            <!-- Nav Item - Dashboard -->
            <li class="nav-item {% if title == "Dashboard" %}active{% endif %}">
                <a class="nav-link" href="{% url "frontend:dashboard" %}">
                    <i class="fas fa-fw fa-tachometer-alt"></i>
                    <span>Dashboard</span></a>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Heading -->
            <div class="sidebar-heading">
                Mood
            </div>

            <!-- Nav Item - Status List -->
            <li class="nav-item {% if title == "Status List" %}active{% endif %}">
                <a class="nav-link" href="{% url "mood:status_list" %}">
                    <i class="fas fa-fw fa-smile"></i>
                    <span>Status List</span></a>
            </li>

            <!-- Nav Item - Activity List -->
            <li class="nav-item {% if title == "Activities" %}active{% endif %}">
                <a class="nav-link" href="{% url "mood:activity_list" %}">
                    <i class="fas fa-fw fa-smile"></i>
                    <span>Activities</span></a>
            </li>

            <!-- Nav Item - Mood List -->
            <li class="nav-item {% if title == "Moods" %}active{% endif %}">
                <a class="nav-link" href="{% url "mood:mood_list" %}">
                    <i class="fas fa-fw fa-smile"></i>
                    <span>Moods</span></a>
            </li>

            <!-- Nav Item - Notification List -->
            <li class="nav-item {% if title == "Notifications" %}active{% endif %}">
                <a class="nav-link" href="{% url "mood:notification_list" %}">
                    <i class="fas fa-fw fa-smile"></i>
                    <span>Notifications</span></a>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider">

            <!-- Heading -->
            <div class="sidebar-heading">
                Dreams
            </div>

            <!-- Nav Item - Dream List -->
            <li class="nav-item {% if title == "Dream List" %}active{% endif %}">
                <a class="nav-link" href="{% url "dreams:dream_list" %}">
                    <i class="fas fa-fw fa-smile"></i>
                    <span>Dream List</span></a>
            </li>

            <!-- Nav Item - Theme List -->
            <li class="nav-item {% if title == "Themes" %}active{% endif %}">
                <a class="nav-link" href="{% url "dreams:theme_list" %}">
                    <i class="fas fa-fw fa-smile"></i>
                    <span>Themes</span></a>
            </li>

            <!-- Nav Item - Notification List -->
            <li class="nav-item {% if title == "Notifications" %}active{% endif %}">
                <a class="nav-link" href="{% url "dreams:notification_list" %}">
                    <i class="fas fa-fw fa-smile"></i>
                    <span>Notifications</span></a>
            </li>

            <!-- Divider -->
            <hr class="sidebar-divider d-none d-md-block">

            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>

        </ul>
        <!-- End of Sidebar -->
