project setup

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

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>

src/components/SideBar/SideBarMenu.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div class="text-uppercase fw-semibold header">
+      <slot name="header"></slot>
+    </div>
+    <slot name="items"></slot>
+  </div>
+</template>
+<style scoped>
+.header {
+  font-size: 0.9rem;
+}
+</style>

src/components/SideBar/SideBarMenuItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+  icon?: string
+}>()
+</script>
+<template>
+  <a class="text-opacity-50 text-decoration-none w-100 d-block link-secondary">
+    <i :class="`bi bi-${props.icon}`" class="me-2" v-if="props.icon"></i
+    ><slot></slot>
+  </a>
+</template>
+<style scoped lang="scss">
+a {
+  cursor: pointer;
+  border-radius: var(--bs-border-radius);
+}
+a:hover {
+  background-color: var(--bs-gray-300);
+}
+</style>

src/components/TopBar.vue

@@ -0,0 +1,10 @@
+<template>
+  <div
+    class="bg-primary position-absolute top-0 start-0 end-0"
+    style="height: 50px"
+  >
+    <div class="container g-3 h-100 d-flex align-items-center text-white">
+      top bar
+    </div>
+  </div>
+</template>