mirror of
https://github.com/vercel/commerce.git
synced 2025-07-04 04:01:21 +00:00
🎨 styles: header menu
:%s
This commit is contained in:
lytrankieio123
parent
4d3ba63eaf
commit
2d0ac99822
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
@import "../../../styles/utilities";
|
||||
|
||||
.menuDropdown {
|
||||
// todo: remove
|
||||
margin-left: 20rem;
|
||||
|
||||
@apply relative cursor-pointer;
|
||||
width: fit-content;
|
||||
min-width: 4.8rem;
|
||||
|
||||
11
src/components/icons/IconHistory.tsx
Normal file
11
src/components/icons/IconHistory.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const IconHistory = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0C7.43639 0.00731219 4.97349 0.998914 3.12 2.77V1C3.12 0.734784 3.01464 0.48043 2.82711 0.292893C2.63957 0.105357 2.38522 0 2.12 0C1.85478 0 1.60043 0.105357 1.41289 0.292893C1.22536 0.48043 1.12 0.734784 1.12 1V5.5C1.12 5.76522 1.22536 6.01957 1.41289 6.20711C1.60043 6.39464 1.85478 6.5 2.12 6.5H6.62C6.88522 6.5 7.13957 6.39464 7.32711 6.20711C7.51464 6.01957 7.62 5.76522 7.62 5.5C7.62 5.23478 7.51464 4.98043 7.32711 4.79289C7.13957 4.60536 6.88522 4.5 6.62 4.5H4.22C5.50578 3.15636 7.21951 2.30265 9.06653 2.08567C10.9136 1.86868 12.7785 2.30198 14.3407 3.31104C15.9028 4.32011 17.0646 5.84191 17.6263 7.61479C18.188 9.38767 18.1145 11.3009 17.4184 13.0254C16.7223 14.7499 15.4472 16.1781 13.8122 17.0643C12.1772 17.9505 10.2845 18.2394 8.45956 17.8813C6.63463 17.5232 4.99147 16.5405 3.81259 15.1022C2.63372 13.6638 1.99279 11.8597 2 10C2 9.73478 1.89464 9.48043 1.70711 9.29289C1.51957 9.10536 1.26522 9 1 9C0.734784 9 0.48043 9.10536 0.292893 9.29289C0.105357 9.48043 0 9.73478 0 10C0 11.9778 0.58649 13.9112 1.6853 15.5557C2.78412 17.2002 4.3459 18.4819 6.17317 19.2388C8.00043 19.9957 10.0111 20.1937 11.9509 19.8079C13.8907 19.422 15.6725 18.4696 17.0711 17.0711C18.4696 15.6725 19.422 13.8907 19.8079 11.9509C20.1937 10.0111 19.9957 8.00043 19.2388 6.17317C18.4819 4.3459 17.2002 2.78412 15.5557 1.6853C13.9112 0.58649 11.9778 0 10 0ZM10 6C9.73478 6 9.48043 6.10536 9.29289 6.29289C9.10536 6.48043 9 6.73478 9 7V10C9 10.2652 9.10536 10.5196 9.29289 10.7071C9.48043 10.8946 9.73478 11 10 11H12C12.2652 11 12.5196 10.8946 12.7071 10.7071C12.8946 10.5196 13 10.2652 13 10C13 9.73478 12.8946 9.48043 12.7071 9.29289C12.5196 9.10536 12.2652 9 12 9H11V7C11 6.73478 10.8946 6.48043 10.7071 6.29289C10.5196 6.10536 10.2652 6 10 6Z" fill="#5B9A74" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconHistory
|
||||
@ -2,4 +2,4 @@ export { default as IconBuy } from './IconBuy'
|
||||
export { default as IconSearch } from './IconSearch'
|
||||
export { default as IconArrowRight } from './IconArrowRight'
|
||||
export { default as IconUser } from './IconUser'
|
||||
|
||||
export { default as IconHistory } from './IconHistory'
|
||||
|
||||
@ -9,8 +9,9 @@ export const ROUTE = {
|
||||
HOME: '/',
|
||||
PRODUCTS: '/products',
|
||||
ABOUT: '/about',
|
||||
ACCOUNT: '/account',
|
||||
|
||||
BUSSINESS: '/bussiness',
|
||||
|
||||
CONTACT: '/contact',
|
||||
FAQ: '/faq',
|
||||
CUSTOMER_SERVICE: '/customer-service',
|
||||
@ -19,6 +20,16 @@ export const ROUTE = {
|
||||
BLOGS: '/blogs',
|
||||
}
|
||||
|
||||
export const ACCOUNT_TAB = {
|
||||
CUSTOMER_INFO: '',
|
||||
ORDER: 'orders',
|
||||
FAVOURITE: 'wishlist',
|
||||
}
|
||||
|
||||
export const QUERY_KEY = {
|
||||
TAB: 'tab'
|
||||
}
|
||||
|
||||
export const KEY = {
|
||||
ENTER: 'Enter',
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user