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

🎨 styles: heade submenur responsive

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-08-25 16:30:48 +07:00
parent 6ab7b0ae97
commit c65bf6aab7
13 changed files with 185 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 (
<header className={s.header}>
<HeaderHighLight />
<div className={s.menu}>
<HeaderMenu />
<HeaderSubMenu />
</div>
</header>
<>
<header className={s.header}>
<HeaderHighLight />
<div className={s.menu}>
<HeaderMenu />
<HeaderSubMenu />
</div>
</header>
<HeaderSubMenuMobile />
</>
)
})

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

@@ -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) => {
<li>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
<a >
<IconHistory />
<IconHeart />
</a>
</Link>
</li>

3
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
View File

@@ -27,6 +27,9 @@
&:hover {
@apply text-primary;
}
&.active {
@apply text-primary;
}
}
}
}

20
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
View File

@@ -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 (
<section className={s.headerSubMenu}>
<ul className={s.menu}>
{/* todo: handle active item */}
<li>
<MenuDropdown options={CATEGORY} align="left">Categories</MenuDropdown>
</li>
{
MENU.map(item => <li key={item.name}>
MENU.map(item => <li key={item.name}
className={classNames({ [s.active]: router.asPath === item.link })}>
<Link href={item.link}>
<a >
{item.name}
@@ -73,7 +79,7 @@ const HeaderSubMenu = memo(({ }: Props) => {
</li>)
}
</ul>
<HeaderNoti/>
<HeaderNoti />
</section>
)
})

50
src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss Normal file
View File

@@ -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;
}
}

66
src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx Normal file
View File

@@ -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: <IconHome />,
isMarked: true,
},
{
link: ROUTE.PRODUCTS,
name: 'Shopping',
icon: <IconShopping />,
isMarked: false,
},
{
link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`,
name: 'Favourites',
icon: <IconHeart />,
isMarked: false,
},
{
link: ROUTE.ACCOUNT,
name: 'Account',
icon: <IconUser />,
isMarked: false,
},
]
interface Props {
children?: any
}
const HeaderSubMenuMobile = memo(({ }: Props) => {
const router = useRouter()
return (
<header className={s.headerSubMenuMobile}>
<ul className={s.menu}>
{
OPTION_MENU.map(item => <li key={item.name}>
<Link href={item.link}>
<a >
<div className={classNames({
[s.menuItem]: true,
[s.dot]: item.isMarked,
[s.active]: router.pathname === item.link, // todo: handle active item
})}>
<span className={s.icon}>{item.icon}</span>
<span className={s.label}>{item.name}</span>
</div>
</a>
</Link>
</li>)
}
</ul>
</header>
)
})
export default HeaderSubMenuMobile