SidebarDrawer

If you want to make the sidebar collapsable, there is a SidebarDrawer component that can do that for you.

Prerequisites

If you wish to use the SidebarDrawer, a new dependency is required. Make sure to install portal-vue@^2

$ yarn add -D portal-vue@^2

Example

Import the component in your project. Most probably, you are using it in the Default-layout. You can find the file in the layouts folder of your project.

<template>
  <Context>
    <section class="page">
      <SidebarDrawer>
        <template #sidebar>
          <Sidebar class="page__sidebar" />
        </template>
        <template #content>
          <Nuxt class="page__content" />
        </template>
      </SidebarDrawer>
    </section>
  </Context>
</template>

<script>
import { Context, Sidebar, SidebarDrawer } from '@jdi/vue-backoffice-library'

export default {
  name: 'Default',
  components: {
    Context,
    Sidebar,
    SidebarDrawer
  }
}
</script>