update note display

src/components/SideBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { rootNote } from '@/composables/useNotes'
+import { rootNote, notes, activeNote } from '@/composables/useNotes'
 import SideBarMenu from '@/components/SideBar/SideBarMenu.vue'
 import SideBarMenuItem from '@/components/SideBar/SideBarMenuItem.vue'
 
@@ -15,12 +15,16 @@ const emit = defineEmits<{
 <template>
   <div
     id="sidebar"
-    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3"
+    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
   >
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem icon="house">{{ rootNote?.title }}</SideBarMenuItem>
+        <SideBarMenuItem
+          icon="fas fa-fw fa-home"
+          @click="activeNote = rootNote"
+          >{{ rootNote?.title }}</SideBarMenuItem
+        >
       </template>
     </SideBarMenu>
     <SideBarMenu>
@@ -36,9 +40,16 @@ const emit = defineEmits<{
       </template>
     </SideBarMenu>
     <SideBarMenu>
-      <template #header>Recent notes</template>
+      <template #header
+        ><i class="far fa-clock fa-fw mr-2" />Recent notes</template
+      >
       <template #items>
-        <SideBarMenuItem>{{ rootNote?.title }}</SideBarMenuItem>
+        <SideBarMenuItem
+          v-for="note in notes"
+          icon="far fa-file-alt fa-fw"
+          @click="activeNote = note"
+          >{{ note.title }}</SideBarMenuItem
+        >
       </template>
     </SideBarMenu>
   </div>