updates

src/components/TopBar.vue

@@ -1,10 +1,30 @@
+<script setup lang="ts">
+import Hamburger from './Hamburger.vue'
+const props = defineProps<{
+  sideBarCollapsed: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleSideBar'): void
+}>()
+</script>
 <template>
   <div
+    id="topbar"
     class="bg-primary position-absolute top-0 start-0 end-0"
     style="height: 50px"
   >
     <div class="container g-3 h-100 d-flex align-items-center text-white">
-      top bar
+      <Hamburger
+        class="me-3"
+        :side-bar-collapsed="props.sideBarCollapsed"
+        @toggle-side-bar="emit('toggleSideBar')"
+      /><span>Contexted</span>
     </div>
   </div>
-</template> 
+</template>
+<style scoped>
+#topbar {
+  z-index: 500;
+}
+</style>