Sidebar

Sidebar with state memory.

Usage

Component out of the box provide a hide/show button.
By default, it is places in top right corner and uses vega icon, but you can override this.
In addition, the sidebar saves its show/hide state in local storage, so when page reloads, it will be in same state as before.

Simple example:

<template>
  <div style="height: 100vh">
    <VegaLayout
      header-background="#646CFF23"
      aside-left-background="#8E96AA23"
    >
      <template #aside-left>
        <VegaSidebar name="my-sidebar" title="SIDEBAR" />
      </template>
      <template #default>
        <VegaLoremIpsum />
      </template>
    </VegaLayout>
  </div>
</template>

<script setup>
  import { VegaLayout, VegaSidebar, VegaLoremIpsum } from 'vega-ui'
  import 'vega-ui/dist/style.css'
</script>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. Eget arcu dictum varius duis at consectetur lorem donec. Justo donec enim diam vulputate ut. Amet nisl purus in mollis nunc sed id semper risus. Amet nisl purus in mollis nunc sed. Ac tortor dignissim convallis aenean. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Tellus mauris a diam maecenas sed enim ut. Dictum at tempor commodo ullamcorper a. Etiam tempor orci eu lobortis elementum nibh tellus. Sed adipiscing diam donec adipiscing tristique risus nec. Lacus luctus accumsan tortor posuere. Suspendisse faucibus interdum posuere lorem ipsum dolor sit. Porta lorem mollis aliquam ut porttitor leo. In nibh mauris cursus mattis molestie. Odio euismod lacinia at quis risus sed vulputate odio ut. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Scelerisque in dictum non consectetur a erat. Id aliquet lectus proin nibh nisl condimentum. Aenean euismod elementum nisi quis eleifend quam. Tellus at urna condimentum mattis pellentesque id. Eget sit amet tellus cras adipiscing enim. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Vel pharetra vel turpis nunc. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Amet justo donec enim diam vulputate. Congue nisi vitae suscipit tellus mauris a diam. Aenean pharetra magna ac placerat vestibulum. Eu volutpat odio facilisis mauris sit. Curabitur vitae nunc sed velit dignissim sodales. Feugiat in ante metus dictum at tempor. Imperdiet proin fermentum leo vel orci porta. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue mauris rhoncus aenean. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Nunc lobortis mattis aliquam faucibus purus in. Sagittis nisl rhoncus mattis rhoncus urna. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Risus ultricies tristique nulla aliquet enim tortor at auctor. Sit amet risus nullam eget. Nibh mauris cursus mattis molestie. Blandit turpis cursus in hac habitasse platea dictumst quisque sagittis. Purus non enim praesent elementum facilisis leo. Massa vitae tortor condimentum lacinia quis. Ultrices sagittis orci a scelerisque purus semper eget duis. Ullamcorper a lacus vestibulum sed arcu non odio. Lobortis feugiat vivamus at augue eget arcu. Eget velit aliquet sagittis id. Eget magna fermentum iaculis eu non diam phasellus. In egestas erat imperdiet sed euismod. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Risus in hendrerit gravida rutrum quisque non tellus orci. Lobortis scelerisque fermentum dui faucibus in. Vitae auctor eu augue ut lectus. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Ac turpis egestas maecenas pharetra convallis. Malesuada proin libero nunc consequat interdum varius sit amet. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Malesuada fames ac turpis egestas sed. Eget arcu dictum varius duis at consectetur lorem donec. Enim sed faucibus turpis in eu. Aenean pharetra magna ac placerat. Arcu dictum varius duis at consectetur lorem donec massa sapien. Porttitor eget dolor morbi non arcu. Interdum velit euismod in pellentesque massa placerat duis ultricies. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Laoreet id donec ultrices tincidunt arcu non. Sed velit dignissim sodales ut eu sem integer vitae. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Integer quis auctor elit sed vulputate mi sit amet. Dui ut ornare lectus sit amet est placerat in egestas. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Vehicula ipsum a arcu cursus vitae. Pretium aenean pharetra magna ac placerat vestibulum lectus. Gravida cum sociis natoque penatibus et magnis.

