updates

src/App.vue

@@ -1,23 +1,55 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import TopBar from './components/TopBar.vue'
 import SideBar from './components/SideBar.vue'
-import useNotes from './composables/useNotes'
+import Note from './components/Note.vue'
+import { activeNote } from './composables/useNotes'
 
-const { notes } = useNotes()
+const sideBarCollapsed = ref(false)
+
+const viewModes: ViewMode[] = [
+  { name: 'Note', icon: 'card-text' },
+  { name: 'List', icon: 'list-task' },
+  { name: 'Mindmap', icon: 'diagram-3' },
+]
+const activeViewMode = ref(viewModes[0])
 </script>
 
 <template>
-  <TopBar />
-  <div class="container g-3 d-flex h-100" style="padding-top: 50px">
-    <SideBar class="py-3" />
-    <div id="main" class="bg-white border-start border-end px-4 py-3">
-      main
-      <pre>{{ notes }}</pre>
+  <TopBar
+    :side-bar-collapsed="sideBarCollapsed"
+    @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
+  />
+  <div class="container g-3 position-relative d-flex h-100">
+    <SideBar
+      :view-modes="viewModes"
+      :active-view-mode="activeViewMode"
+      @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
+      class="py-3"
+      style="margin-top: 50px"
+    />
+    <div
+      id="main"
+      class="bg-white border-start border-end px-4 py-3"
+      :class="{ 'side-bar-collapsed': sideBarCollapsed }"
+    >
+      <Note v-if="activeNote" :note="activeNote" />
     </div>
   </div>
 </template>
-<style>
+<style lang="scss">
 #main {
   overflow: auto;
   flex: 1 1 0;
-}</style>
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin-left: $sidebar-width;
+  transition: margin $transition-duration ease-out;
+  &.side-bar-collapsed {
+    margin-left: 0;
+  }
+}
+</style>