🎨 styles: header menu

:%s

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

@@ -2,14 +2,23 @@
 
 .headerMenu {
     @apply flex justify-between items-center bg-white;
+    padding: 2.4rem 3.2rem;
     .left {
         @apply flex items-center;
+        .inputSearch {
+            margin-left: 4.8rem;
+            @screen md {
+                min-width: 51.2rem;
+                max-width: 50%;
+            }
+        }
     }
     .menu {
         @apply flex items-center list-none;
         li {
+            @apply flex justify-center items-center w-full;
             &:not(:last-child) {
-                margin-right: 4.8rem;
+                margin-right: 6.4rem;
             }
             a {
                 @appy no-underline;

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

@@ -8,7 +8,7 @@ import s from './HeaderMenu.module.scss'
 
 const OPTION_MENU = [
     {
-        link: '/',
+        link: ROUTE.ACCOUNT,
         name: 'Account',
     },
     {
@@ -28,7 +28,9 @@ const HeaderMenu = memo(({ }: Props) => {
         <section className={s.headerMenu}>
             <div className={s.left}>
                 <div>Online Grocery</div>
-                <InputSearch />
+                <div className={s.inputSearch}>
+                    <InputSearch />
+                </div>
             </div>
             <ul className={s.menu}>
                 <li>