Sidebar

A sidebar to use as left/right overlay or static

Examples

Base

Show code

HTML

<section>
    <o-field grouped>
        <o-switch v-model="overlay" label="Overlay" />
        <o-switch v-model="fullheight" label="Fullheight" />
        <o-switch v-model="fullwidth" label="Fullwidth" />
        <o-switch v-model="teleport" label="On body" />
        <o-field label="Position">
            <o-select v-model="position">
                <option value="left">Left</option>
                <option value="right">Right</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
            </o-select>
        </o-field>
    </o-field>

    <o-button label="Show" @click="active = true" />

    <o-sidebar
        v-slot="{ close }"
        v-model:active="active"
        :fullheight="fullheight"
        :fullwidth="fullwidth"
        :overlay="overlay"
        :position="position"
        :teleport="teleport">
        <o-button
            v-if="fullwidth || fullheight || !overlay"
            icon-left="times"
            label="Close"
            @click="close()" />
        <img
            width="128"
            src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4"
            alt="Lightweight UI components for Vue.js" />
        <h3>Example</h3>
    </o-sidebar>
</section>

JS

import { ref } from "vue";

const active = ref(false);
const overlay = ref(true);
const fullheight = ref(true);
const fullwidth = ref(false);
const teleport = ref(false);
const position = ref<"left" | "top" | "bottom" | "right">("left");

Inline

Show code

HTML

<section class="sidebar-page">
    <div class="sidebar-layout">
        <o-sidebar
            inline
            :mobile="mobile"
            :expand-on-hover="expandOnHover"
            :reduce="reduce"
            active>
            <img
                width="128"
                src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4"
                alt="Lightweight UI components for Vue.js" />
            <section style="padding: 1em">
                <h5>Example 1</h5>
                <h5>Example 2</h5>
                <h5>Example 3</h5>
                <h5>Example 4</h5>
                <h5>Example 5</h5>
            </section>
        </o-sidebar>
    </div>

    <div class="sidebar-layout">
        <o-field>
            <o-switch v-model="reduce" label="Reduced" />
        </o-field>
        <o-field>
            <o-switch v-model="expandOnHover" label="Expand on hover" />
        </o-field>
        <br />
        <o-field label="Mobile Layout">
            <o-select v-model="mobile">
                <option :value="null"></option>
                <option value="reduced">Reduced</option>
                <option value="hidden">Hidden</option>
                <option value="fullwidth">Fullwidth</option>
            </o-select>
        </o-field>
    </div>
</section>

JS

import { ref } from "vue";

const mobile = ref<"reduced" | "fullwidth" | "hidden">("reduced");
const expandOnHover = ref(false);
const reduce = ref(false);

SCSS

.sidebar-page {
    display: flex;
    flex-direction: row;
    width: 100%;

    .sidebar-layout {
        padding: 1rem;
        flex-basis: 50%;
    }
}

Programmatically

Show code

HTML

<section class="odocs-spaced">
    <o-button
        label="Open Sidebar (HTML)"
        size="medium"
        variant="primary"
        @click="imageSidebar()" />

    <o-button
        label="Open Sidebar (Component)"
        size="medium"
        variant="primary"
        @click="formSidebar()" />
</section>

JS

import { h } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";
import Form from "./_sidebar-form.vue";

const oruga = useOruga();

function imageSidebar(): void {
    const vnode = h("p", { style: { "text-align": "center" } }, [
        h("img", {
            src: "https://avatars2.githubusercontent.com/u/66300512?s=200&v=4",
        }),
    ]);
    oruga.sidebar.open({
        component: vnode,
        fullheight: true,
        overlay: true,
        destroyOnHide: true,
    });
}

function formSidebar(): void {
    oruga.sidebar.open({
        component: Form,
        fullheight: true,
        overlay: true,
        destroyOnHide: true,
    });
}

Class props

'Classes applied to the element'

Sidebar component

A sidebar to use as left/right overlay or static

<o-sidebar></o-sidebar>

Props

Prop name	Description	Type	Values	Default
active	Whether siedbar is active or not, use v-model:active to make it two-way binding	boolean	-	false
animation	Custom animation (transition name)	string	-	From config: sidebar: {   animation: undefined }
cancelable	Is Sidebar cancleable by pressing escape or clicking outside.	boolean | string[]	escape, outside, true, false	From config: sidebar: {   cancelable: ["escape","outside"] }
component	Component to be injected, used to open a component sidebar programmatically. Close sidebar within the component by emitting a 'close' event — emits('close')	any	-
container	DOM element where the sidebar component will be created on (for programmatic usage).	string | HTMLElement	-	From config: sidebar: {   container: "body" }
destroyOnHide	Destroy sidebar on hide	boolean	-	From config: sidebar: {   destroyOnHide: false }
events	Events to be binded to the injected component.	Record<string, any>	-	{}
expandOnHover	Expand sidebar on hover when reduced or mobile is reduce	boolean	-	From config: sidebar: {   expandOnHover: false }
fullheight	Show sidebar in fullheight	boolean	-	From config: sidebar: {   fullheight: false }
fullwidth	Show sidebar in fullwidth	boolean	-	From config: sidebar: {   fullwidth: false }
inline	Display the Sidebear inline	boolean	-	false
mobile	Custom layout on mobile	"fullwidth" | "reduced" | "hidden"	fullwidth, reduced, hidden	From config: sidebar: {   mobile: undefined }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: sidebar: {   mobileBreakpoint: undefined }
onClose	Callback function to call on close (programmatically close or user canceled)	() => void	-	Default function (see source code)
overlay	Show an overlay like modal	boolean	-	From config: sidebar: {   overlay: false }
override	Override existing theme classes completely	boolean	-
position	Sidebar position	"top" | "bottom" | "left" | "right"	top, right, bottom, left	From config: sidebar: {   position: "left" }
props	Props to be binded to the injected component.	Record<string, any>	-
reduce	Show a small sidebar	boolean	-	From config: sidebar: {   reduce: false }
scroll	Use clip to remove the body scrollbar, keep to have a non scrollable scrollbar to avoid shifting background, but will set body to position fixed, might break some layouts.	"keep" | "clip"	keep, clip	From config: sidebar: {   scroll: "clip" }
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	string | boolean | Record<string, any>	-	From config: sidebar: {   teleport: false }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	value any - close event data	on component close event

Slots

Name	Description	Bindings
default	Sidebar default content, default is component prop	close (...args):void - function to close the component

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$sidebar-overlay	hsla(0, 0%, 4%, 0.86)
$sidebar-box-shadow	5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1)
$sidebar-content-background-color	var(--#{$prefix}grey-lighter)
$sidebar-border-radius	var(--#{$prefix}base-border-radius)
$sidebar-border-width	1px
$sidebar-border-color	rgba(0, 0, 0, 0.175)
$sidebar-reduced-width	80px
$sidebar-width	260px
$sidebar-zindex	100

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$sidebar-reduced-width	5rem
$sidebar-reduced-height	10vh

See ➜ 📄 Full scss file