diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss index 8d97f971e..4e850d237 100644 --- a/src/components/common/CartDrawer/CartDrawer.module.scss +++ b/src/components/common/CartDrawer/CartDrawer.module.scss @@ -2,8 +2,11 @@ .cartDrawer { - @apply flex flex-col h-full; + @apply flex flex-col custom-scroll; + @screen md { + @apply h-full; + } .body { - @apply flex flex-col overflow-y-auto overflow-x-hidden h-full custom-scroll; + @apply flex flex-col overflow-x-hidden h-full custom-scroll; } } \ No newline at end of file diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx index 9410cfd9c..18a55677a 100644 --- a/src/components/common/CartDrawer/CartDrawer.tsx +++ b/src/components/common/CartDrawer/CartDrawer.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useCartDrawer } from 'src/components/contexts/CartDrawer/CartDrawerContext'; import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; import { DrawerCommon } from '..'; import s from './CartDrawer.module.scss'; @@ -8,24 +9,24 @@ import CartRecommendation from './components/CartRecommendation/CartRecommendati import ProductsInCart from './components/ProductsInCart/ProductsInCart'; interface Props { - visible: boolean - onClose: () => void + } -const CartDrawer = ({ visible, onClose }: Props) => { +const CartDrawer = ({ }: Props) => { + const { cartVisible, closeCartDrawer } = useCartDrawer() return ( + visible={cartVisible} + onClose={closeCartDrawer}>
- +
- +
diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss index 0fc8b5b35..54f459e73 100644 --- a/src/components/common/DrawerCommon/DrawerCommon.module.scss +++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss @@ -30,12 +30,12 @@ @apply flex flex-col bg-white; width: fit-content; height: 100vh; - width: 100%; + width: 90%; margin-left: auto; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15); - // transform: none; @screen md { + width: 100%; max-width: 52rem; } .top { diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index d1d88adda..a0b220c08 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -19,15 +19,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => { const [isFullHeader, setIsFullHeader] = useState(true) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false }) - const { visible: visibleCartDrawer, openModal: openCartDrawer, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false }) - - const toggleCart = () => { - if (visibleCartDrawer) { - closeCartDrawer() - } else { - openCartDrawer() - } - } useEffect(() => { const handleScroll = () => { @@ -36,10 +27,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => { } else { setIsFullHeader(true) } - // if (!isMobile()) { - // } else { - // setIsFullHeader(true) - // } } window.addEventListener('scroll', handleScroll) return () => { @@ -56,7 +43,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => { @@ -68,7 +54,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => { isFull={isFullHeader} visibleFilter={visibleFilter} toggleFilter={toggleFilter} - toggleCart={toggleCart} openModalAuthen={openModalAuthen} openModalInfo={openModalInfo} /> @@ -78,9 +63,7 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => { - + ) }) diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index 74ebc1187..671055f1b 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -5,6 +5,7 @@ import { memo, useMemo } from 'react' import { ButtonCommon } from 'src/components/common' import InputSearch from 'src/components/common/InputSearch/InputSearch' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' +import { useCartDrawer } from 'src/components/contexts/CartDrawer/CartDrawerContext' import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons' import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import Logo from '../../../Logo/Logo' @@ -17,13 +18,12 @@ interface Props { openModalAuthen: () => void, openModalInfo: () => void, toggleFilter: () => void, - toggleCart: () => void, } -const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => { +const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter }: Props) => { const router = useRouter() - + const { toggleCartDrawer } = useCartDrawer() const optionMenu = useMemo(() => [ { @@ -74,7 +74,7 @@ const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthe ) } - @@ -108,7 +108,7 @@ const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthe
  • -
  • diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 4070c8aa6..f2e898425 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,14 +1,8 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' -import { useModalCommon } from 'src/components/hooks' -import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils' -import { ScrollToTop } from '..' -import Footer from '../Footer/Footer' -import Header from '../Header/Header' -import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList' -import s from './Layout.module.scss' - +import { CartDrawerProvider } from 'src/components/contexts/CartDrawer/CartDrawerProvider' +import LayoutContent from './LayoutContent/LayoutContent' interface Props { className?: string children?: any @@ -16,37 +10,14 @@ interface Props { // note: demo code const Layout: FC = ({ children }) => { - const { locale = 'en-US', pathname } = useRouter() - const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false }) - - const router = useRouter() - - const toggleFilter = () => { - if (visibleFilter) { - closeFilter() - } else { - openFilter() - } - } - + const { locale = 'en-US' } = useRouter() return ( -
    -
    - { - router.pathname === ROUTE.ACCOUNT ? -
    -
    {children}
    -
    : -
    {children}
    - } -
    - - { - FILTER_PAGE.includes(pathname) && (
    ) - } -
    -
    + + + {children} + +
    ) diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/LayoutContent/LayoutContent.module.scss similarity index 100% rename from src/components/common/Layout/Layout.module.scss rename to src/components/common/Layout/LayoutContent/LayoutContent.module.scss diff --git a/src/components/common/Layout/LayoutContent/LayoutContent.tsx b/src/components/common/Layout/LayoutContent/LayoutContent.tsx new file mode 100644 index 000000000..70c078f3a --- /dev/null +++ b/src/components/common/Layout/LayoutContent/LayoutContent.tsx @@ -0,0 +1,53 @@ +import { useRouter } from 'next/router' +import { FC } from 'react' +import { useCartDrawer } from 'src/components/contexts/CartDrawer/CartDrawerContext' +import { useModalCommon } from 'src/components/hooks' +import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils' +import { CartDrawer, Footer, ScrollToTop } from '../..' +import Header from '../../Header/Header' +import MenuNavigationProductList from '../../MenuNavigationProductList/MenuNavigationProductList' +import s from './LayoutContent.module.scss' + +interface Props { + className?: string + children?: any +} + +const LayoutContent: FC = ({ children }) => { + const { pathname } = useRouter() + const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false }) + const router = useRouter() + + const toggleFilter = () => { + if (visibleFilter) { + closeFilter() + } else { + openFilter() + } + } + + return ( + <> +
    +
    + { + router.pathname === ROUTE.ACCOUNT ? +
    +
    {children}
    +
    : +
    {children}
    + } +
    + + { + FILTER_PAGE.includes(pathname) && (
    ) + } +
    +
    + + + + ) +} + +export default LayoutContent diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss index 94647504d..3c1941310 100644 --- a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss +++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss @@ -4,7 +4,7 @@ @apply spacing-horizontal; margin: 0 auto 5.6rem; @screen md { - @apply flex; + @apply flex justify-center; margin: 5.6rem auto; } @@ -16,6 +16,9 @@ @screen sm-only { margin-bottom: 2rem; } + @screen md { + max-width: 50%; + } @screen lg { max-width: 60rem; } diff --git a/src/components/contexts/CartDrawer/CartDrawerContext.tsx b/src/components/contexts/CartDrawer/CartDrawerContext.tsx new file mode 100644 index 000000000..8a24be1be --- /dev/null +++ b/src/components/contexts/CartDrawer/CartDrawerContext.tsx @@ -0,0 +1,20 @@ +import { createContext, useContext } from 'react'; + +export type CartDrawerContextType = { + cartVisible: boolean; + toggleCartDrawer: (visible?: boolean) => void; + openCartDrawer: () => void; + closeCartDrawer: () => void; +}; +export const DEFAULT_CART_DRAWER_CONTEXT: CartDrawerContextType = { + cartVisible: false, + toggleCartDrawer: () => { }, + openCartDrawer: () => { }, + closeCartDrawer: () => { }, +}; + +export const CartDrawerContext = createContext(DEFAULT_CART_DRAWER_CONTEXT) + +export function useCartDrawer() { + return useContext(CartDrawerContext); +} diff --git a/src/components/contexts/CartDrawer/CartDrawerProvider.tsx b/src/components/contexts/CartDrawer/CartDrawerProvider.tsx new file mode 100644 index 000000000..3a08d57e7 --- /dev/null +++ b/src/components/contexts/CartDrawer/CartDrawerProvider.tsx @@ -0,0 +1,42 @@ +import { ReactNode, useEffect, useState } from "react"; +import { CartDrawerContext } from "./CartDrawerContext"; + +type Props = { + children: ReactNode; +}; + +export function CartDrawerProvider({ children }: Props) { + const [visible, setVisible] = useState(false); + + useEffect(() => { + const bodyElement = document.getElementsByTagName('body')[0] + if (bodyElement) { + if (visible) { + bodyElement.style.overflow = 'hidden' + } else { + bodyElement.style.overflow = 'auto' + bodyElement.removeAttribute('scroll') + } + } + }, [visible]) + + const closeCartDrawer = () => { + setVisible(false); + }; + + const openCartDrawer = () => { + setVisible(true); + }; + + const toggleCartDrawer = () => { + setVisible(!visible); + }; + + return ( + <> + + {children} + + + ); +} \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss index 645ff7259..2bb98ee39 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss @@ -4,7 +4,7 @@ @apply spacing-horizontal; padding-bottom: 4rem; @screen md { - @apply flex; + @apply flex justify-center; padding-bottom: 5.6rem; } } \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss index a8b6174cb..fab81eb9b 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -3,6 +3,9 @@ @screen sm-only { margin-bottom: 2rem; } +@screen md { + max-width: 50%; +} @screen lg { max-width: 60rem; } diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 8fb0a196b..9f9e0830f 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -1,4 +1,4 @@ -export const BLUR_DATA_IMG = 'data:image/png;base64,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' +export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII=' export const SOCIAL_LINKS = { FB: 'FB',