project setup

src/components/SideBar.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import useNotes 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' },
+]
+</script>
+<template>
+  <div id="sidebar" class="position-relative pe-3 d-flex flex-column" style="width: 200px">
+    <SideBarMenu>
+      <template #header>Root note</template>
+      <template #items>
+        <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>
+      </template>
+    </SideBarMenu>
+    <SideBarMenu>
+      <template #header>Recent notes</template>
+      <template #items>
+        <SideBarMenuItem>{{ rootNote?.title }}</SideBarMenuItem>
+      </template>
+    </SideBarMenu>
+  </div>
+</template>
+<style lang="scss">
+#sidebar {
+  gap: 1rem;
+  overflow-y: auto;
+}
+</style>