brandv1.0
Utilities
Data Display
Data Entry
Feedback

Drawer

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

HkDrawer Configuration

Before using HkDrawer, please add HkDrawerContainer to MainLayout, like:

               
//app.vue               
<script setup>
import MainLayout from "./layout/MainLayout/MainLayout.vue";
import HkDrawerContainer from "@/hk-components/@hk-drawer-container/HkDrawerContainer.vue";
</script>

<template>
    <MainLayout>
        <!-- custom drawer container -->
        <HkDrawerContainer >
        <NuxtPage />
    </MainLayout>
</template>
Drawer Types

We have two types of drawer: overlay and push.

							
                                
<template>
    <div>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerOverlay">
          Drawer Overlay
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="handleDrawerPush">
          Drawer Push
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="handleDrawerPushFull">
          Drawer push full
        </BButton>
    </div>
</template>

<script setup>
import { useDrawerStore } from '@/store/drawer';

const drawerStore = useDrawerStore();

const drawerOverlay = () => {
  drawerStore.setDrawerContents({
    status: true,
    rootClass: "",
    classes: "drawer-right",
    title: "Drawer Overlay",
    text: "With supporting text below as a natural lead-in to additional content.",
    footer: "Footer text",
    backdrop: true,
  });
};

const handleDrawerPush = () => {
  drawerStore.setDrawerContents({
    status: true,
    rootClass: "hk-drawer-push hk-drawer-pushright",
    classes: "drawer-small drawer-right border-top",
    title: "Drawer Push",
    text: "With supporting text below as a natural lead-in to additional content."
  });
};

const handleDrawerPushFull = () => {
  drawerStore.setDrawerContents({
    status: true,
    rootClass: "hk-drawer-push hk-drawer-wth-nav-push hk-drawer-pushright",
    classes: "drawer-right",
    title: "Drawer push with Nav",
    text: "With supporting text below as a natural lead-in to additional content."
  });
};
</script>
Direction

The drawer has two directions, left and right.

							
                                
<template>
    <div>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerOverlayLeft">
          Drawer Overlay Left
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerOverlayRight">
          Drawer Overlay Right
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerPushLeft">
          Drawer Push Left
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerPushRight">
          Drawer push Right
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerNavPushLeft">
          Drawer Push Nav Left
        </BButton>
        <BButton variant="primary" class="drawer-toggle-link" @click="drawerNavPushRight">
          Drawer push Nav Right
        </BButton>
    </div>
</template>

<script setup>
import { useDrawerStore } from '@/store/drawer';

const drawerStore = useDrawerStore();

const drawerOverlayLeft() {
    drawerStore.setDrawerContents({
        status: true,
        rootClass: "",
        classes: "drawer-overlay drawer-left",
        title: "Drawer Overlay",
        text: "With supporting text below as a natural lead-in to additional content."
    });
},

const drawerOverlayRight() {
    drawerStore.setDrawerContents({
        status: true,
        rootClass: "",
        classes: "drawer-overlay drawer-right",
        title: "Drawer Overlay",
        text: "With supporting text below as a natural lead-in to additional content."
    });
},

const drawerPushLeft() {
    drawerStore.setDrawerContents({
        status: true,
        rootClass: "hk-drawer-push hk-drawer-pushleft",
        classes: "drawer-small drawer-left border-top",
        title: "Drawer Push",
        text: "With supporting text below as a natural lead-in to additional content."
    });
},

const drawerPushRight() {
    drawerStore.setDrawerContents({
        status: true,
        rootClass: "hk-drawer-push hk-drawer-pushright",
        classes: "drawer-small drawer-right border-top",
        title: "Drawer Push",
        text: "With supporting text below as a natural lead-in to additional content."
    });
},

const drawerNavPushLeft() {
    drawerStore.setDrawerContents({
        status: true,
        rootClass: "hk-drawer-push hk-drawer-wth-nav-push hk-drawer-pushleft",
        classes: "drawer-left",
        title: "Drawer push with Nav",
        text: "With supporting text below as a natural lead-in to additional content."
    });
},

const drawerNavPushRight() {
    drawerStore.setDrawerContents({
        status: true,
        rootClass: "hk-drawer-push hk-drawer-wth-nav-push hk-drawer-pushright",
        classes: "drawer-right",
        title: "Drawer push with Nav",
        text: "With supporting text below as a natural lead-in to additional content."
    });
}
</script>