Improve Adaptive Navigation of Header Menu

src/app/features/header-menu/header-menu.scss

@@ -4,11 +4,12 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: start;
+  justify-content: space-between;
   gap: 0;
 
   width: fit-content;
   min-width: 100%;
+  height: 64px;
 
   box-sizing: border-box;
   box-shadow: 0 2px 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
@@ -26,11 +27,24 @@
     align-items: center;
     gap: 48px;
 
+    .menu-items {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 48px;
+
+      &.hidden {
+        position: absolute;
+        top: -100000px;
+        pointer-events: none;
+      }
+    }
+
     & > * {
       user-select: none;
     }
 
-    .menu-item, a:not(.settings) {
+    .menu-item, a {
       text-decoration: none;
       font-size: 18px;
       height: 40px;
@@ -62,7 +76,7 @@
       }
     }
 
-    .settings {
+    .settings, .menu {
       border: none;
       border-radius: 100%;
       background-color: inherit;
@@ -71,6 +85,9 @@
       position: relative;
       z-index: 10;
       cursor: pointer;
+    }
+
+    .settings {
       transition: transform 0.3s ease;
 
       &:hover {
@@ -78,6 +95,14 @@
       }
     }
 
+    .menu {
+      &.hidden {
+        position: absolute;
+        top: -100000px;
+        pointer-events: none;
+      }
+    }
+
     /* 구체적인 아이콘 예외 처리 */
     .icon-40 {
       height: auto;
@@ -85,6 +110,9 @@
   }
 
   .menu-left {
+    position: absolute;
+    left: 0;
+
     justify-content: start;
     padding: 12px;
 
@@ -104,7 +132,7 @@
       img {
         display: inline-block;
         height: 20px;
-        padding: 10px 10px 10px 0;
+        padding: 10px 0;
       }
 
       strong {
@@ -113,9 +141,11 @@
 
       span {
         display: inline-block;
+        padding-left: 10px;
 
         &.hidden {
-          display: none;
+          position: absolute;
+          top: -100000px;
           pointer-events: none;
         }
       }
@@ -123,8 +153,10 @@
   }
 
   .menu-right {
-    flex-grow: 1;
+    position: absolute;
+    right: 0;
+
     justify-content: flex-end;
-    padding: 12px 20px;
+    padding: 12px 20px 12px 12px;
   }
 }