🎨 styles: fix header active item in mobile and color when tap to link header

:%s

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

@@ -4,30 +4,32 @@
     @apply fixed w-full bg-white;
     bottom: 0;
     left: 0;
-    padding: 2rem 1rem;
+    padding: 0 1rem 1rem;
     border-top: 1px solid var(--border-line);
     box-shadow: -5px 6px 10px rgba(0, 0, 0, 0.2);
     z-index: 9999;
     .menu {
-        @apply grid grid-cols-4;
+        @apply grid grid-cols-5;
         li {
             a {
                 @apply transition-all duration-200 no-underline;
-                &:hover {
+                -webkit-tap-highlight-color: unset;
-                    color: var(--primary);
-                }
             }
             .menuItem {
                 @apply flex flex-col justify-center items-center sm-label;
+                padding-top: 1rem;
+                border-top: 2px solid transparent;
                 .icon {
                     position: relative;
                     margin-bottom: 0.5rem;
+                    height: 3rem;
                     svg path {
                         fill: currentColor;
                     }
                 }
                 &.active {
                     @apply text-primary;
+                    border-top: 2px solid var(--primary);
                 }
                 &.dot {
                     .icon {

src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { memo } from 'react'
-import { IconHeart, IconHome, IconShopping, IconUser } from 'src/components/icons'
+import { IconHeart, IconHome, IconNoti, IconShopping, IconUser } from 'src/components/icons'
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './HeaderSubMenuMobile.module.scss'
 
@@ -11,7 +11,6 @@ const OPTION_MENU = [
         link: ROUTE.HOME,
         name: 'Home',
         icon: <IconHome />,
-        isMarked: true,
     },
     {
         link: ROUTE.PRODUCTS,
@@ -25,6 +24,12 @@ const OPTION_MENU = [
         icon: <IconHeart />,
         isMarked: false,
     },
+    {
+        link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.NOTIFICATION}`,
+        name: 'Notifications',
+        icon: <IconNoti />,
+        isMarked: true,
+    },
     {
         link: ROUTE.ACCOUNT,
         name: 'Account',

src/components/icons/IconNoti.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconNoti = () => {
+    return (
+        <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17.0003 13.3763V9.66634C16.9986 8.01332 16.412 6.41422 15.3444 5.15224C14.2767 3.89027 12.7969 3.04684 11.167 2.77134V1.49967C11.167 1.19026 11.0441 0.893509 10.8253 0.674717C10.6065 0.455924 10.3097 0.333008 10.0003 0.333008C9.6909 0.333008 9.39416 0.455924 9.17537 0.674717C8.95657 0.893509 8.83366 1.19026 8.83366 1.49967V2.77134C7.20375 3.04684 5.72394 3.89027 4.65627 5.15224C3.58861 6.41422 3.002 8.01332 3.00033 9.66634V13.3763C2.31952 13.617 1.72982 14.0624 1.31209 14.6514C0.89435 15.2404 0.669022 15.9442 0.666992 16.6663V18.9997C0.666992 19.3091 0.789909 19.6058 1.0087 19.8246C1.22749 20.0434 1.52424 20.1663 1.83366 20.1663H5.49699C5.76566 21.1549 6.35216 22.0277 7.16602 22.6499C7.97988 23.2721 8.97587 23.6092 10.0003 23.6092C11.0248 23.6092 12.0208 23.2721 12.8346 22.6499C13.6485 22.0277 14.235 21.1549 14.5037 20.1663H18.167C18.4764 20.1663 18.7732 20.0434 18.9919 19.8246C19.2107 19.6058 19.3337 19.3091 19.3337 18.9997V16.6663C19.3316 15.9442 19.1063 15.2404 18.6886 14.6514C18.2708 14.0624 17.6811 13.617 17.0003 13.3763ZM5.33366 9.66634C5.33366 8.42866 5.82532 7.24168 6.70049 6.36651C7.57566 5.49134 8.76265 4.99967 10.0003 4.99967C11.238 4.99967 12.425 5.49134 13.3002 6.36651C14.1753 7.24168 14.667 8.42866 14.667 9.66634V13.1663H5.33366V9.66634ZM10.0003 21.333C9.59313 21.3305 9.19366 21.2216 8.84163 21.0169C8.48959 20.8122 8.19725 20.519 7.99366 20.1663H12.007C11.8034 20.519 11.5111 20.8122 11.159 21.0169C10.807 21.2216 10.4075 21.3305 10.0003 21.333ZM17.0003 17.833H3.00033V16.6663C3.00033 16.3569 3.12324 16.0602 3.34203 15.8414C3.56083 15.6226 3.85757 15.4997 4.16699 15.4997H15.8337C16.1431 15.4997 16.4398 15.6226 16.6586 15.8414C16.8774 16.0602 17.0003 16.3569 17.0003 16.6663V17.833Z" fill="#5B9A74" />
+        </svg>
+    )
+}
+
+export default IconNoti

src/components/icons/index.ts

@@ -33,3 +33,4 @@ export { default as IconMinus } from './IconMinus'
 export { default as IconCirclePlus } from './IconCirclePlus'
 export { default as IconDoneCheckout } from './IconDoneCheckout'
 export { default as IconFilter } from './IconFilter'
+export { default as IconNoti } from './IconNoti'

src/utils/constanst.utils.ts

@@ -30,6 +30,7 @@ export const ACCOUNT_TAB = {
     CUSTOMER_INFO: '',
     ORDER: 'orders',
     FAVOURITE: 'wishlist',
+    NOTIFICATION: 'notification',
 }
 
 export const QUERY_KEY = {