Sidenav

Collapsed

Use sidebar-nav-compact class to make sidebar compact. See sidebar nav is in action Dashboard layout

<nav class="sidebar-nav">
    <!-- group -->
    <div class="sidebar-nav-group">
        <div class="sidebar-nav-header">General</div>

        <ul class="sidebar-nav-list">
            <li class="sidebar-nav-list-item is-active">
                <a href="#" class="sidebar-nav-list-link">
                    <i class="iconoir-home"></i>
                    <span class="sidebar-nav-list-label">Dashboard</span>
                    <span class="sidebar-nav-list-badge badge">3</span>
                </a>
            </li>
            <li class="sidebar-nav-list-item">
                <a href="#" class="sidebar-nav-list-link">
                    <i class="iconoir-reports-solid"></i>
                    <span class="sidebar-nav-list-label">Reports</span>
                    <span class="sidebar-nav-list-dropdown"></span>
                    <span class="sidebar-nav-list-badge badge">3</span>
                </a>

                <ul class="sidebar-nav-list is-open">
                    <li class="sidebar-nav-list-item">
                        <a href="#" class="sidebar-nav-list-link">
                            <span class="sidebar-nav-list-label">Sales</span>
                        </a>
                    </li>
                    <li class="sidebar-nav-list-item">
                        <a href="#" class="sidebar-nav-list-link">
                            <span class="sidebar-nav-list-label">Expenses</span>
                            <span class="sidebar-nav-list-badge badge">3</span>
                        </a>
                    </li>
                    <li class="sidebar-nav-list-item">
                        <a href="#" class="sidebar-nav-list-link">
                            <span class="sidebar-nav-list-label">Profit</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="sidebar-nav-list-item">
                <a href="#" class="sidebar-nav-list-link">
                    <i class="iconoir-group"></i>
                    <span class="sidebar-nav-list-label">Users</span>
                </a>
            </li>
            <li class="sidebar-nav-list-item">
                <a href="#" class="sidebar-nav-list-link">
                    <i class="iconoir-message-text"></i>
                    <span class="sidebar-nav-list-label">Messages</span>
                    <span class="sidebar-nav-list-badge badge">99</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- group -->

    <!-- group -->
    <div class="sidebar-nav-group">
        <div class="sidebar-nav-header">Others</div>

        <ul class="sidebar-nav-list">
            <li class="sidebar-nav-list-item">
                <a href="#" class="sidebar-nav-list-link">
                    <i class="iconoir-settings"></i>
                    <span class="sidebar-nav-list-label">Settings</span>
                    <span class="sidebar-nav-list-badge badge">3</span>
                </a>
            </li>
            <li class="sidebar-nav-list-item">
                <a href="#" class="sidebar-nav-list-link">
                    <i class="iconoir-headset-help"></i>
                    <span class="sidebar-nav-list-label">Support</span>
                </a>
            </li>
            <li class="sidebar-nav-list-item">
                <a href="#" class="sidebar-nav-list-link">
                    <i class="iconoir-help-circle"></i>
                    <span class="sidebar-nav-list-label">Help</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- group -->
</nav>

Following jQuery code has been used to make it work and yes, I still jQuery because there is nothing wrong with it :) Go ahead and make your presentational component with Angular or React or Vue or god knows what will comes next. Given code is just for demonstration purposes!

class SidebarNav {
    constructor(settings = {}) {
        this.settings = { ...settings };

        this.init();
    }

    init() {
        this.itemClickHandler();
        this.sidebarNavToggleHandler();
    }

    itemClickHandler() {
        const { el, item, itemList, itemLink, itemOpenClassName } =
            this.settings;

        $(el).on("click", itemLink, function (e) {
            const hasSubmenu = $(this).closest(item).find(itemList).length > 0;

            if (hasSubmenu) {
                e.preventDefault();

                $(this)
                    .closest(item)
                    .find(itemList)
                    .toggleClass(itemOpenClassName);
            }
        });
    }

    sidebarNavToggleHandler() {
        const { el, sidebarNavToggleHandler, sidebarNavCompactClassName } =
            this.settings;

        $(sidebarNavToggleHandler).on("click", () => {
            $(el).toggleClass(sidebarNavCompactClassName);
        });
    }
}

new SidebarNav({
    el: ".sidebar-nav",
    item: ".sidebar-nav-list-item",
    itemList: ".sidebar-nav-list",
    itemLink: ".sidebar-nav-list-link",
    itemActiveClassName: "is-active",
    itemOpenClassName: "is-open",
    sidebarNavToggleHandler: ".js-sidebar-toggle",
    sidebarNavCompactClassName: "sidebar-nav-compact",
});

SASS reference

--r-sidebar-nav-header-color: var(--r-global-font-color);
--r-sidebar-group-sep-color: var(--r-layout-border-color);
--r-sidebar-nav-link-color: var(--r-global-font-color);
--r-sidebar-nav-link-hover-color: var(--r-color-white);
--r-sidebar-nav-active-background-color: var(--r-color-light);
--r-sidebar-nav-active-color: var(--r-color-white);