refactor: add navigaton panel component

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

src/pages/MailPage.vue

@@ -17,7 +17,7 @@ import DeleteFolderDialog from '@/components/DeleteFolderDialog.vue'
 import FolderSelectionDialog from '@/components/FolderSelectionDialog.vue'
 import RenameFolderDialog from '@/components/RenameFolderDialog.vue'
 import SettingsDialog from '@/components/settings/SettingsDialog.vue'
-import FolderView from '@/components/FolderView.vue'
+import Sidebar from '@/components/Sidebar.vue'
 
 // Vuetify display for responsive behavior
 const display = useDisplay()
@@ -44,7 +44,6 @@ const {
 } = storeToRefs(mailOperationsStore)
 
 const {
-  sidebarVisible,
   settingsDialogVisible,
   selectedFolder,
   composerMode,
@@ -111,8 +110,6 @@ const {
 
 const sidebarToggle = () => mailUiStore.sidebarToggle()
 
-const handleSettingsOpen = () => mailUiStore.settingsOpen()
-
 const handleFolderSelect = (folder: CollectionObject) => mailUiStore.selectFolder(folder)
 
 const handleFolderCreateConfirm = async (folderName: string) => {
@@ -294,33 +291,7 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
     <!-- Main content area -->
     <div class="mail-content">
       <!-- Folder tree sidebar -->
-      <v-navigation-drawer
-        v-model="sidebarVisible"
-        contained
-        :permanent="sidebarVisible && !isMobile"
-        :temporary="isMobile"
-        width="280"
-        class="mail-sidebar"
-      >
-
-        <FolderView
-          :selected-folder="selectedFolder"
-          @select="handleFolderSelect"
-        />
-
-        <template #append>
-          <div class="pa-2">
-            <v-btn
-              block
-              variant="text"
-              prepend-icon="mdi-cog"
-              @click="handleSettingsOpen"
-            >
-              Settings
-            </v-btn>
-          </div>
-        </template>
-      </v-navigation-drawer>
+      <Sidebar />
 
       <!-- Main area with message list and reader -->
       <div class="mail-main">
@@ -490,11 +461,6 @@ const handleMessageSelectionDelete = () => mailUiStore.deleteSelectedMessages()
   position: relative;
 }
 
-.mail-sidebar {
-  border-right: 1px solid rgb(var(--v-border-color));
-  overflow-y: auto;
-}
-
 .mail-main {
   flex: 1;
   min-height: 0;