enhance: UI header

pages/404.tsx

@@ -1,4 +1,5 @@
-import { Layout } from '@components/common'
+import { Layout } from "src/components/common"
+
 export default function NotFound() {
   return (
     <div>

pages/index.tsx

@@ -1,34 +1,18 @@
 
 import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
-import {SelectCommon} from 'src/components/common'
-
-const OPTION_SORT = [
-  {
-    name: "By Name"
-  },
-  {
-    name: "Price (High to Low)"
-  },
-  {
-    name: "On Sale"
-  }
-]
 
 export default function Home() {
   return (
     <>
-      {/* <HomeBanner />
+      <HomeBanner />
-      <HomeBanner/>
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
       <HomeCTA />
       <HomeRecipe />
-      <HomeSubscribe /> */}
+      <HomeSubscribe />
-      <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
-      <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon>
 
       {/* // todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}

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

@@ -52,7 +52,10 @@
                 }
                 a {
                     @appy no-underline;
-                    &.iconFovourite {
+                    &:hover {
+                        opacity: .8;
+                    }
+                    &.iconFavourite {
                         svg path {
                             fill: var(--negative);
                         }

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

@@ -52,14 +52,14 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
             <ul className={s.menu}>
                 <li>
                     <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
-                        <a >
+                        <a>
                             <IconHistory />
                         </a>
                     </Link>
                 </li>
                 <li>
                     <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
-                        <a className={s.iconFovourite}>
+                        <a className={s.iconFavourite}>
                             <IconHeart />
                         </a>
                     </Link>

src/components/common/Layout/Layout.tsx

@@ -15,7 +15,7 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
-    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true })
+    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
 
     const toggle = () => {
         if (visibleCartDrawer) {

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

@@ -3,6 +3,9 @@
 .menuDropdown {
     @apply relative cursor-pointer;
     width: fit-content;
+    .label {
+        all: unset;
+    }
     &:hover {
         .label {
             color: var(--primary);
@@ -65,6 +68,16 @@
             margin-top: 0.4rem;
             li {
                 @apply block w-full transition-all duration-200 cursor-pointer text-active;
+                word-wrap: break-word;
+                -webkit-hyphens: auto;
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                hyphens: auto;
+                overflow-x: hidden;
+                position: relative;
+                max-width: 15rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
                 button {
                     all: unset;
                     color: currentColor;

src/components/common/MenuDropdown/MenuDropdown.tsx

@@ -16,9 +16,9 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) =>
             [s.menuDropdown]: true,
             [s.arrow]: isHasArrow,
         })}>
-            <span className={s.label}>
+            <button className={s.label}>
                 {children}
-            </span>
+            </button>
             <section className={classNames({
                 [s.menu]: true,
                 [s.left]: align === 'left',

src/components/common/QuanittyInput/QuanittyInput.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import s from './QuanittyInput.module.scss'
 import classNames from 'classnames'
-import { Minus, Plus } from '@components/icons'
+import { IconMinus, IconPlus } from '../../icons'
 interface QuanittyInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -64,7 +64,7 @@ const QuanittyInput = ({
   return (
     <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
       <div className={s.minusIcon} onClick={onMinusClick}>
-        <Minus />
+        <IconMinus />
       </div>
       <input
         {...props}
@@ -74,7 +74,7 @@ const QuanittyInput = ({
         className={s.quanittyInput}
       />
       <div className={s.plusIcon} onClick={onPlusClick}>
-        <Plus />
+        <IconPlus />
       </div>
     </div>
   )

src/components/icons/IconMinus.tsx

@@ -0,0 +1,18 @@
+const IconMinus = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconMinus

src/components/icons/IconPlus.tsx

@@ -0,0 +1,18 @@
+const IconPlus = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="2"
+      viewBox="0 0 12 2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconPlus

src/components/icons/index.ts

@@ -25,3 +25,5 @@ export { default as IconPeople } from './IconPeople'
 export { default as IconLocation } from './IconLocation'
 export { default as IconClose } from './IconClose'
 export { default as IconDelete } from './IconDelete'
+export { default as IconPlus } from './IconPlus'
+export { default as IconMinus } from './IconMinus'