updates

src/components/Note.vue

@@ -4,6 +4,13 @@ defineProps<{
 }>()
 </script>
 <template>
-  <h1>{{ note.title }}</h1>
+  <h1 class="d-flex align-items-center">
+    <i class="root bi bi-house text-body-tertiary me-2" v-if="note.isRoot"></i>{{ note.title }}
+  </h1>
   <div>{{ note.content }}</div>
 </template>
+<style scoped>
+i.root {
+  font-size: 50%;
+}
+</style>

src/components/SideBar/SideBarMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="text-uppercase fw-semibold header">
+    <div class="text-uppercase fw-semibold header text-body-secondary">
       <slot name="header"></slot>
     </div>
     <slot name="items"></slot>

src/components/SideBar/SideBarMenuItem.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="text-opacity-50 text-decoration-none w-100 d-block"
+    class="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

src/components/TopBar.vue

@@ -11,10 +11,10 @@ const emit = defineEmits<{
 <template>
   <div
     id="topbar"
-    class="bg-primary position-absolute top-0 start-0 end-0"
+    class="bg-primary position-absolute top-0 start-0 end-0 d-flex"
     style="height: 50px"
   >
-    <div class="container g-3 h-100 d-flex align-items-center text-white">
+    <div id="topbar-container" class="g-3 h-100 d-flex align-items-center text-white mx-auto">
       <Hamburger
         class="me-3"
         :side-bar-collapsed="props.sideBarCollapsed"
@@ -23,8 +23,11 @@ const emit = defineEmits<{
     </div>
   </div>
 </template>
-<style scoped>
+<style scoped lang="scss">
 #topbar {
   z-index: 500;
 }
+#topbar-container {
+  max-width: $app-width;
+}
 </style>