crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 bug: toggle btn cart in from btn in header - mobile view

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-14 09:35:58 +07:00
parent f7608e5ef1
commit 4ae9ace396
3 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/Header/Header.tsx
View File

@@ -78,7 +78,7 @@ const Header = memo(({ toggleFilter }: props) => {
openModalInfo={openModalInfo} /> openModalInfo={openModalInfo} />
</div> </div>
<HeaderSubMenuMobile /> <HeaderSubMenuMobile/>
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} /> <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} /> <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
<CartDrawer <CartDrawer

26
src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
View File

@@ -47,6 +47,19 @@
} }
} }
} }
.btnCart {
all: unset;
cursor: pointer;
&:focus-visible {
outline: 2px solid #000;
}
&:hover {
svg path {
fill: var(--primary);
opacity: 0.8;
}
}
}
.menu { .menu {
@apply hidden; @apply hidden;
@screen md { @screen md {
@@ -70,19 +83,6 @@
} }
} }
} }
.btnCart {
all: unset;
cursor: pointer;
&:focus-visible {
outline: 2px solid #000;
}
&:hover {
svg path {
fill: var(--primary);
opacity: 0.8;
}
}
}
} }
} }
@screen xl { @screen xl {

30
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@@ -13,11 +13,11 @@ interface Props {
isFull: boolean, isFull: boolean,
openModalAuthen: () => void, openModalAuthen: () => void,
openModalInfo: () => void, openModalInfo: () => void,
toggleFilter:() => void, toggleFilter: () => void,
toggleCart:() => void, toggleCart: () => void,
} }
const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS] const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => { const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
const router = useRouter() const router = useRouter()
@@ -44,16 +44,16 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
<section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}> <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
<div className={s.left}> <div className={s.left}>
<div className={s.top}> <div className={s.top}>
<Logo/> <Logo />
<div className={s.iconGroup}> <div className={s.iconGroup}>
{ {
FILTER_PAGE.includes(router.pathname) && ( FILTER_PAGE.includes(router.pathname) && (
<button className={s.iconFilter} onClick={toggleFilter}> <button className={s.iconFilter} onClick={toggleFilter}>
<IconFilter/> <IconFilter />
</button> </button>
) )
} }
<button className={s.iconCart}> <button className={`${s.iconCart} ${s.btnCart}`} onClick={toggleCart}>
<IconBuy /> <IconBuy />
</button> </button>
</div> </div>
@@ -86,16 +86,16 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
<IconBuy /> <IconBuy />
</button> </button>
</li> </li>
{ {
FILTER_PAGE.includes(router.pathname) && ( FILTER_PAGE.includes(router.pathname) && (
<li className={s.iconFilterDesk}> <li className={s.iconFilterDesk}>
<button className={s.iconFilter} onClick={toggleFilter}> <button className={s.iconFilter} onClick={toggleFilter}>
<IconFilter/> <IconFilter />
</button> </button>
</li> </li>
) )
} }
</ul> </ul>
</section> </section>
) )