🎨 styles: header submenu

:%s

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

@@ -1,22 +1,8 @@
 @import "../../../styles/utilities";
 
 .header {
-  .btn {
+  .menu {
-    // @apply font-bold py-2 px-4 rounded;
+    padding-left: 3.2rem;
-  }
+    padding-right: 3.2rem;
-  .btnBlue {
-    @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
-  }
-  .link {
-    color: theme("colors.warning");
-  }
-  .heading {
-    @apply text-base font-heading;
-  }
-  .paragraph {
-    @apply topline;
-  }
-  .logo {
-    @apply font-logo;
   }
 }

src/components/common/Header/Header.tsx

@@ -13,8 +13,10 @@ const Header = memo(({ }: Props) => {
     return (
         <header className={s.header}>
             <HeaderHighLight />
-            <HeaderMenu />
+            <div className={s.menu}>
-            <HeaderSubMenu />
+                <HeaderMenu />
+                <HeaderSubMenu />
+            </div>
         </header>
     )
 })

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

@@ -7,6 +7,7 @@
     color: var(--white);
     .menu {
         @apply flex items-center list-none;
+        padding: .8rem 0;
         li {
             &:not(:last-child) {
                 margin-right: 3.2rem;

src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx

@@ -19,7 +19,6 @@ const MENU = [
 ]
 
 interface Props {
-    className?: string
     children?: any
 }
 

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

@@ -2,7 +2,8 @@
 
 .headerMenu {
     @apply flex justify-between items-center bg-white;
-    padding: 2.4rem 3.2rem;
+    padding-top: 2.4rem;
+    padding-bottom: 2.4rem;
     .left {
         @apply flex items-center;
         .inputSearch {

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

@@ -19,7 +19,6 @@ const OPTION_MENU = [
 ]
 
 interface Props {
-    className?: string
     children?: any
 }
 

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

@@ -0,0 +1,3 @@
+.headerNoti {
+    @apply flex items-center;
+}

src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import NotiMessage from 'src/components/common/NotiMessage/NotiMessage';
+import { IconInfo } from 'src/components/icons';
+import s from './HeaderNoti.module.scss';
+
+const HeaderNoti = () => {
+    return (
+        <NotiMessage>
+            <div className={s.headerNoti}>
+                <IconInfo />&nbsp;<span>You can buy fresh products after <b>11pm</b> or <b>8am</b></span>
+            </div>
+        </NotiMessage>
+    );
+};
+
+export default HeaderNoti;

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

@@ -1,5 +1,20 @@
 @import "../../../../../styles/utilities";
 
-.headerHighLight {
+.headerSubMenu {
-  
+    @apply flex justify-between items-center;
+    padding-bottom: 0.8rem;
+    .menu {
+        @apply flex items-center list-none;
+        li {
+            &:not(:last-child) {
+                margin-right: 4rem;
+            }
+            a {
+                @appy no-underline;
+            }
+            &:hover {
+                @apply text-primary;
+            }
+        }
+    }
 }

src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx

@@ -1,16 +1,80 @@
+import Link from 'next/link'
 import { memo } from 'react'
+import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
+import { ProductFeature, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import HeaderNoti from './HeaderNoti/HeaderNoti'
 import s from './HeaderSubMenu.module.scss'
 
+const MENU = [
+    {
+        name: 'New Items',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.NewItem}`,
+    },
+    {
+        name: 'Sales',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.Sales}`,
+    },
+    {
+        name: 'Best Sellers',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.BestSellers}`,
+    },
+    {
+        name: 'About Us',
+        link: ROUTE.ABOUT,
+    },
+    {
+        name: 'Blog',
+        link: ROUTE.BLOGS,
+    },
+]
+
+// note: hard code, remove later
+const CATEGORY = [
+    {
+        name: 'Veggie',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=veggie`,
+    },
+    {
+        name: 'Seafood',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=seafood`,
+    },
+    {
+        name: 'Frozen',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=frozen`,
+    },
+    {
+        name: 'Coffee Bean',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=coffee-bean`,
+    },
+    {
+        name: 'Sauce',
+        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=sauce`,
+    },
+]
 interface Props {
-    className?: string
     children?: any
 }
 
 const HeaderSubMenu = memo(({ }: Props) => {
     return (
-       <section className={s.headerSubMenu}>
+        <section className={s.headerSubMenu}>
+            <ul className={s.menu}>
+                <li>
+                    <MenuDropdown options={CATEGORY} align="left">Categories</MenuDropdown>
+                </li>
+                {
+                    MENU.map(item => <li key={item.name}>
+                        <Link href={item.link}>
+                            <a >
+                                {item.name}
+                            </a>
+                        </Link>
 
-       </section>
+                    </li>)
+                }
+            </ul>
+            <HeaderNoti/>
+        </section>
     )
 })
 

src/components/common/MenuDropdown/MenuDropdown.module.scss

@@ -52,6 +52,10 @@
         top: 2rem;
         height: max-content;
         min-width: 19.2rem;
+        z-index: 100;
+        &.left {
+            left: 0;
+        }
         &:hover {
             @apply block shadow-md;
         }
@@ -60,7 +64,7 @@
             border: 1px solid var(--text-active);
             margin-top: .4rem;
             li {
-                @apply block transition-all duration-200 cursor-pointer text-active;
+                @apply block w-full transition-all duration-200 cursor-pointer text-active;
                 padding: 0.8rem 1.6rem;
                 &:hover {
                     @apply bg-primary-lightest;

src/components/common/MenuDropdown/MenuDropdown.tsx

@@ -7,9 +7,10 @@ interface Props {
     children?: React.ReactNode,
     options: { link: string, name: string }[],
     isHasArrow?: boolean,
+    align?: 'left'
 }
 
-const MenuDropdown = ({ options, children, isHasArrow = true }: Props) => {
+const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) => {
     return (
         <div className={classNames({
             [s.menuDropdown]: true,
@@ -18,7 +19,10 @@ const MenuDropdown = ({ options, children, isHasArrow = true }: Props) => {
             <span className={s.label}>
                 {children}
             </span>
-            <section className={s.menu}>
+            <section className={classNames({
+                [s.menu]: true,
+                [s.left]: align === 'left',
+            })} >
                 <ul className={s.menuIner}>
                     {
                         options.map(item => <li key={item.name}>

src/components/common/NotiMessage/NotiMessage.module.scss

@@ -0,0 +1,8 @@
+@import "../../../styles/utilities";
+
+.notiMessage {
+    @apply caption bg-info-light;
+    color: var(--info-dark);
+    padding: 0.4rem 1.6rem;
+    border-radius: 3rem;
+}

src/components/common/NotiMessage/NotiMessage.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import s from './NotiMessage.module.scss'
+
+interface Props {
+    children?: React.ReactNode
+}
+
+const NotiMessage = ({ children }: Props) => {
+    return (
+        <div className={s.notiMessage}>
+            {children}
+        </div>
+    )
+}
+
+export default NotiMessage

src/components/common/index.ts

@@ -10,3 +10,4 @@ export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
 export { default as Banner} from './Banner/Banner'
 export { default as Footer} from './Footer/Footer'
 export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'
+export { default as NotiMessage} from './NotiMessage/NotiMessage'

src/components/icons/IconInfo.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconInfo = () => {
+    return (
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.99968 6.3335C6.82287 6.3335 6.6533 6.40373 6.52827 6.52876C6.40325 6.65378 6.33301 6.82335 6.33301 7.00016V9.66683C6.33301 9.84364 6.40325 10.0132 6.52827 10.1382C6.6533 10.2633 6.82287 10.3335 6.99968 10.3335C7.17649 10.3335 7.34606 10.2633 7.47108 10.1382C7.59611 10.0132 7.66634 9.84364 7.66634 9.66683V7.00016C7.66634 6.82335 7.59611 6.65378 7.47108 6.52876C7.34606 6.40373 7.17649 6.3335 6.99968 6.3335ZM7.25301 3.72016C7.0907 3.65348 6.90865 3.65348 6.74634 3.72016C6.66451 3.75189 6.58975 3.79947 6.52634 3.86016C6.46746 3.92496 6.4201 3.99937 6.38634 4.08016C6.34902 4.15928 6.33076 4.24605 6.33301 4.3335C6.3325 4.42123 6.34932 4.50821 6.3825 4.58943C6.41567 4.67066 6.46456 4.74454 6.52634 4.80683C6.59114 4.86572 6.66555 4.91307 6.74634 4.94683C6.84734 4.98832 6.95699 5.00437 7.06564 4.99357C7.1743 4.98277 7.27863 4.94544 7.36949 4.88488C7.46034 4.82431 7.53492 4.74235 7.58668 4.64621C7.63845 4.55007 7.6658 4.44269 7.66634 4.3335C7.66389 4.15698 7.59483 3.98792 7.47301 3.86016C7.40961 3.79947 7.33485 3.75189 7.25301 3.72016ZM6.99968 0.333496C5.68114 0.333496 4.3922 0.724489 3.29588 1.45703C2.19955 2.18957 1.34506 3.23077 0.840481 4.44894C0.335896 5.66711 0.203874 7.00756 0.461109 8.30077C0.718344 9.59397 1.35328 10.7819 2.28563 11.7142C3.21798 12.6466 4.40587 13.2815 5.69908 13.5387C6.99228 13.796 8.33273 13.6639 9.5509 13.1594C10.7691 12.6548 11.8103 11.8003 12.5428 10.704C13.2753 9.60764 13.6663 8.31871 13.6663 7.00016C13.6663 6.12468 13.4939 5.25778 13.1589 4.44894C12.8238 3.6401 12.3328 2.90517 11.7137 2.28612C11.0947 1.66706 10.3597 1.176 9.5509 0.840966C8.74206 0.505935 7.87516 0.333496 6.99968 0.333496ZM6.99968 12.3335C5.94484 12.3335 4.9137 12.0207 4.03664 11.4347C3.15957 10.8486 2.47599 10.0157 2.07232 9.04114C1.66865 8.0666 1.56303 6.99425 1.76882 5.95968C1.97461 4.92512 2.48256 3.97481 3.22844 3.22893C3.97432 2.48305 4.92463 1.9751 5.9592 1.76931C6.99376 1.56352 8.06612 1.66914 9.04066 2.07281C10.0152 2.47647 10.8481 3.16006 11.4342 4.03712C12.0202 4.91418 12.333 5.94533 12.333 7.00016C12.333 8.41465 11.7711 9.77121 10.7709 10.7714C9.77072 11.7716 8.41417 12.3335 6.99968 12.3335Z" fill="#3468B7" />
+        </svg>
+    )
+}
+
+export default IconInfo

src/components/icons/index.ts

@@ -3,3 +3,4 @@ export { default as IconSearch } from './IconSearch'
 export { default as IconArrowRight } from './IconArrowRight'
 export { default as IconUser } from './IconUser'
 export { default as IconHistory } from './IconHistory'
+export { default as IconInfo } from './IconInfo'

src/utils/constanst.utils.ts

@@ -10,7 +10,7 @@ export const ROUTE = {
     PRODUCTS: '/products',
     ABOUT: '/about',
     ACCOUNT: '/account',
-    
+
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
     FAQ: '/faq',
@@ -27,7 +27,18 @@ export const ACCOUNT_TAB = {
 }
 
 export const QUERY_KEY = {
-    TAB: 'tab'
+    TAB: 'tab',
+    CATEGORY: 'category',
+    BRAND: 'brand',
+    FEATURED: 'feature'
+}
+
+export enum ProductFeature {
+    BestSellers = 'Best Sellers',
+    Sales = 'Sales',
+    NewItem = 'New Item',
+    Viewed = 'Viewed',
+
 }
 
 export const KEY = {

tailwind.config.js

@@ -83,9 +83,9 @@ module.exports = {
         active: 'var(--text-active)',
         label: 'var(--text-label)',
         placeholder: 'var(--text-placeholder)',
+        primary: 'var(--primary)',
         
         // @deprecated (NOT use these variables)
-        primary: 'var(--text-primary)',
         secondary: 'var(--text-secondary)',
       },
       boxShadow: {