feat: feat: arrange hamburger menu responsive

components/layout/LayoutHeader.vue

@@ -29,7 +29,7 @@
 
         <AppDarkModeToggle class="hidden xl:inline-flex ml-3" />
 
-        <LayoutHeaderMenuAvatar />
+        <LayoutHeaderMenuAvatar class="hidden sm:block" />
       </div>
     </nav>
   </div>

components/layout/LayoutHeaderLogo.vue

@@ -4,12 +4,31 @@
     class="group inline-flex items-center focus:outline-none py-3"
   >
     <div
-      class="w-9 mr-4 fill-current group-hover:text-purple-800 transition-colors"
+      class="
+        w-6
+        sm:w-9
+        mr-4
+        fill-current
+        group-hover:text-purple-800
+        transition-colors
+      "
       v-html="$options.rawLogo"
     />
 
     <span
-      class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors whitespace-nowrap"
+      class="
+        bg-clip-text bg-gradient-to-r
+        font-semibold
+        from-purple-800
+        group-hover:text-transparent
+        text-lg
+        sm:text-xl
+        lg:text-2xl
+        to-blue-700
+        tracking-tight
+        transition-colors
+        whitespace-nowrap
+      "
       :class="!props.showTitle && 'hidden lg:block'"
     >
       {{ $options.config.site_title }}

components/layout/LayoutHeaderMenuHamburger.vue

@@ -12,7 +12,7 @@ export default {
 <template>
   <div>
     <div
-      class="hamburger flex flex-col space-between space-y-1.5"
+      class="hamburger flex flex-col space-between space-y-1.5 p-6 -mx-6"
       :class="isOpen ? 'is-open' : ''"
       @click="isOpen = !isOpen"
     >
@@ -34,11 +34,11 @@ export default {
 
 <style lang="postcss" scoped>
 .hamburger-item {
-  @apply block w-8 h-1 bg-gray-800 dark:bg-gray-300 transition;
+  @apply block w-6 h-0.5 bg-gray-800 dark:bg-gray-300 transition;
 }
 
 .is-open.hamburger > span:nth-child(1) {
-  transform: translate(0, 0.625rem) rotate(-45deg);
+  transform: translate(0, 0.5rem) rotate(45deg);
 }
 
 .is-open.hamburger > span:nth-child(2) {
@@ -46,7 +46,7 @@ export default {
 }
 
 .is-open.hamburger > span:nth-child(3) {
-  transform: translate(0, -0.625rem) rotate(45deg);
+  transform: translate(0, -0.5rem) rotate(-45deg);
 }
 
 .hamburger-menu {