refactor to ui components

src/components/TopBar/Hamburger.vue

@@ -41,80 +41,3 @@ const emit = defineEmits<{
   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> -->