mirror of
https://github.com/vercel/commerce.git
synced 2025-07-27 12:11:23 +00:00
🎨 styles: header submenu
:%s
This commit is contained in:
@@ -1,22 +1,8 @@
|
||||
@import "../../../styles/utilities";
|
||||
|
||||
.header {
|
||||
.btn {
|
||||
// @apply font-bold py-2 px-4 rounded;
|
||||
}
|
||||
.btnBlue {
|
||||
@apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
|
||||
}
|
||||
.link {
|
||||
color: theme("colors.warning");
|
||||
}
|
||||
.heading {
|
||||
@apply text-base font-heading;
|
||||
}
|
||||
.paragraph {
|
||||
@apply topline;
|
||||
}
|
||||
.logo {
|
||||
@apply font-logo;
|
||||
.menu {
|
||||
padding-left: 3.2rem;
|
||||
padding-right: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
@@ -13,8 +13,10 @@ const Header = memo(({ }: Props) => {
|
||||
return (
|
||||
<header className={s.header}>
|
||||
<HeaderHighLight />
|
||||
<HeaderMenu />
|
||||
<HeaderSubMenu />
|
||||
<div className={s.menu}>
|
||||
<HeaderMenu />
|
||||
<HeaderSubMenu />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
})
|
||||
|
@@ -7,6 +7,7 @@
|
||||
color: var(--white);
|
||||
.menu {
|
||||
@apply flex items-center list-none;
|
||||
padding: .8rem 0;
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-right: 3.2rem;
|
||||
|
@@ -19,7 +19,6 @@ const MENU = [
|
||||
]
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
}
|
||||
|
||||
|
@@ -2,7 +2,8 @@
|
||||
|
||||
.headerMenu {
|
||||
@apply flex justify-between items-center bg-white;
|
||||
padding: 2.4rem 3.2rem;
|
||||
padding-top: 2.4rem;
|
||||
padding-bottom: 2.4rem;
|
||||
.left {
|
||||
@apply flex items-center;
|
||||
.inputSearch {
|
||||
|
@@ -19,7 +19,6 @@ const OPTION_MENU = [
|
||||
]
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
}
|
||||
|
||||
|
@@ -0,0 +1,3 @@
|
||||
.headerNoti {
|
||||
@apply flex items-center;
|
||||
}
|
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import NotiMessage from 'src/components/common/NotiMessage/NotiMessage';
|
||||
import { IconInfo } from 'src/components/icons';
|
||||
import s from './HeaderNoti.module.scss';
|
||||
|
||||
const HeaderNoti = () => {
|
||||
return (
|
||||
<NotiMessage>
|
||||
<div className={s.headerNoti}>
|
||||
<IconInfo /> <span>You can buy fresh products after <b>11pm</b> or <b>8am</b></span>
|
||||
</div>
|
||||
</NotiMessage>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderNoti;
|
@@ -1,5 +1,20 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
|
||||
.headerHighLight {
|
||||
|
||||
.headerSubMenu {
|
||||
@apply flex justify-between items-center;
|
||||
padding-bottom: 0.8rem;
|
||||
.menu {
|
||||
@apply flex items-center list-none;
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-right: 4rem;
|
||||
}
|
||||
a {
|
||||
@appy no-underline;
|
||||
}
|
||||
&:hover {
|
||||
@apply text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,16 +1,80 @@
|
||||
import Link from 'next/link'
|
||||
import { memo } from 'react'
|
||||
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
|
||||
import { ProductFeature, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
|
||||
import HeaderNoti from './HeaderNoti/HeaderNoti'
|
||||
import s from './HeaderSubMenu.module.scss'
|
||||
|
||||
const MENU = [
|
||||
{
|
||||
name: 'New Items',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.NewItem}`,
|
||||
},
|
||||
{
|
||||
name: 'Sales',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.Sales}`,
|
||||
},
|
||||
{
|
||||
name: 'Best Sellers',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.BestSellers}`,
|
||||
},
|
||||
{
|
||||
name: 'About Us',
|
||||
link: ROUTE.ABOUT,
|
||||
},
|
||||
{
|
||||
name: 'Blog',
|
||||
link: ROUTE.BLOGS,
|
||||
},
|
||||
]
|
||||
|
||||
// note: hard code, remove later
|
||||
const CATEGORY = [
|
||||
{
|
||||
name: 'Veggie',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=veggie`,
|
||||
},
|
||||
{
|
||||
name: 'Seafood',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=seafood`,
|
||||
},
|
||||
{
|
||||
name: 'Frozen',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=frozen`,
|
||||
},
|
||||
{
|
||||
name: 'Coffee Bean',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=coffee-bean`,
|
||||
},
|
||||
{
|
||||
name: 'Sauce',
|
||||
link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=sauce`,
|
||||
},
|
||||
]
|
||||
interface Props {
|
||||
className?: string
|
||||
children?: any
|
||||
}
|
||||
|
||||
const HeaderSubMenu = memo(({ }: Props) => {
|
||||
return (
|
||||
<section className={s.headerSubMenu}>
|
||||
<section className={s.headerSubMenu}>
|
||||
<ul className={s.menu}>
|
||||
<li>
|
||||
<MenuDropdown options={CATEGORY} align="left">Categories</MenuDropdown>
|
||||
</li>
|
||||
{
|
||||
MENU.map(item => <li key={item.name}>
|
||||
<Link href={item.link}>
|
||||
<a >
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
</section>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
<HeaderNoti/>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
|
||||
|
Reference in New Issue
Block a user