@inkline/inkline/src/components/ISidebar/examples/basic.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-collapsible>
                    <i-collapsible-item title="Menu">
                        <i-nav-item to="/about">
                            Item 1
                        </i-nav-item>
                        <i-nav-item to="/about">
                            Item 2
                        </i-nav-item>
                        <i-nav-item to="/about">
                            Item 3
                        </i-nav-item>
                    </i-collapsible-item>
                </i-collapsible>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>