Drawer

1<script setup lang="ts">2import { Button, Drawer } from '@vitral/vue';3import { ref } from 'vue';4 5type Position = 'left' | 'right' | 'top' | 'bottom' | 'full';6 7const visible = ref(false);8const position = ref<Position>('left');9const positions: Position[] = ['left', 'right', 'top', 'bottom', 'full'];10const links = ['Inbox', 'Drafts', 'Sent', 'Archive', 'Trash'];11 12function open(where: Position) {13    position.value = where;14    visible.value = true;15}16</script>17 18<template>19    <Button v-for="p in positions" :key="p" :label="p" severity="secondary" :icon="p === 'full' ? 'maximize' : 'sidebar'" @click="open(p)" />20    <Drawer v-model:visible="visible" header="Mail" :position="position">21        <nav aria-label="Folders" style="display: flex; flex-direction: column; gap: 2px">22            <a v-for="link in links" :key="link" href="#" class="demo-drawer-link" @click.prevent="visible = false">{{ link }}</a>23        </nav>24        <template #footer>25            <Button label="Compose" icon="pencil" fluid @click="visible = false" />26        </template>27    </Drawer>28</template>29 30<style scoped>31.demo-drawer-link {32    padding: var(--vt-navigation-item-padding);33    border-radius: var(--vt-navigation-item-border-radius);34    color: var(--vt-navigation-item-color);35    text-decoration: none;36}37 38.demo-drawer-link:hover {39    background: var(--vt-navigation-item-focus-background);40}41 42.demo-drawer-link:focus-visible {43    outline: var(--vt-focus-ring-width) var(--vt-focus-ring-style) var(--vt-focus-ring-color);44    outline-offset: -2px;45}46</style>