@inkline/inkline/components/ISidebar/examples/collapse-position.demo.html

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

<div>
    <i-layout>
        <i-layout-header>
            <i-navbar fluid :collapse="false">
                <i-navbar-brand :to="{ name: 'docs-components-sidebar' }">
                    Dashboard
                </i-navbar-brand>
                <i-hamburger-menu v-model="relative" animation="arrow-left" />
            </i-navbar>
        </i-layout-header>
        <i-layout vertical class="_padding-top:1/2">
            <i-sidebar v-model="relative" :collapse="true" collapse-position="relative">
                <i-nav vertical>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        Home
                    </i-nav-item>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        About
                    </i-nav-item>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        Contact
                    </i-nav-item>
                </i-nav>
            </i-sidebar>
            <i-layout-content>
                <i-container fluid>
                    <i-row>
                        <i-column>
                            <h1>
                                Sidebar Collapse Relative
                            </h1>
                            <p>
                                Example content for a page with a sidebar that collapses on large screens, 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>

    <i-layout>
        <i-layout-header>
            <i-navbar fluid :collapse="false">
                <i-navbar-brand :to="{ name: 'docs-components-sidebar' }">
                    Dashboard
                </i-navbar-brand>
                <i-hamburger-menu v-model="absolute" animation="arrow-left" />
            </i-navbar>
        </i-layout-header>
        <i-layout vertical class="_padding-top:1/2">
            <i-sidebar v-model="absolute" :collapse="true" collapse-position="absolute">
                <i-nav vertical>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        Home
                    </i-nav-item>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        About
                    </i-nav-item>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        Contact
                    </i-nav-item>
                </i-nav>
            </i-sidebar>
            <i-layout-content>
                <i-container fluid>
                    <i-row>
                        <i-column>
                            <h1>
                                Sidebar Collapse Absolute
                            </h1>
                            <p>
                                Example content for a page with a sidebar that collapses on large screens, 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>

    <i-layout>
        <i-layout-header>
            <i-navbar fluid :collapse="false">
                <i-navbar-brand :to="{ name: 'docs-components-sidebar' }">
                    Dashboard
                </i-navbar-brand>
                <i-hamburger-menu v-model="fixed" animation="arrow-left" />
            </i-navbar>
        </i-layout-header>
        <i-layout vertical class="_padding-top:1/2">
            <i-sidebar v-model="fixed" :collapse="true" collapse-position="fixed">
                <i-nav vertical>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        Home
                    </i-nav-item>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        About
                    </i-nav-item>
                    <i-nav-item :to="{ name: 'docs-components-sidebar' }">
                        Contact
                    </i-nav-item>
                </i-nav>
            </i-sidebar>
            <i-layout-content>
                <i-container fluid>
                    <i-row>
                        <i-column>
                            <h1>
                                Sidebar Collapse Fixed
                            </h1>
                            <p>
                                Example content for a page with a sidebar that collapses on large screens, 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>
</div>