🎨 styles: responsive header main menu

:%s

src/components/common/Header/Header.module.scss

@@ -1,6 +1,12 @@
 @import "../../../styles/utilities";
 
 .header {
+  @apply sticky bg-white;
+  top: 0;
+  z-index: 9999;
+  @screen md {
+    padding-bottom: 1.6rem;
+  }
   .menu {
     padding-left: 3.2rem;
     padding-right: 3.2rem;

src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss

@@ -1,6 +1,8 @@
 @import "../../../../../styles/utilities";
 
 .headerHighLight {
+    @apply hidden;
+    @screen md {
         @apply flex justify-between items-center spacing-horizontal bg-primary caption;
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
@@ -17,4 +19,5 @@
                 }
             }
         }
+    }
 }

src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss

@@ -1,22 +1,44 @@
 @import "../../../../../styles/utilities";
 
 .headerMenu {
-    @apply flex justify-between items-center bg-white;
+    padding-top: 1.6rem;
+    padding-bottom: 0.8rem;
+    @screen md {
+        @apply flex justify-between items-center;
         padding-top: 2.4rem;
         padding-bottom: 2.4rem;
+    }
     .left {
-        @apply flex items-center;
+        .top {
+            @apply flex justify-between items-center;
+            .iconCart {
+            }
+        }
         .inputSearch {
-            margin-left: 4.8rem;
             //todo: remove
             border: 1px solid red;
+            margin-top: 2.4rem;
             @screen lg {
                 min-width: 51.2rem;
                 max-width: 50%;
             }
         }
+        @screen md {
+            @apply flex items-center;
+            .top {
+                .iconCart {
+                    @apply hidden;
+                }
+            }
+            .inputSearch {
+                margin-left: 4.8rem;
+                margin-top: 0;
+            }
+        }
     }
     .menu {
+        @apply hidden;
+        @screen md {
             @apply flex items-center list-none;
             li {
                 @apply flex justify-center items-center w-full;
@@ -31,4 +53,5 @@
                 }
             }
         }
+    }
 }

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -26,7 +26,12 @@ const HeaderMenu = memo(({ }: Props) => {
     return (
         <section className={s.headerMenu}>
             <div className={s.left}>
+                <div className={s.top}>
                     <div>Online Grocery</div>
+                    <button className={s.iconCart}>
+                        <IconBuy />
+                    </button>
+                </div>
                 <div className={s.inputSearch}>
                     <InputSearch />
                 </div>

src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss

@@ -1,6 +1,9 @@
 @import "../../../../../styles/utilities";
 
 .headerSubMenu {
+    @apply hidden;
+    @screen md {
+        @apply block;
         padding-bottom: 0.8rem;
         @screen lg {
             @apply flex justify-between items-center;
@@ -26,4 +29,5 @@
                 }
             }
         }
+    }
 }