more ui components

src/components/TopBar/Hamburger.vue

@@ -8,12 +8,10 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <label class="swap-rotate swap btn-ghost btn-sm btn-circle btn">
-    <input
-      type="checkbox"
-      @click="emit('toggleSideBar')"
-      :checked="!props.sideBarCollapsed"
-    />
+  <label
+    class="btn-ghost btn-sm btn-circle btn relative inline-grid cursor-pointer select-none place-content-center"
+  >
+    <input type="checkbox" @click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed" />
     <svg
       class="swap-off fill-current"
       xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +35,27 @@ const emit = defineEmits<{
   </label>
 </template>
 <style scoped lang="scss">
-.swap > * {
+input {
+  appearance: none;
+}
+label > * {
   transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: transform, opacity;
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+input:checked ~ .swap-off {
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+
+input:checked ~ .swap-on {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+.swap-on {
+  opacity: 0;
+  transform: rotate(45deg);
 }
 </style>