Props

Prop	Type	Default	Description
name	String	vega-sidebar	Name of the sidebar, used as a key for storing the state in local storage.
title	String	''	The title of the sidebar.
width	String	350px	Width of the sidebar in its opened state.
width-min	String	calc(2rem * 2 + 24px)	Width of the sidebar in its closed state.
header-height	String	80px	Height of the sidebar's header.
header-padding	String	0 2rem	Header padding.
header-border	String	none	Header border.
header-right	Boolean	false	Arrange sidebar header elements in order: toggle > gap > title.
header-gap	String	8px	Gap between toggle and title. Works only if header-right passed.
content-padding	String	0 2rem	Sidebar content padding.
gap	String	16px	Gap between the sidebar's header and content.
background	String	none	Background of the sidebar. Accepts HEX, RGB values.
toggle-icon-color	String	var(--vega-border-color)	Toggle icon color.
scrollbar-color	String	var(--vega-border-color)	Scrollbar color

name

• Type: String
• Default: vega-sidebar

Name of sidebar. Used as a key to store state of sidebar in local storage. You can pass any string.

<VegaSidebar name="left-sidebar-1" />

title

• Type: String
• Default: ''

The title of the sidebar.

<VegaSidebar title="My title" />

width

• Type: String
• Default: 350px

Width of the sidebar in its opened state

<VegaSidebar width="300px" />

width-min

Width of the sidebar in its closed state.

• Type: String
• Default: calc(2rem * 2 + 24px)

<VegaSidebar width-min="0" />

header-height

Height of the sidebar's header.

• Type: String
• Default: 80px

<VegaSidebar header-height="100px" />

header-padding

Header padding.

• Type: String
• Default: 0 2rem

<VegaSidebar header-padding="0 20px" />

header-border

• Type: String
• Default: none

Header border.

<VegaSidebar header-border="1px var(--vega-border-color) solid" />

content-padding

Content padding.

• Type: String
• Default: 0 2rem

<VegaSidebar content-padding="0 20px" />

gap

Gap between the sidebar's header and content.

• Type: String
• Default: 16px

<VegaSidebar gap="0" />

background

Background of the sidebar. Accepts HEX, RGB values.

• Type: String
• Default: none

<VegaSidebar background="#fff" />

header-right

Arrange sidebar header elements in order: toggle > gap > title. Gap ba default is 8px and can be changed through header-gap prop.

• Type: Boolean
• Default: false

<VegaSidebar header-right />

header-gap

Gap between toggle and title. Works only if header-right passed.

• Type: String
• Default: 8px

<VegaSidebar header-gap="20px" />

toggle-icon-color

• type: String
• Defaults: var(--vega-border-color)

Toggle icon color.

<VegaSidebar toggle-icon-color="red" />

scrollbar-color

• Type: String
• Default: var(--vega-border-color)

Scrollbar color.

<VegaSidebar scrollbar-color="#638cc7" />

Slots

Slot	Description
default	Content of the sidebar.
header	Custom content for the sidebar header.
title	Custom title content.
toggle-button	Custom toggle button content.
toggle-icon	Custom toggle button icon.

default

Sidebar content

Example

<VegaSidebar>
  <div>My sidebar content</div>
</VegaSidebar>

header

Header custom content.

Example

<VegaSidebar>
  <template #header>
    <div>SIDEBAR HEADER</div>
  </template>
</VegaSidebar>

title

Custom title.

Example

<VegaSidebar>
  <template #title>
    <div>Custom title</div>
  </template>
</VegaSidebar>

toggle-button

Custom toggle button.

Example

<VegaSidebar>
  <template #toggle-button>
    <button>click me!</button>
  </template>
</VegaSidebar>

toggle-icon

Custom toggle icon.

Example

<VegaSidebar>
  <template #toggle-button-icon>
    <MyCustomIcon />
  </template>
</VegaSidebar>