Skip to content

Sidenav

It is a component that acts as a conteaneer for other components - a layout for the panel/Dashboard page.It provides support for the side menu for the mobile version, and keeps Overlay so you don't need to add it globally so that other components can use it.

The component works based on the store sidenav.

Props

withDock
It changes the standard width for Sidebara (288px) to a larger (312px). Ultimately, it is needed to use the Dock component.
type:Boolean
default:false

Slots

default
The main slot for the purpose of router-view
topbar
Slot for the upper poem on the main router-view (default slot)
sidebar
Slot on the left side column in which there may be an element such as a dock or column with router-view

Implementation in the application

Below is a view/layout file created based on Sidenav.

vue
<template>
  <sidenav>
    <template #sidebar>
      <div class="h-full bg-white">Sidebar</div>
    </template>
    <template #topbar> Section over content </template>
    Proper content -
    <span @click="useSidenav.change()">Show the side column</span>
  </sidenav>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Sidenav, useSidenavStore } from '@riupress/ui'
export default defineComponent({
  name: 'UiHome',
  components: {
    Sidenav
  },
  setup() {
    const useSidenav = useSidenavStore()
    return {
      useSidenav
    }
  }
})
</script>

WARNING

Overlay used in the component has an absolute position with props.This is necessary for proper operation for various resolutions and operation of the overlay layer globally because the left side column for the desktop version should be covered by overlay, but should have a larger z-index for the mobile version.