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

🎨 styles: responsive header main menu

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-25 15:32:01 +07:00
parent 10a4e703d6
commit 6ab7b0ae97
5 changed files with 90 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/Header/Header.module.scss
View File

@ -1,6 +1,12 @@
@import "../../../styles/utilities";
.header {
@apply sticky bg-white;
top: 0;
z-index: 9999;
@screen md {
padding-bottom: 1.6rem;
}
.menu {
padding-left: 3.2rem;
padding-right: 3.2rem;

29
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
View File

@ -1,19 +1,22 @@
@import "../../../../../styles/utilities";
.headerHighLight {
@apply flex justify-between items-center spacing-horizontal bg-primary caption;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
color: var(--white);
.menu {
@apply flex items-center list-none;
padding: .8rem 0;
li {
&:not(:last-child) {
margin-right: 3.2rem;
}
a {
@appy no-underline;
@apply hidden;
@screen md {
@apply flex justify-between items-center spacing-horizontal bg-primary caption;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
color: var(--white);
.menu {
@apply flex items-center list-none;
padding: .8rem 0;
li {
&:not(:last-child) {
margin-right: 3.2rem;
}
a {
@appy no-underline;
}
}
}
}

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

@ -1,33 +1,56 @@
@import "../../../../../styles/utilities";
.headerMenu {
@apply flex justify-between items-center bg-white;
padding-top: 2.4rem;
padding-bottom: 2.4rem;
padding-top: 1.6rem;
padding-bottom: 0.8rem;
@screen md {
@apply flex justify-between items-center;
padding-top: 2.4rem;
padding-bottom: 2.4rem;
}
.left {
@apply flex items-center;
.top {
@apply flex justify-between items-center;
.iconCart {
}
}
.inputSearch {
margin-left: 4.8rem;
//todo: remove
border: 1px solid red;
margin-top: 2.4rem;
@screen lg {
min-width: 51.2rem;
max-width: 50%;
}
}
}
.menu {
@apply flex items-center list-none;
li {
@apply flex justify-center items-center w-full;
&:not(:last-child) {
margin-right: 4.8rem;
@screen lg {
margin-right: 6.4rem;
@screen md {
@apply flex items-center;
.top {
.iconCart {
@apply hidden;
}
}
a {
@appy no-underline;
.inputSearch {
margin-left: 4.8rem;
margin-top: 0;
}
}
}
.menu {
@apply hidden;
@screen md {
@apply flex items-center list-none;
li {
@apply flex justify-center items-center w-full;
&:not(:last-child) {
margin-right: 4.8rem;
@screen lg {
margin-right: 6.4rem;
}
}
a {
@appy no-underline;
}
}
}
}

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

@ -26,7 +26,12 @@ const HeaderMenu = memo(({ }: Props) => {
return (
<section className={s.headerMenu}>
<div className={s.left}>
<div>Online Grocery</div>
<div className={s.top}>
<div>Online Grocery</div>
<button className={s.iconCart}>
<IconBuy />
</button>
</div>
<div className={s.inputSearch}>
<InputSearch />
</div>

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

@ -1,28 +1,32 @@
@import "../../../../../styles/utilities";
.headerSubMenu {
padding-bottom: 0.8rem;
@screen lg {
@apply flex justify-between items-center;
}
.menu {
@apply flex items-center list-none;
margin-bottom: 2.4rem;
@apply hidden;
@screen md {
@apply block;
padding-bottom: 0.8rem;
@screen lg {
margin-bottom: 0;
@apply flex justify-between items-center;
}
li {
&:not(:last-child) {
margin-right: 2.4rem;
@screen lg {
margin-right: 4rem;
.menu {
@apply flex items-center list-none;
margin-bottom: 2.4rem;
@screen lg {
margin-bottom: 0;
}
li {
&:not(:last-child) {
margin-right: 2.4rem;
@screen lg {
margin-right: 4rem;
}
}
a {
@appy no-underline;
}
&:hover {
@apply text-primary;
}
}
a {
@appy no-underline;
}
&:hover {
@apply text-primary;
}
}
}