updates

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@popperjs/core": "^2.11.7",
         "@vueuse/core": "^10.1.0",
-        "bootstrap": "^5.2.3",
+        "bootstrap": "^5.3.0-alpha3",
         "bootstrap-icons": "^1.10.5",
         "firebase": "^9.20.0",
         "hamburgers": "^1.2.1",
@@ -1328,9 +1328,9 @@
       }
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
+      "version": "5.3.0-alpha3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "integrity": "sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==",
       "funding": [
         {
           "type": "github",
@@ -1342,7 +1342,7 @@
         }
       ],
       "peerDependencies": {
-        "@popperjs/core": "^2.11.6"
+        "@popperjs/core": "^2.11.7"
       }
     },
     "node_modules/bootstrap-icons": {
@@ -3116,9 +3116,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.2.3",
+      "version": "5.3.0-alpha3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "integrity": "sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==",
       "requires": {}
     },
     "bootstrap-icons": {

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@vueuse/core": "^10.1.0",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha3",
     "bootstrap-icons": "^1.10.5",
     "firebase": "^9.20.0",
     "hamburgers": "^1.2.1",

src/App.vue

@@ -20,7 +20,7 @@ const activeViewMode = ref(viewModes[0])
     :side-bar-collapsed="sideBarCollapsed"
     @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
   />
-  <div class="container g-3 position-relative d-flex h-100">
+  <div id="app-container" class="g-3 position-relative d-flex h-100 mx-auto">
     <SideBar
       :view-modes="viewModes"
       :active-view-mode="activeViewMode"
@@ -37,7 +37,10 @@ const activeViewMode = ref(viewModes[0])
     </div>
   </div>
 </template>
-<style lang="scss">
+<style scoped lang="scss">
+#app-container {
+  max-width: $app-width;
+}
 #main {
   overflow: auto;
   flex: 1 1 0;

src/assets/_variables.scss

@@ -2,3 +2,19 @@ $primary: #1e4bc4;
 $white: #fff !default;
 $transition-duration: 0.2s;
 $sidebar-width: 220px;
+$app-width: 1260px;
+// $grid-breakpoints: (
+//   xs: 0,
+//   sm: 576px,
+//   md: 768px,
+//   lg: 992px,
+//   xl: 1200px,
+// //   xxl: 1400px,
+// ) !default;
+// $container-max-widths: (
+//   sm: 540px,
+//   md: 720px,
+//   lg: 960px,
+//   xl: 1140px,
+// //   xxl: 1320px,
+// ) !default;

src/assets/style.scss

@@ -1,3 +1,4 @@
+@import 'bootstrap/scss/functions';
 @import './_variables';
 @import 'bootstrap/scss/bootstrap';
 
@@ -10,3 +11,4 @@ html {
 body {
   overflow-y: scroll;
 }
+

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>