tailwind

src/components/Hamburger.vue

@@ -20,13 +20,13 @@ const emit = defineEmits<{
   </button>
 </template>
 <style scoped lang="scss">
-$hamburger-layer-color: $white;
+$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);
+$hamburger-scale-speed: calc(200ms / 0.22s);
 
 @import 'hamburgers/_sass/hamburgers/hamburgers.scss';
 @if index($hamburger-types, spin-r) {

src/components/Logo.vue

@@ -0,0 +1,3 @@
+<template>
+  <i class="fa-brands fa-staylinked"></i>
+</template>

src/components/Note.vue

@@ -4,13 +4,9 @@ defineProps<{
 }>()
 </script>
 <template>
-  <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 class="flex items-center text-3xl pb-2">
+    <i class="bi bi-house mr-2 text-secondary text-base" v-if="note.isRoot"></i
+    >{{ note.title }}
   </h1>
   <div>{{ note.content }}</div>
 </template>
-<style scoped>
-i.root {
-  font-size: 50%;
-}
-</style>

src/components/SideBar.vue

@@ -13,7 +13,10 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <div id="sidebar" class="position-relative pe-3 d-flex flex-column">
+  <div
+    id="sidebar"
+    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3"
+  >
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
@@ -40,10 +43,3 @@ const emit = defineEmits<{
     </SideBarMenu>
   </div>
 </template>
-<style lang="scss">
-#sidebar {
-  gap: 1rem;
-  overflow-y: auto;
-  width: $sidebar-width;
-}
-</style>

src/components/SideBar/SideBarMenu.vue

@@ -1,13 +1,8 @@
 <template>
   <div>
-    <div class="text-uppercase fw-semibold header text-body-secondary">
+    <div class="text-sm font-semibold uppercase text-secondary">
       <slot name="header"></slot>
     </div>
     <slot name="items"></slot>
   </div>
 </template>
-<style scoped>
-.header {
-  font-size: 0.9rem;
-}
-</style>

src/components/SideBar/SideBarMenuItem.vue

@@ -6,19 +6,10 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="text-decoration-none w-100 d-block"
-    :class="props.active ? 'link-primary fw-bolder' : 'link-secondary'"
+    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200"
+    :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
-    <i :class="`bi bi-${props.icon}`" class="me-2" v-if="props.icon"></i
+    <i :class="`bi bi-${props.icon}`" class="mr-2" v-if="props.icon"></i
     ><slot></slot>
   </a>
 </template>
-<style scoped lang="scss">
-a {
-  cursor: pointer;
-  border-radius: var(--bs-border-radius);
-}
-a:hover {
-  background-color: var(--bs-gray-300);
-}
-</style>

src/components/TopBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Hamburger from './Hamburger.vue'
+import Logo from './Logo.vue'
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -9,25 +10,16 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <div
-    id="topbar"
-    class="bg-primary position-absolute top-0 start-0 end-0 d-flex"
-    style="height: 50px"
-  >
-    <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"
-        @toggle-side-bar="emit('toggleSideBar')"
-      /><span>Contexted</span>
+  <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
+    <div class="mx-auto flex w-full max-w-app items-center gap-3 text-white">
+      <div class="flex w-sidebar items-center pl-3">
+        <Hamburger
+          :side-bar-collapsed="props.sideBarCollapsed"
+          @toggle-side-bar="emit('toggleSideBar')"
+        />
+        <Logo class="ml-auto text-2xl" />
+      </div>
+      <div class="mr-3 flex-1 bg-gray-800">hey</div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-#topbar {
-  z-index: 500;
-}
-#topbar-container {
-  max-width: $app-width;
-}
-</style>