update hamburger

src/components/Hamburger.vue

@@ -8,18 +8,40 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <button
-    class="hamburger hamburger--spin-r"
-    :class="{ 'is-active': !props.sideBarCollapsed }"
-    type="button"
-    @click="emit('toggleSideBar')"
-  >
-    <span class="hamburger-box">
-      <span class="hamburger-inner"></span>
-    </span>
-  </button>
+  <label class="swap-rotate swap btn-ghost btn-sm btn-circle btn">
+    <input
+      type="checkbox"
+      @click="emit('toggleSideBar')"
+      :checked="!props.sideBarCollapsed"
+    />
+    <svg
+      class="swap-off fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 512 512"
+    >
+      <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+    </svg>
+    <svg
+      class="swap-on fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 512 512"
+    >
+      <polygon
+        points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
+      />
+    </svg>
+  </label>
 </template>
 <style scoped lang="scss">
+.swap > * {
+  transition-duration: 0.2s;
+}
+</style>
+<!-- 
 $hamburger-layer-color: white;
 $hamburger-layer-width: 25px;
 $hamburger-layer-height: 3px;
@@ -95,4 +117,4 @@ button.hamburger {
 .hamburger-box {
   display: block;
 }
-</style>
+</style> -->

src/components/TopBar.vue

@@ -10,11 +10,11 @@ const props = defineProps<{
 const emit = defineEmits<{
   toggleSideBar: []
 }>()
-</script>
+</script> 
 <template>
   <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
     <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
-      <div class="flex pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
+      <div class="flex pl-3 items-center" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"