updates

src/components/Hamburger.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+const props = defineProps<{
+  sideBarCollapsed: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleSideBar'): void
+}>()
+</script>
+<template>
+  <button
+    class="hamburger hamburger--spin-r"
+    :class="{ 'is-active': !props.sideBarCollapsed }"
+    type="button"
+    @click="emit('toggleSideBar')"
+  >
+    <span class="hamburger-box">
+      <span class="hamburger-inner"></span>
+    </span>
+  </button>
+</template>
+<style scoped lang="scss">
+$hamburger-layer-color: $white;
+$hamburger-layer-width: 25px;
+$hamburger-layer-height: 3px;
+$hamburger-layer-spacing: 3px;
+$hamburger-padding-x: 0px;
+$hamburger-padding-y: 0px;
+$hamburger-scale-speed: calc($transition-duration/.22s);
+
+@import 'hamburgers/_sass/hamburgers/hamburgers.scss';
+@if index($hamburger-types, spin-r) {
+  /*
+    * Spin Reverse
+    */
+  .hamburger--spin-r {
+    .hamburger-inner {
+      transition-duration: ($hamburger-scale-speed * 0.22s);
+      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+      &::before {
+        transition: top
+            ($hamburger-scale-speed * 0.1s)
+            ($hamburger-scale-speed * 0.25s)
+            ease-in,
+          opacity ($hamburger-scale-speed * 0.1s) ease-in;
+      }
+
+      &::after {
+        transition: bottom
+            ($hamburger-scale-speed * 0.1s)
+            ($hamburger-scale-speed * 0.25s)
+            ease-in,
+          transform
+            ($hamburger-scale-speed * 0.22s)
+            cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(-225deg);
+        transition-delay: ($hamburger-scale-speed * 0.12s);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+        &::before {
+          top: 0;
+          opacity: 0;
+          transition: top ($hamburger-scale-speed * 0.1s) ease-out,
+            opacity
+              ($hamburger-scale-speed * 0.1s)
+              ($hamburger-scale-speed * 0.12s)
+              ease-out;
+        }
+
+        &::after {
+          bottom: 0;
+          transform: rotate(90deg);
+          transition: bottom ($hamburger-scale-speed * 0.1s) ease-out,
+            transform
+              ($hamburger-scale-speed * 0.22s)
+              ($hamburger-scale-speed * 0.12s)
+              cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+      }
+    }
+  }
+}
+button.hamburger {
+  outline: none !important;
+  line-height: 1;
+  opacity: 0.9;
+  border-radius: 2rem;
+}
+.hamburger-box {
+  display: block;
+}
+</style>

src/components/Note.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  note: Note
+}>()
+</script>
+<template>
+  <h1>{{ note.title }}</h1>
+  <div>{{ note.content }}</div>
+</template>

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>

src/components/SideBar/SideBarMenuItem.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 const props = defineProps<{
   icon?: string
+  active?: boolean
 }>()
 </script>
 <template>
-  <a class="text-opacity-50 text-decoration-none w-100 d-block link-secondary">
+  <a
+    class="text-opacity-50 text-decoration-none w-100 d-block"
+    :class="props.active ? 'link-primary fw-bolder' : 'link-secondary'"
+  >
     <i :class="`bi bi-${props.icon}`" class="me-2" v-if="props.icon"></i
     ><slot></slot>
   </a>

src/components/TopBar.vue

@@ -1,10 +1,30 @@
+<script setup lang="ts">
+import Hamburger from './Hamburger.vue'
+const props = defineProps<{
+  sideBarCollapsed: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleSideBar'): void
+}>()
+</script>
 <template>
   <div
+    id="topbar"
     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
+      <Hamburger
+        class="me-3"
+        :side-bar-collapsed="props.sideBarCollapsed"
+        @toggle-side-bar="emit('toggleSideBar')"
+      /><span>Contexted</span>
     </div>
   </div>
-</template> 
+</template>
+<style scoped>
+#topbar {
+  z-index: 500;
+}
+</style>