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} />
</div>
<HeaderSubMenuMobile />
<HeaderSubMenuMobile/>
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
<ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
<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 {
@apply hidden;
@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 {

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

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