@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
82 lines (80 loc) • 3.23 kB
HTML
<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="left" animation="arrow-left" class="_lg:hidden" />
</i-navbar>
</i-layout-header>
<i-layout vertical class="_padding-top:1/2">
<i-sidebar v-model="left" placement="left">
<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>
Left 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>
<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="right" animation="arrow-left" class="_lg:hidden" />
</i-navbar>
</i-layout-header>
<i-layout vertical class="_padding-top:1/2">
<i-layout-content>
<i-container fluid>
<i-row>
<i-column>
<h1>
Right 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-sidebar v-model="right" placement="right">
<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>
</i-layout>
</div>