tailwind

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>