diff --git a/src/components/common/Footer/Footer.module.scss b/src/components/common/Footer/Footer.module.scss index 1eaa84456..bfe9ceead 100644 --- a/src/components/common/Footer/Footer.module.scss +++ b/src/components/common/Footer/Footer.module.scss @@ -4,20 +4,28 @@ @apply spacing-horizontal; padding-top: 4rem; padding-bottom: 2rem; + margin-bottom: 10rem; .footerMenu { - padding-bottom: 8rem; + padding-bottom: 4rem; } .menu { @apply flex flex-wrap; } @screen md { + margin-bottom: 0; padding-bottom: 4rem; + padding-left: 3.2rem; + padding-right: 3.2rem; .footerMenu { @apply flex; + padding-bottom: 8rem; .menu { @apply flex-nowrap justify-between; } } } + @screen lg { + @apply spacing-horizontal; + } } diff --git a/src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss b/src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss index 49728bc76..754ebce69 100644 --- a/src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss +++ b/src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss @@ -23,8 +23,7 @@ margin-bottom: 1.6rem; } a { - text-decoration: none; - @apply transition-all duration-200; + @apply transition-all duration-200 no-underline; &:hover { color: var(--primary); } diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index ba8271f2a..beb408522 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -2,6 +2,7 @@ import React, { memo } from 'react' import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight' import HeaderMenu from './components/HeaderMenu/HeaderMenu' import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu' +import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile' import s from './Header.module.scss' interface Props { @@ -11,13 +12,16 @@ interface Props { const Header = memo(({ }: Props) => { return ( -
- -
- - -
-
+ <> +
+ +
+ + +
+
+ + ) }) diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index e9161ea1d..ed081d10a 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' import { memo } from 'react' import InputSearch from 'src/components/common/InputSearch/InputSearch' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' -import { IconBuy, IconHistory, IconUser } from 'src/components/icons' +import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons' import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import s from './HeaderMenu.module.scss' @@ -47,7 +47,7 @@ const HeaderMenu = memo(({ }: Props) => {
  • - +
    • diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss index bcd6f4121..976913f3a 100644 --- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss +++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss @@ -27,6 +27,9 @@ &:hover { @apply text-primary; } + &.active { + @apply text-primary; + } } } } diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx index 74fb7d3db..2e3f7c49c 100644 --- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx +++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx @@ -1,4 +1,6 @@ +import classNames from 'classnames' import Link from 'next/link' +import { useRouter } from 'next/router' import { memo } from 'react' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' import { ProductFeature, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' @@ -32,23 +34,23 @@ const MENU = [ const CATEGORY = [ { name: 'Veggie', - link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=veggie`, + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, }, { name: 'Seafood', - link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=seafood`, + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, }, { name: 'Frozen', - link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=frozen`, + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, }, { name: 'Coffee Bean', - link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=coffee-bean`, + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`, }, { name: 'Sauce', - link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=sauce`, + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, }, ] interface Props { @@ -56,14 +58,18 @@ interface Props { } const HeaderSubMenu = memo(({ }: Props) => { + const router = useRouter() + return (
    - +
    ) }) diff --git a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss new file mode 100644 index 000000000..5480b5d10 --- /dev/null +++ b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss @@ -0,0 +1,50 @@ +@import "../../../../../styles/utilities"; + +.headerSubMenuMobile { + @apply fixed w-full bg-white; + bottom: 0; + left: 0; + padding: 2rem 1rem; + border-top: 1px solid var(--border-line); + box-shadow: -5px 6px 10px rgba(0, 0, 0, 0.2); + .menu { + @apply grid grid-cols-4; + li { + a { + @apply transition-all duration-200 no-underline; + &:hover { + color: var(--primary); + } + } + .menuItem { + @apply flex flex-col justify-center items-center sm-label; + .icon { + position: relative; + margin-bottom: 0.5rem; + svg path { + fill: currentColor; + } + } + &.active { + @apply text-primary; + } + &.dot { + .icon { + &::after { + @apply absolute bg-negative rounded-full; + content: ""; + top: 0; + right: 0; + $size: 1rem; + width: $size; + height: $size; + } + } + } + } + } + } + @screen md { + @apply hidden; + } +} diff --git a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx new file mode 100644 index 000000000..d2cf1bf3e --- /dev/null +++ b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx @@ -0,0 +1,66 @@ +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 { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' +import s from './HeaderSubMenuMobile.module.scss' + +const OPTION_MENU = [ + { + link: ROUTE.HOME, + name: 'Home', + icon: , + isMarked: true, + }, + { + link: ROUTE.PRODUCTS, + name: 'Shopping', + icon: , + isMarked: false, + }, + { + link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`, + name: 'Favourites', + icon: , + isMarked: false, + }, + { + link: ROUTE.ACCOUNT, + name: 'Account', + icon: , + isMarked: false, + }, +] + +interface Props { + children?: any +} + +const HeaderSubMenuMobile = memo(({ }: Props) => { + const router = useRouter() + return ( +
    + +
    + ) +}) + +export default HeaderSubMenuMobile diff --git a/src/components/icons/Heart.tsx b/src/components/icons/IconHeart.tsx similarity index 94% rename from src/components/icons/Heart.tsx rename to src/components/icons/IconHeart.tsx index f8c39b6e5..70eebcab2 100644 --- a/src/components/icons/Heart.tsx +++ b/src/components/icons/IconHeart.tsx @@ -1,5 +1,6 @@ +import React from 'react' -const Vector = ({ ...props }) => { +const IconHeart = ({ ...props }) => { return ( { ) } - export default Vector \ No newline at end of file + export default IconHeart \ No newline at end of file diff --git a/src/components/icons/IconHome.tsx b/src/components/icons/IconHome.tsx new file mode 100644 index 000000000..a79260b35 --- /dev/null +++ b/src/components/icons/IconHome.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconHome = () => { + return ( + + + + ) +} + +export default IconHome diff --git a/src/components/icons/IconShopping.tsx b/src/components/icons/IconShopping.tsx new file mode 100644 index 000000000..b0d8c279c --- /dev/null +++ b/src/components/icons/IconShopping.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconShopping = () => { + return ( + + + + ) +} + +export default IconShopping diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index a13b68230..33d0f82cc 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -4,3 +4,6 @@ export { default as IconArrowRight } from './IconArrowRight' export { default as IconUser } from './IconUser' export { default as IconHistory } from './IconHistory' export { default as IconInfo } from './IconInfo' +export { default as IconHome } from './IconHome' +export { default as IconShopping } from './IconShopping' +export { default as IconHeart } from './IconHeart' diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 266834b62..ef68ce01b 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -77,8 +77,8 @@ } .sm-label { - font-size: 1rem; - line-height: 1.6rem; + font-size: 10px; + line-height: 16px; } .spacing-horizontal { padding-left: 2rem;