tailwind

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>