updates

src/components/SideBar.vue

@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import useNotes from '../composables/useNotes'
+import { rootNote } from '../composables/useNotes'
 import SideBarMenu from './SideBar/SideBarMenu.vue'
 import SideBarMenuItem from './SideBar/SideBarMenuItem.vue'
-const { rootNote } = useNotes()
 
-interface ViewMode {
-  name: string
-  icon: string
-}
-const viewModes: ViewMode[] = [
-  { name: 'Note', icon: 'card-text' },
-  { name: 'List', icon: 'list-task' },
-  { name: 'Mindmap', icon: 'diagram-3' },
-]
+const props = defineProps<{
+  viewModes: ViewMode[]
+  activeViewMode: ViewMode
+}>()
+
+const emit = defineEmits<{
+  (e: 'setViewMode', viewMode: ViewMode): void
+}>()
 </script>
 <template>
-  <div id="sidebar" class="position-relative pe-3 d-flex flex-column" style="width: 200px">
+  <div id="sidebar" class="position-relative pe-3 d-flex flex-column">
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem icon="house">{{
-          rootNote?.title
-        }}</SideBarMenuItem>
+        <SideBarMenuItem icon="house">{{ rootNote?.title }}</SideBarMenuItem>
       </template>
     </SideBarMenu>
     <SideBarMenu>
       <template #header>View mode</template>
       <template #items>
-        <SideBarMenuItem v-for="viewMode in viewModes" :icon="viewMode.icon">{{
-          viewMode.name
-        }}</SideBarMenuItem>
+        <SideBarMenuItem
+          v-for="viewMode in props.viewModes"
+          :icon="viewMode.icon"
+          :active="viewMode.name === activeViewMode.name"
+          @click="emit('setViewMode', viewMode)"
+          >{{ viewMode.name }}</SideBarMenuItem
+        >
       </template>
     </SideBarMenu>
     <SideBarMenu>
@@ -44,5 +44,6 @@ const viewModes: ViewMode[] = [
 #sidebar {
   gap: 1rem;
   overflow-y: auto;
+  width: $sidebar-width;
 }
 </style>