76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useDisplay } from 'vuetify'
|
|
import { useMailUiStore } from '@/stores/mailUiStore'
|
|
import FolderView from '@/components/FolderView.vue'
|
|
import type { CollectionObject } from '@MailManager/models/collection'
|
|
|
|
const display = useDisplay()
|
|
const isMobile = computed(() => display.mdAndDown.value)
|
|
|
|
const mailUiStore = useMailUiStore()
|
|
const { sidebarVisible, selectedFolder } = storeToRefs(mailUiStore)
|
|
|
|
const handleCompose = () => mailUiStore.openComposer()
|
|
|
|
const handleFolderSelect = (folder: CollectionObject) => mailUiStore.selectFolder(folder)
|
|
|
|
const handleSettingsOpen = () => mailUiStore.settingsOpen()
|
|
</script>
|
|
|
|
<template>
|
|
<v-navigation-drawer
|
|
v-model="sidebarVisible"
|
|
contained
|
|
:permanent="sidebarVisible && !isMobile"
|
|
:temporary="isMobile"
|
|
width="280"
|
|
class="mail-sidebar"
|
|
>
|
|
<div class="pa-3 pb-0">
|
|
<!-- Primary action -->
|
|
<v-btn
|
|
block
|
|
color="primary"
|
|
variant="tonal"
|
|
prepend-icon="mdi-pencil"
|
|
class="justify-start"
|
|
@click="handleCompose"
|
|
>
|
|
Compose
|
|
</v-btn>
|
|
</div>
|
|
|
|
<!-- Folders -->
|
|
<FolderView
|
|
:selected-folder="selectedFolder"
|
|
@select="handleFolderSelect"
|
|
/>
|
|
|
|
<!-- Pinned utility footer -->
|
|
<template #append>
|
|
<v-divider />
|
|
<div class="pa-2">
|
|
<v-btn
|
|
block
|
|
variant="text"
|
|
size="small"
|
|
prepend-icon="mdi-cog"
|
|
class="justify-start text-medium-emphasis"
|
|
@click="handleSettingsOpen"
|
|
>
|
|
Settings
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mail-sidebar {
|
|
border-right: 1px solid rgb(var(--v-border-color));
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|