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: header menu

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-08-25 11:42:22 +07:00
parent 4d3ba63eaf
commit 2d0ac99822
7 changed files with 88 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,9 @@
import { FC, memo } from 'react'
import { IconUser } from 'src/components/icons'
import MenuDropdown from '../MenuDropdown/MenuDropdown'
import React, { memo } from 'react'
import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
import HeaderMenu from './components/HeaderMenu/HeaderMenu'
import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
import s from './Header.module.scss'
const OPTION_MENU = [
{
link: '/',
name: 'Account',
},
{
link: '/',
name: 'Logout',
},
]
// {/* <MenuDropdown options={OPTION_MENU} isHasArrow={false}><IconUser /></MenuDropdown> */}
interface Props {
className?: string
children?: any

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

@@ -1,5 +1,19 @@
@import "../../../../../styles/utilities";
.headerHighLight {
.headerMenu {
@apply flex justify-between items-center bg-white;
.left {
@apply flex items-center;
}
.menu {
@apply flex items-center list-none;
li {
&:not(:last-child) {
margin-right: 4.8rem;
}
a {
@appy no-underline;
}
}
}
}

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

@@ -1,6 +1,23 @@
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 { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import s from './HeaderMenu.module.scss'
const OPTION_MENU = [
{
link: '/',
name: 'Account',
},
{
link: '/',
name: 'Logout',
},
]
interface Props {
className?: string
children?: any
@@ -8,9 +25,36 @@ interface Props {
const HeaderMenu = memo(({ }: Props) => {
return (
<section className={s.headerMenu}>
</section>
<section className={s.headerMenu}>
<div className={s.left}>
<div>Online Grocery</div>
<InputSearch />
</div>
<ul className={s.menu}>
<li>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
<a >
<IconHistory />
</a>
</Link>
</li>
<li>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
<a >
<IconHistory />
</a>
</Link>
</li>
<li>
<MenuDropdown options={OPTION_MENU} isHasArrow={false}><IconUser /></MenuDropdown>
</li>
<li>
<button>
<IconBuy />
</button>
</li>
</ul>
</section>
)
})