listview component

src/components/TopBar/Hamburger.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{
+  sideBarCollapsed: boolean
+}>()
+
+const emit = defineEmits<{
+  toggleSideBar: []
+}>()
+</script>
+<template>
+  <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;
+$hamburger-layer-spacing: 3px;
+$hamburger-padding-x: 0px;
+$hamburger-padding-y: 0px;
+$hamburger-scale-speed: calc(200ms / 0.22s);
+
+@import 'hamburgers/_sass/hamburgers/hamburgers.scss';
+@if index($hamburger-types, spin-r) {
+  /*
+    * Spin Reverse
+    */
+  .hamburger--spin-r {
+    .hamburger-inner {
+      transition-duration: ($hamburger-scale-speed * 0.22s);
+      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+      &::before {
+        transition: top
+            ($hamburger-scale-speed * 0.1s)
+            ($hamburger-scale-speed * 0.25s)
+            ease-in,
+          opacity ($hamburger-scale-speed * 0.1s) ease-in;
+      }
+
+      &::after {
+        transition: bottom
+            ($hamburger-scale-speed * 0.1s)
+            ($hamburger-scale-speed * 0.25s)
+            ease-in,
+          transform
+            ($hamburger-scale-speed * 0.22s)
+            cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(-225deg);
+        transition-delay: ($hamburger-scale-speed * 0.12s);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+        &::before {
+          top: 0;
+          opacity: 0;
+          transition: top ($hamburger-scale-speed * 0.1s) ease-out,
+            opacity
+              ($hamburger-scale-speed * 0.1s)
+              ($hamburger-scale-speed * 0.12s)
+              ease-out;
+        }
+
+        &::after {
+          bottom: 0;
+          transform: rotate(90deg);
+          transition: bottom ($hamburger-scale-speed * 0.1s) ease-out,
+            transform
+              ($hamburger-scale-speed * 0.22s)
+              ($hamburger-scale-speed * 0.12s)
+              cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+      }
+    }
+  }
+}
+button.hamburger {
+  outline: none !important;
+  line-height: 1;
+  opacity: 0.9;
+  border-radius: 2rem;
+}
+.hamburger-box {
+  display: block;
+}
+</style> -->