crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-04 04:01:21 +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"; @import "../../../styles/utilities";
.header { .header {
@apply sticky bg-white;
top: 0;
z-index: 9999;
@screen md {
padding-bottom: 1.6rem;
}
.menu { .menu {
padding-left: 3.2rem; padding-left: 3.2rem;
padding-right: 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"; @import "../../../../../styles/utilities";
.headerHighLight { .headerHighLight {
@apply flex justify-between items-center spacing-horizontal bg-primary caption; @apply hidden;
padding-top: 0.8rem; @screen md {
padding-bottom: 0.8rem; @apply flex justify-between items-center spacing-horizontal bg-primary caption;
color: var(--white); padding-top: 0.8rem;
.menu { padding-bottom: 0.8rem;
@apply flex items-center list-none; color: var(--white);
padding: .8rem 0; .menu {
li { @apply flex items-center list-none;
&:not(:last-child) { padding: .8rem 0;
margin-right: 3.2rem; li {
} &:not(:last-child) {
a { margin-right: 3.2rem;
@appy no-underline; }
a {
@appy no-underline;
}
} }
} }
} }

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

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

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

@ -1,28 +1,32 @@
@import "../../../../../styles/utilities"; @import "../../../../../styles/utilities";
.headerSubMenu { .headerSubMenu {
padding-bottom: 0.8rem; @apply hidden;
@screen lg { @screen md {
@apply flex justify-between items-center; @apply block;
} padding-bottom: 0.8rem;
.menu {
@apply flex items-center list-none;
margin-bottom: 2.4rem;
@screen lg { @screen lg {
margin-bottom: 0; @apply flex justify-between items-center;
} }
li { .menu {
&:not(:last-child) { @apply flex items-center list-none;
margin-right: 2.4rem; margin-bottom: 2.4rem;
@screen lg { @screen lg {
margin-right: 4rem; 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;
} }
} }
} }