🎨 styles: header submenu

:%s
This commit is contained in:
lytrankieio123
2021-08-25 13:52:47 +07:00
parent d2ce9bbf01
commit a37eabea90
19 changed files with 175 additions and 33 deletions

View File

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

View File

@@ -13,8 +13,10 @@ const Header = memo(({ }: Props) => {
return (
<header className={s.header}>
<HeaderHighLight />
<HeaderMenu />
<HeaderSubMenu />
<div className={s.menu}>
<HeaderMenu />
<HeaderSubMenu />
</div>
</header>
)
})

View File

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

View File

@@ -19,7 +19,6 @@ const MENU = [
]
interface Props {
className?: string
children?: any
}

View File

@@ -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 {

View File

@@ -19,7 +19,6 @@ const OPTION_MENU = [
]
interface Props {
className?: string
children?: any
}

View File

@@ -0,0 +1,3 @@
.headerNoti {
@apply flex items-center;
}

View File

@@ -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 />&nbsp;<span>You can buy fresh products after <b>11pm</b> or <b>8am</b></span>
</div>
</NotiMessage>
);
};
export default HeaderNoti;

View File

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

View File

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