<aside class="sidebar">
    <nav class="navbar">
        <a class="navbar-brand brand-title" href="#">
            <img src="assets/images/light.png" alt="" class="logo"> Moss
        </a>
    </nav>
    <nav class="navigation shadow-sm">
        <div class="navigation-arrow">
            <i class="material-icons">chevron_left</i>
        </div>
        <ul>
            <li>
                <a href="index.html" class="@@if(active == 'ecommerce') {active}">
                    <span class="icon material-icons">shopping_basket</span>
                    <span class="text">eCommerce</span>
                </a>
            </li>
            <li>
                <a href="index-2.html" class="@@if(active == 'health-care') {active}">
                    <span class="icon material-icons">local_convenience_store</span>
                    <span class="text">Health Care</span>
                </a>
            </li>
            <li>
                <a href="index-3.html" class="@@if(active == 'crm') {active}">
                    <span class="icon material-icons">book_online</span>
                    <span class="text">CRM</span>
                </a>
            </li>
            <li class="separator">
                <span>Applications & Pages</span>
            </li>
            <li>
                <a href="#collapseSubmenu1" class="" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">apps</span>
                    <span class="text">Applications</span>
                </a>
                <ul class="collapse" id="collapseSubmenu1">
                    <li>
                        <a href="mail.html" class="@@if(active == 'mail') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Mailbox</span>
                            <span class="badge badge-transparent-danger">1</span>
                        </a>
                    </li>
                    <li>
                        <a href="calendar.html" class="@@if(active == 'calendar') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Calendar</span>
                        </a>
                    </li>
                    <li>
                        <a href="kanban.html" class="@@if(active == 'kanban') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Kanban</span>
                        </a>
                    </li>
                    <li>
                        <a href="contacts.html" class="@@if(active == 'contacts') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Contacts</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#authenticationPage" class="" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">verified_user</span>
                    <span class="text">Authentication</span>
                </a>
                <ul class="collapse" id="authenticationPage">
                    <li>
                        <a href="login.html" class="">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Login</span>
                        </a>
                    </li>
                    <li>
                        <a href="register.html" class="">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Register</span>
                        </a>
                    </li>
                    <li>
                        <a href="relogin.html" class="">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Re Login</span>
                        </a>
                    </li>
                    <li>
                        <a href="reset.html" class="">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Forgot Password</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#errorPages" class="" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">error</span>
                    <span class="text">Error Pages</span>
                </a>
                <ul class="collapse" id="errorPages">
                    <li>
                        <a href="403.html" target="_blank" class="@@if(active == '403-page') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">403 Page</span>
                        </a>
                    </li>
                    <li>
                        <a href="404.html" target="_blank" class="@@if(active == '404-page') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">404 Page</span>
                        </a>
                    </li>
                    <li>
                        <a href="500.html" target="_blank" class="@@if(active == '500-page') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">500 Page</span>
                        </a>
                    </li>
                    <li>
                        <a href="503.html" target="_blank" class="@@if(active == '503-page') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">503 Page</span>
                        </a>
                    </li>
                </ul>
            </li>


            <li class="separator">
                <span>UI Elements & Components</span>
            </li>
            <li>
                <a href="#uiElements" class="" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">extension</span>
                    <span class="text">Elements</span>
                </a>
                <ul class="collapse" id="uiElements">
                   
                    <li>
                        <a href="alerts.html" class="@@if(active == 'alerts') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Alerts</span>
                        </a>
                    </li>

                    <li>
                        <a href="badges.html" class="@@if(active == 'badges') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Badges</span>
                        </a>
                    </li>
                    <li>
                        <a href="buttons.html" class="@@if(active == 'buttons') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Buttons</span>
                        </a>
                    </li>
                    <li>
                        <a href="cards.html" class="@@if(active == 'cards') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Cards</span>
                        </a>
                    </li>

                    <li>
                        <a href="context-menu.html" class="@@if(active == 'context-menu') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Context menu</span>
                        </a>
                    </li>


                    <li>
                        <a href="icons.html" class="@@if(active == 'icons') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Icons</span>
                        </a>
                    </li>

                    <li>
                        <a href="typography.html" class="@@if(active == 'typography') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Typography</span>
                        </a>
                    </li>
                    <li>
                        <a href="flex-grid.html" class="@@if(active == 'flex-grid') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Flexbox Grids</span>
                        </a>
                    </li>
                    <li>
                        <a href="spinners.html" class="@@if(active == 'spinners') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Spinners</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#uiComponents" class="" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">backup_table</span>
                    <span class="text">Components</span>
                </a>
                <ul class="collapse" id="uiComponents">
                    <li>
                        <a href="accordians.html" class="@@if(active == 'accordians') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Accordians</span>
                        </a>
                    </li>
                    <li>
                        <a href="avatar.html" class="@@if(active == 'avatar') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Avatar</span>
                        </a>
                    </li>
                    <li>
                        <a href="colors.html" class="@@if(active == 'colors') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Colors</span>
                        </a>
                    </li>
                    <li>
                        <a href="modals.html" class="@@if(active == 'modals') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Modals</span>
                        </a>
                    </li>
                    <li>
                        <a href="notifications.html" class="@@if(active == 'notifications') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Notifications</span>
                        </a>
                    </li>
                    <li>
                        <a href="tabs.html" class="@@if(active == 'tabs') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Tabs & Pills</span>
                        </a>
                    </li>
                    <li>
                        <a href="timeline.html" class="@@if(active == 'timeline') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Timeline</span>
                        </a>
                    </li>
                    <li>
                        <a href="tooltips.html" class="@@if(active == 'tooltips') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Tooltips & Popovers</span>
                        </a>
                    </li>
                </ul>

            </li>

            <li>
                <a href="#formStuff" class="" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">assignment</span>
                    <span class="text">Form Stuff</span>
                </a>
                <ul class="collapse" id="formStuff">
                    <li>
                        <a href="forms.html" class="@@if(active == 'forms') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Form Styling</span>
                        </a>
                    </li>
                    <li>
                        <a href="validations.html" class="@@if(active == 'validations') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Validation</span>
                        </a>
                    </li>
                    <li>
                        <a href="pickers.html" class="@@if(active == 'pickers') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Pickers</span>
                        </a>
                    </li>
                    <li>
                        <a href="uploaders.html" class="@@if(active == 'uploaders') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Uploader</span>
                        </a>
                    </li>
                    <li>
                        <a href="wysiwyg.html" class="@@if(active == 'wysiwyg') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">WYSIWYG Editors</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#data-grid-menu" class="" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">grid_on</span>
                    <span class="text">Data Grids</span>
                </a>
                <ul class="collapse" id="data-grid-menu">
                    <li>
                        <a href="tables.html" class="@@if(active == 'tables') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Simple Table</span>
                        </a>
                    </li>
                    <li>
                        <a href="data-tables.html" class="@@if(active == 'data-tables') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Data Tables</span>
                        </a>
                    </li>
                </ul>
            </li>

            <li>
                <a href="#charts-menu" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">bar_chart</span>
                    <span class="text">Charts</span>
                </a>
                <ul class="collapse" id="charts-menu">
                    <li>
                        <a href="apex-charts.html" class="@@if(active == 'apex-charts') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">ApexCharts</span>
                        </a>
                    </li>
                    <li>
                        <a href="chart-js.html" class="@@if(active == 'chart-js') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Chart.js</span>
                        </a>
                    </li>
                    
                </ul>
            </li>
            <li>
                <a href="#maps-menu" data-toggle="collapse">
                    <span class="caret material-icons">arrow_right</span>
                    <span class="icon material-icons">map</span>
                    <span class="text">Maps</span>
                </a>
                <ul class="collapse" id="maps-menu">
                    <li>
                        <a href="google-maps.html" class="@@if(active == 'google-maps') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Google Maps</span>
                        </a>
                    </li>
                    <li>
                        <a href="vector-maps.html" class="@@if(active == 'vector-maps') {active}">
                            <span class="icon material-icons">remove</span>
                            <span class="text">Vector Maps</span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
        <div class="navigation-arrow right">
            <i class="material-icons">chevron_right</i>
        </div>
    </nav>
</aside>