refactor: add navigaton panel component

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/pages/PeoplePage.vue

@@ -1,19 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useDisplay } from 'vuetify'
 import { useModuleStore } from '@KTXC/stores/moduleStore'
 import { usePeopleStore } from '@/stores/peopleStore'
-import CollectionList from '@/components/CollectionList.vue'
+import Sidebar from '@/components/Sidebar.vue'
 import CollectionEditor from '@/components/CollectionEditor.vue'
 import PersonList from '@/components/PersonList.vue'
 import PersonEditor from '@/components/PersonEditor.vue'
 import ImportDialog from '@/components/ImportDialog.vue'
 
-// Vuetify display
-const display = useDisplay()
-const isMobile = computed(() => display.mdAndDown.value)
-
 // Check if people manager is available
 const moduleStore = useModuleStore()
 const isPeopleManagerAvailable = computed(() => {
@@ -25,7 +20,6 @@ const peopleStore = usePeopleStore()
 
 const {
   sidebarVisible,
-  loading,
   selectedCollection,
   selectedEntity,
   entityEditorMode,
@@ -38,9 +32,6 @@ const {
 
 const {
   initialize,
-  selectCollection,
-  openEditCollection,
-  openCreateCollection,
   selectEntity,
   createEntity,
   startEditingEntity,
@@ -50,29 +41,12 @@ const {
   deleteEntity,
   saveCollection,
   deleteCollection,
-  openImport,
   closeImport,
 } = peopleStore
 
 // Contact search (filters the person list)
 const searchQuery = ref('')
 
-// VCF import file picker
-const fileInputRef = ref<HTMLInputElement | null>(null)
-
-function triggerFileInput() {
-  fileInputRef.value?.click()
-}
-
-async function onFilesSelected(event: Event) {
-  const input = event.target as HTMLInputElement
-  const files = Array.from(input.files ?? [])
-  input.value = '' // allow re-selecting the same file later
-  if (files.length > 0) {
-    await openImport(files)
-  }
-}
-
 onMounted(async () => {
   try {
     await initialize()
@@ -118,101 +92,7 @@ onMounted(async () => {
     <!-- Main Content Area -->
     <div class="people-content">
       <!-- Sidebar Navigation Drawer -->
-      <v-navigation-drawer
-        v-model="sidebarVisible"
-        contained
-        :permanent="sidebarVisible && !isMobile"
-        :temporary="isMobile"
-        width="280"
-        class="people-sidebar"
-      >
-        <div class="pa-4 d-flex flex-column h-100">
-          <CollectionList
-            :collections="collections"
-            :loading="loading"
-            :selected-collection="selectedCollection"
-            @select="selectCollection"
-            @edit="openEditCollection"
-          />
-          
-          <v-divider class="my-2" />
-          
-          <div class="sidebar-footer">
-            <div class="d-flex align-center mb-2">
-              <v-icon icon="mdi-plus-circle" size="small" class="mr-2" />
-              <span class="text-subtitle-2 font-weight-bold">Create</span>
-            </div>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-account-plus"
-              size="small"
-              block
-              class="justify-start"
-              :disabled="!selectedCollection"
-              @click="createEntity('individual')"
-            >
-              Individual
-            </v-btn>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-domain-plus"
-              size="small"
-              block
-              class="justify-start"
-              :disabled="!selectedCollection"
-              @click="createEntity('organization')"
-            >
-              Organization
-            </v-btn>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-account-group"
-              size="small"
-              block
-              class="justify-start"
-              :disabled="!selectedCollection"
-              @click="createEntity('group')"
-            >
-              Group
-            </v-btn>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-book-plus"
-              size="small"
-              block
-              class="justify-start"
-              @click="openCreateCollection"
-            >
-              Address Book
-            </v-btn>
-
-            <v-divider class="my-2" />
-
-            <div class="d-flex align-center mb-2">
-              <v-icon icon="mdi-database-import" size="small" class="mr-2" />
-              <span class="text-subtitle-2 font-weight-bold">Import</span>
-            </div>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-upload"
-              size="small"
-              block
-              class="justify-start"
-              @click="triggerFileInput"
-            >
-              Import VCF
-            </v-btn>
-            <input
-              ref="fileInputRef"
-              type="file"
-              accept=".vcf,text/vcard,text/x-vcard"
-              multiple
-              class="d-none"
-              @change="onFilesSelected"
-            />
-          </div>
-        </div>
-      </v-navigation-drawer>
+      <Sidebar />
 
       <!-- Main View -->
       <div class="people-main">
@@ -316,11 +196,6 @@ onMounted(async () => {
   position: relative;
 }
 
-.people-sidebar {
-  border-right: 1px solid rgb(var(--v-border-color)) !important;
-  overflow-y: auto;
-}
-
 .people-main {
   flex: 1;
   min-height: 0;