
{% load static %}
{% block sidebar %}

<div class="topnav">
    <div class="container-fluid">
        <nav class="navbar navbar-light navbar-expand-lg topnav-menu">

            <div class="collapse navbar-collapse" id="topnav-menu-content">
                <ul class="navbar-nav">

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-dashboard" role="button">
                            <i class="bx bx-home-circle me-2"></i><span key="t-dashboards">Dashboards</span>
                            <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-dashboard">

                            <a href="{% url 'dashboard' %}" class="dropdown-item" key="t-default">Default</a>
                            <a href="{% url 'dashboard_saas' %}" class="dropdown-item" key="t-saas">Saas</a>
                            <a href="{% url 'dashboard_crypto' %}" class="dropdown-item" key="t-crypto">Crypto</a>
                            <a href="{% url 'dashboard_blog' %}" class="dropdown-item" key="t-blog">Blog</a>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-uielement" role="button">
                            <i class="bx bx-tone me-2"></i>
                            <span key="t-ui-elements"> UI Elements</span>
                            <div class="arrow-down"></div>
                        </a>

                        <div class="dropdown-menu mega-dropdown-menu px-2 dropdown-mega-menu-xl"
                            aria-labelledby="topnav-uielement">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div>
                                        <a href="{% url 'uielements-alerts' %}" class="dropdown-item"
                                            key="t-alerts">Alerts</a>
                                        <a href="{% url 'uielements-buttons' %}" class="dropdown-item"
                                            key="t-buttons">Buttons</a>
                                        <a href="{% url 'uielements-cards' %}" class="dropdown-item"
                                            key="t-cards">Cards</a>
                                        <a href="{% url 'uielements-carousel' %}" class="dropdown-item"
                                            key="t-carousel">Carousel</a>
                                        <a href="{% url 'uielements-dropdowns' %}" class="dropdown-item"
                                            key="t-dropdowns">Dropdowns</a>
                                        <a href="{% url 'uielements-grid' %}" class="dropdown-item"
                                            key="t-grid">Grid</a>
                                        <a href="{% url 'uielements-images' %}" class="dropdown-item"
                                            key="t-images">Images</a>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div>
                                        <a href="{% url 'uielements-lightbox' %}" class="dropdown-item"
                                            key="t-lightbox">Lightbox</a>
                                        <a href="{% url 'uielements-modals' %}" class="dropdown-item"
                                            key="t-modals">Modals</a>
                                        <a href="{% url 'uielements-offcanvas' %}" class="dropdown-item"
                                            key="t-modals">Offcanvas</a>
                                        <a href="{% url 'uielements-rangeslidebar' %}" class="dropdown-item"
                                            key="t-range-slider">Range
                                            Slider</a>
                                        <a href="{% url 'uielements-sessiontimeout' %}" class="dropdown-item"
                                            key="t-session-timeout">Session Timeout</a>
                                        <a href="{% url 'uielements-progressbars' %}" class="dropdown-item"
                                            key="t-progress-bars">Progress Bars</a>
                                        <a href="{% url 'uielements-placeholders' %}" class="dropdown-item" key="t-placeholders">Placeholders</a>
                                        <a href="{% url 'uielements-sweetalert' %}" class="dropdown-item"
                                            key="t-sweet-alert">Sweet-Alert</a>
                                        <a href="{% url 'uielements-tabs' %}" class="dropdown-item"
                                            key="t-tabs-accordions">Tabs & Accordions</a>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div>
                                        <a href="{% url 'uielements-typography' %}" class="dropdown-item"
                                            key="t-typography">Typography</a>
                                        <a href="{% url 'uielements-toast' %}" class="dropdown-item" key="t-toasts">Toasts</a>
                                        <a href="{% url 'uielements-video' %}" class="dropdown-item"
                                            key="t-video">Video</a>
                                        <a href="{% url 'uielements-general' %}" class="dropdown-item"
                                            key="t-general">General</a>
                                        <a href="{% url 'uielements-colors' %}" class="dropdown-item"
                                            key="t-colors">Colors</a>
                                        <a href="{% url 'uielements-rating' %}" class="dropdown-item"
                                            key="t-rating">Rating</a>
                                        <a href="{% url 'uielements-notifications' %}" class="dropdown-item"
                                            key="t-notifications">Notifications</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-pages" role="button">
                            <i class="bx bx-customize me-2"></i><span key="t-apps">Apps</span>
                            <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-pages">

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-email"
                                    role="button">
                                    <span key="t-calendar">Calendar</span> <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-email">
                                    <a href="{% url 'calendar' %}" class="dropdown-item" key="t-tui-calendar">TUI Calendar</a>
                                    <a href="{% url 'full-calendar' %}" class="dropdown-item" key="t-full-calender">Full Calendar</a>
                                </div>
                            </div>
                            <a href="{% url 'chat' %}" class="dropdown-item" key="t-chat">Chat</a>
                            <a href="{% url 'filemanager' %}" class="dropdown-item" key="t-file-manager">File
                                Manager</a>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-email"
                                    role="button">
                                    <span key="t-email">Email</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-email">
                                    <a href="{% url 'email-inbox' %}" class="dropdown-item" key="t-inbox">Inbox</a>
                                    <a href="{% url 'email-reademail' %}" class="dropdown-item" key="t-read-email">Read
                                        Email</a>

                                    <div class="dropdown">
                                        <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-blog"
                                            role="button">
                                            <span key="t-email-templates">Templates</span>
                                            <div class="arrow-down"></div>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="topnav-blog">
                                            <a href="{% url 'email-templates-basicaction' %}" class="dropdown-item"
                                                key="t-basic-action">Basic Action</a>
                                            <a href="{% url 'email-templates-alertemail' %}" class="dropdown-item"
                                                key="t-alert-email">Alert Email</a>
                                            <a href="{% url 'email-templates-billingemail' %}" class="dropdown-item"
                                                key="t-bill-email">Billing Email</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-invoice"
                                    role="button">
                                    <span key="t-invoices">Invoices</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-invoice">
                                    <a href="{% url 'invoices-invoicelist' %}" class="dropdown-item"
                                        key="t-invoice-list">Invoice
                                        List</a>
                                    <a href="{% url 'invoices-invoicedetail' %}" class="dropdown-item"
                                        key="t-invoice-detail">Invoice
                                        Detail</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-ecommerce"
                                    role="button">
                                    <span key="t-ecommerce">Ecommerce</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-ecommerce">
                                    <a href="{% url 'ecommerce-products' %}" class="dropdown-item"
                                        key="t-products">Products</a>
                                    <a href="{% url 'ecommerce-productdetail' %}" class="dropdown-item"
                                        key="t-product-detail">Product Detail</a>
                                    <a href="{% url 'ecommerce-orders' %}" class="dropdown-item"
                                        key="t-orders">Orders</a>
                                    <a href="{% url 'ecommerce-customers' %}" class="dropdown-item"
                                        key="t-customers">Customers</a>
                                    <a href="{% url 'ecommerce-cart' %}" class="dropdown-item" key="t-cart">Cart</a>
                                    <a href="{% url 'ecommerce-checkout' %}" class="dropdown-item"
                                        key="t-checkout">Checkout</a>
                                    <a href="{% url 'ecommerce-shops' %}" class="dropdown-item" key="t-shops">Shops</a>
                                    <a href="{% url 'ecommerce-addproduct' %}" class="dropdown-item"
                                        key="t-add-product">Add
                                        Product</a>
                                </div>
                            </div>


                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-crypto"
                                    role="button">
                                    <span key="t-crypto">Crypto</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-crypto">
                                    <a href="{% url 'crypto-wallet' %}" class="dropdown-item" key="t-wallet">Wallet</a>
                                    <a href="{% url 'crypto-buysell' %}" class="dropdown-item" key="t-buy">Buy/Sell</a>
                                    <a href="{% url 'crypto-exchange' %}" class="dropdown-item"
                                        key="t-exchange">Exchange</a>
                                    <a href="{% url 'crypto-lending' %}" class="dropdown-item"
                                        key="t-lending">Lending</a>
                                    <a href="{% url 'crypto-orders' %}" class="dropdown-item" key="t-orders">Orders</a>
                                    <a href="{% url 'crypto-kycappication' %}" class="dropdown-item" key="t-kyc">KYC
                                        Application</a>
                                    <a href="{% url 'crypto-icolanding' %}" class="dropdown-item" key="t-ico">ICO
                                        Landing</a>
                                </div>
                            </div>

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-project"
                                    role="button">
                                    <span key="t-projects">Projects</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-project">
                                    <a href="{% url 'projects-projectsgrid' %}" class="dropdown-item"
                                        key="t-p-grid">Projects Grid</a>
                                    <a href="{% url 'projects-projectslist' %}" class="dropdown-item"
                                        key="t-p-list">Projects List</a>
                                    <a href="{% url 'projects-projectoverview' %}" class="dropdown-item"
                                        key="t-p-overview">Projects
                                        Overview</a>
                                    <a href="{% url 'projects-createview' %}" class="dropdown-item"
                                        key="t-create-new">Create
                                        New</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-task"
                                    role="button">
                                    <span key="t-tasks">Tasks</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-task">
                                    <a href="{% url 'tasks-tasklist' %}" class="dropdown-item" key="t-task-list">Task
                                        List</a>
                                    <a href="{% url 'tasks-kanbanboard' %}" class="dropdown-item"
                                        key="t-kanban-board">Kanban
                                        Board</a>
                                    <a href="{% url 'tasks-createtask' %}" class="dropdown-item"
                                        key="t-create-task">Create
                                        Task</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-contact"
                                    role="button">
                                    <span key="t-contacts">Contacts</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-contact">
                                    <a href="{% url 'contacts-usergrid' %}" class="dropdown-item" key="t-user-grid">User
                                        Grid</a>
                                    <a href="{% url 'contacts-userlist' %}" class="dropdown-item" key="t-user-list">User
                                        List</a>
                                    <a href="{% url 'contacts-profile' %}" class="dropdown-item"
                                        key="t-profile">Profile</a>
                                </div>
                            </div>

                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-blog"
                                    role="button">
                                    <span key="t-blog">Blog</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-blog">
                                    <a href="{% url 'blog-bloglist' %}" class="dropdown-item" key="t-blog-list">Blog
                                        List</a>
                                    <a href="{% url 'blog-bloggrid' %}" class="dropdown-item" key="t-blog-grid">Blog
                                        Grid</a>
                                    <a href="{% url 'blog-blogdetails' %}" class="dropdown-item"
                                        key="t-blog-details">Blog
                                        Details</a>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-components" role="button">
                            <i class="bx bx-collection me-2"></i><span key="t-components">Components</span>
                            <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-components">
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-form"
                                    role="button">
                                    <span key="t-forms">Forms</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-form">
                                    <a href="{% url 'forms-formelements' %}" class="dropdown-item"
                                        key="t-form-elements">Form
                                        Elements</a>
                                    <a href="{% url 'forms-formlayouts' %}" class="dropdown-item"
                                        key="t-form-layouts">Form
                                        Layouts</a>
                                    <a href="{% url 'forms-formvalidation' %}" class="dropdown-item"
                                        key="t-form-validation">Form
                                        Validation</a>
                                    <a href="{% url 'forms-formadvanced' %}" class="dropdown-item"
                                        key="t-form-advanced">Form
                                        Advanced</a>
                                    <a href="{% url 'forms-formeditors' %}" class="dropdown-item"
                                        key="t-form-editors">Form
                                        Editors</a>
                                    <a href="{% url 'forms-formfileupload' %}" class="dropdown-item"
                                        key="t-form-upload">Form File
                                        Upload</a>
                                    <a href="{% url 'forms-formxeditable' %}" class="dropdown-item"
                                        key="t-form-xeditable">Form
                                        Xeditable</a>
                                    <a href="{% url 'forms-formrepeater' %}" class="dropdown-item"
                                        key="t-form-repeater">Form
                                        Repeater</a>
                                    <a href="{% url 'forms-formwizard' %}" class="dropdown-item"
                                        key="t-form-wizard">Form Wizard</a>
                                    <a href="{% url 'forms-formmask' %}" class="dropdown-item"
                                        key="t-form-mask">Form Mask</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-table"
                                    role="button">
                                    <span key="t-tables">Tables</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-table">
                                    <a href="{% url 'tables-basictables' %}" class="dropdown-item"
                                        key="t-basic-tables">Basic
                                        Tables</a>
                                    <a href="{% url 'tables-datatables' %}" class="dropdown-item"
                                        key="t-data-tables">Data
                                        Tables</a>
                                    <a href="{% url 'tables-responsivetables' %}" class="dropdown-item"
                                        key="t-responsive-table">Responsive Table</a>
                                    <a href="{% url 'tables-editabletables' %}" class="dropdown-item"
                                        key="t-editable-table">Editable
                                        Table</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-charts"
                                    role="button">
                                    <span key="t-charts">Charts</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-charts">
                                    <a href="{% url 'charts-apexcharts' %}" class="dropdown-item"
                                        key="t-apex-charts">Apex charts</a>
                                    <a href="{% url 'charts-echarts' %}" class="dropdown-item" key="t-e-charts">E
                                        charts</a>
                                    <a href="{% url 'charts-chartjs' %}" class="dropdown-item"
                                        key="t-chartjs-charts">Chartjs Charts
                                        Charts</a>
                                    <a href="{% url 'charts-flotcharts' %}" class="dropdown-item"
                                        key="t-flot-charts">Flot Charts</a>
                                    <a href="{% url 'charts-toastuicharts' %}" class="dropdown-item"
                                        key="t-ui-charts">Toast UI
                                        Charts</a>
                                    <a href="{% url 'charts-jqueryknobcharts' %}" class="dropdown-item"
                                        key="t-knob-charts">Jquery Knob
                                        Charts</a>
                                    <a href="{% url 'charts-sparklinecharts' %}" class="dropdown-item"
                                        key="t-sparkline-charts">Sparkline Charts</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-icons"
                                    role="button">
                                    <span key="t-icons">Icons</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-icons">
                                    <a href="{% url 'icons-boxicons' %}" class="dropdown-item"
                                        key="t-boxicons">Boxicons</a>
                                    <a href="{% url 'icons-materialdesign' %}" class="dropdown-item"
                                        key="t-material-design">Material Design</a>
                                    <a href="{% url 'icons-dripicons' %}" class="dropdown-item"
                                        key="t-dripicons">Dripicons</a>
                                    <a href="{% url 'icons-fontawesome' %}" class="dropdown-item"
                                        key="t-font-awesome">Font
                                        Awesome</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-map"
                                    role="button">
                                    <span key="t-maps">Maps</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-map">
                                    <a href="{% url 'maps-googlemaps' %}" class="dropdown-item"
                                        key="t-g-maps">Google Maps</a>
                                    <a href="{% url 'maps-vectormaps' %}" class="dropdown-item"
                                        key="t-v-maps">Vector Maps</a>
                                    <a href="{% url 'maps-leafletmaps' %}" class="dropdown-item"
                                        key="t-l-maps">Leaflet Maps</a>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-uielement" role="button">
                            <i class="bx bx-tone me-2"></i>
                            <span key="t-ui-elements"> Authentication</span>
                            <div class="arrow-down"></div>
                        </a>

                        <div class="dropdown-menu mega-dropdown-menu px-2 dropdown-mega-menu-lg"
                            aria-labelledby="topnav-uielement">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div>
                                        <a class="dropdown-item" href="{% url 'authlogin' %}" key="t-login">Login</a>
                            
                                        <a class="dropdown-item" href="{% url 'authlogin2' %}" key="t-login-2">Login 2</a>
                            
                                        <a class="dropdown-item" href="{% url 'authregister' %}" key="t-register">Register</a>
                            
                                        <a class="dropdown-item" href="{% url 'authlregister2' %}" key="t-register-2">Register 2</a>
                            
                                        <a class="dropdown-item" href="{% url 'authrecoverpw' %}" key="t-recover-password">Recover Password</a>
                            
                                        <a class="dropdown-item" href="{% url 'authrecoverpw2' %}" key="t-recover-password-2">Recover Password 2</a>
                            
                                        <a class="dropdown-item" href="{% url 'authlockscreen' %}" key="t-lock-screen">Lock Screen</a>
                            
                                        <a class="dropdown-item" href="{% url 'authlockscreen2' %}" key="t-lock-screen-2">Lock Screen 2</a>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div>
                                        <a class="dropdown-item" href="{% url 'passwordchange' %}" key="">Change Password</a>
                            
                                        <a class="dropdown-item" href="{% url 'passwordchange2' %}" key="">Change Password 2</a>
                                        <a class="dropdown-item" href="{% url 'confirmmail' %}" key="t-confirm-mail">Confirm Mail</a>
                            
                                        <a class="dropdown-item" href="{% url 'confirmmail2' %}" key="t-confirm-mail-2">Confirm Mail 2</a>
                            
                                        <a class="dropdown-item" href="{% url 'emailverificaton' %}" key="t-email-verification">Email
                                            Verification</a>
                            
                                        <a class="dropdown-item" href="{% url 'emailverificaton2' %}" key="t-email-verification-2">Email
                                            Verification 2</a>
                            
                                        <a class="dropdown-item" href="{% url 'twostepverification' %}" key="t-two-step-verification">Two Step
                                            Verification</a>
                            
                                        <a class="dropdown-item" href="{% url 'twostepverification2' %}" key="t-two-step-verification-2">Two Step
                                            Verification 2 </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-more" role="button">
                            <i class="bx bx-file me-2"></i><span key="t-extra-pages">Utility</span>
                            <div class="arrow-down"></div>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="topnav-utility">
                            <a href="{% url 'utility-starterpage' %}" class="dropdown-item"
                                key="t-starter-page">Starter
                                Page</a>
                            <a href="{% url 'utility-maintainance' %}" class="dropdown-item"
                                key="t-maintenance">Maintenance</a>
                            <a href="{% url 'utility-comingsoon' %}" class="dropdown-item"
                                key="t-coming-soon">Coming
                                Soon</a>
                            <a href="{% url 'utility-timeline' %}" class="dropdown-item"
                                key="t-timeline">Timeline</a>
                            <a href="{% url 'utility-faq' %}" class="dropdown-item" key="t-faqs">FAQs</a>
                            <a href="{% url 'utility-pricing' %}" class="dropdown-item"
                                key="t-pricing">Pricing</a>
                            <a href="{% url 'utility-404error' %}" class="dropdown-item" key="t-error-404">Error
                                404</a>
                            <a href="{% url 'utility-500error' %}" class="dropdown-item" key="t-error-500">Error
                                500</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle arrow-none" href="#" id="topnav-layout" role="button">
                            <i class="bx bx-layout me-2"></i><span key="t-layouts">Layouts</span>
                            <div class="arrow-down"></div>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="topnav-layout">
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-layout-verti"
                                    role="button">
                                    <span key="t-vertical">Vertical</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-layout-verti">
                                    <a href="{% url 'light_sidebar' %}" class="dropdown-item"
                                        key="t-light-sidebar">Light Sidebar</a>
                                    <a href="{% url 'compact_sidebar' %}" class="dropdown-item"
                                        key="t-compact-sidebar">Compact Sidebar</a>
                                    <a href="{% url 'icon_sidebar' %}" class="dropdown-item" key="t-icon-sidebar">Icon
                                        Sidebar</a>
                                    <a href="{% url 'boxed_width_sidebar' %}" class="dropdown-item"
                                        key="t-boxed-width">Boxed
                                        Width</a>
                                    <a href="{% url 'preloader_sidebar' %}" class="dropdown-item"
                                        key="t-preloader">Preloader</a>
                                    <a href="{% url 'colored_sidebar' %}" class="dropdown-item"
                                        key="t-colored-sidebar">Colored Sidebar</a>
                                    <a href="{% url 'scrollable_sidebar' %}" class="dropdown-item"
                                        key="t-scrollable">Scrollable</a>
                                </div>
                            </div>
                            <div class="dropdown">
                                <a class="dropdown-item dropdown-toggle arrow-none" href="#" id="topnav-layout-hori"
                                    role="button">
                                    <span key="t-horizontal">Horizontal</span>
                                    <div class="arrow-down"></div>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="topnav-layout-hori">
                                    <a href="{% url 'horizontal' %}" class="dropdown-item"
                                        key="t-horizontal">Horizontal</a>
                                    <a href="{% url 'hori_topbar_light' %}" class="dropdown-item"
                                        key="t-topbar-light">Topbar light</a>
                                    <a href="{% url 'hori_boxed_width' %}" class="dropdown-item"
                                        key="t-boxed-width">Boxed width</a>
                                    <a href="{% url 'hori_preloader' %}" class="dropdown-item"
                                        key="t-preloader">Preloader</a>
                                    <a href="{% url 'hori_colored_header' %}" class="dropdown-item"
                                        key="t-colored-topbar">Colored Header</a>
                                    <a href="{% url 'hori_scrollable' %}" class="dropdown-item"
                                        key="t-scrollable">Scrollable</a>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </nav>
    </div>
</div>
{%endblock%}