Initial commit

src/components/FilesSidebar.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
+
+defineProps<{
+  modelValue: boolean
+  activeServiceId: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'navigate-home': []
+}>()
+</script>
+
+<template>
+  <v-navigation-drawer
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+    :permanent="display.mdAndUp.value"
+    :temporary="display.smAndDown.value"
+    width="240"
+    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
+          prepend-icon="mdi-harddisk"
+          title="Personal"
+          subtitle="Local storage"
+          :active="activeServiceId === 'personal'"
+        />
+      </v-list>
+    </div>
+  </v-navigation-drawer>
+</template>
+
+<style scoped>
+.files-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+</style>