89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useDisplay } from 'vuetify'
|
|
import type { ServiceObject } from '@DocumentsManager/models/service'
|
|
|
|
const display = useDisplay()
|
|
const isMobile = computed(() => display.mdAndDown.value)
|
|
|
|
defineProps<{
|
|
modelValue: boolean
|
|
activeProviderId: string
|
|
activeServiceId: string
|
|
services: ServiceObject[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
'navigate-home': []
|
|
'select-service': [service: ServiceObject]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<v-navigation-drawer
|
|
:model-value="modelValue"
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|
:permanent="!isMobile"
|
|
:temporary="isMobile"
|
|
width="280"
|
|
class="files-sidebar"
|
|
>
|
|
<div class="pa-4">
|
|
<v-list density="compact" nav>
|
|
<v-list-subheader>Quick Access</v-list-subheader>
|
|
<v-list-item
|
|
prepend-icon="mdi-home"
|
|
title="Home"
|
|
@click="emit('navigate-home')"
|
|
/>
|
|
<v-list-item
|
|
prepend-icon="mdi-clock-outline"
|
|
title="Recent"
|
|
disabled
|
|
/>
|
|
<v-list-item
|
|
prepend-icon="mdi-star-outline"
|
|
title="Starred"
|
|
disabled
|
|
/>
|
|
<v-list-item
|
|
prepend-icon="mdi-trash-can-outline"
|
|
title="Trash"
|
|
disabled
|
|
/>
|
|
</v-list>
|
|
|
|
<v-divider class="my-4" />
|
|
|
|
<v-list density="compact" nav>
|
|
<v-list-subheader>Storage</v-list-subheader>
|
|
<v-list-item
|
|
v-for="service in services"
|
|
:key="`${service.provider}:${String(service.identifier ?? '')}`"
|
|
prepend-icon="mdi-harddisk"
|
|
:title="service.label || String(service.identifier ?? 'Unnamed Service')"
|
|
:subtitle="service.provider"
|
|
:active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
|
|
@click="emit('select-service', service)"
|
|
/>
|
|
|
|
<div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
|
|
No storage services available.
|
|
</div>
|
|
</v-list>
|
|
</div>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.files-sidebar {
|
|
border-right: 1px solid rgb(var(--v-border-color)) !important;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.files-sidebar-empty {
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|