diff --git a/src/assets/icons/hamburger.svg b/src/assets/icons/hamburger.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/icons/hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/minicart.svg b/src/assets/icons/minicart.svg new file mode 100644 index 0000000..7db5dc8 --- /dev/null +++ b/src/assets/icons/minicart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 0000000..e6e5a9c --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/x.svg b/src/assets/icons/x.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/icons/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/m3-logo-medium.png b/src/assets/m3-logo-medium.png new file mode 100644 index 0000000..ea2bd14 Binary files /dev/null and b/src/assets/m3-logo-medium.png differ diff --git a/src/assets/m3-logo-small.png b/src/assets/m3-logo-small.png new file mode 100644 index 0000000..5536bc3 Binary files /dev/null and b/src/assets/m3-logo-small.png differ diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss index 307b882..f9fc811 100644 --- a/src/settings/styles/global/_config.scss +++ b/src/settings/styles/global/_config.scss @@ -38,3 +38,10 @@ body { --txt-xl: 48px; } } + +a, +input, +button, +textarea { + font-family: var(--font-family-100); +} diff --git a/src/settings/styles/global/_reset.scss b/src/settings/styles/global/_reset.scss index d87d2c7..b7ae335 100644 --- a/src/settings/styles/global/_reset.scss +++ b/src/settings/styles/global/_reset.scss @@ -20,3 +20,14 @@ img { max-width: 100%; height: auto; } + +input, +button { + border: none; + background-color: transparent; +} + +.btn-ref, +button { + cursor: pointer; +} diff --git a/src/settings/styles/utils/resources/_colors.scss b/src/settings/styles/utils/resources/_colors.scss index f4a7497..3268516 100644 --- a/src/settings/styles/utils/resources/_colors.scss +++ b/src/settings/styles/utils/resources/_colors.scss @@ -2,7 +2,7 @@ $clr-common: ( 'black': #000, 'white': #fff, 'red': #ff0000, - 'green': hsl(120, 100%, 25%), + 'green': #008000, ); $clr-primary-purple: ( @@ -10,15 +10,16 @@ $clr-primary-purple: ( ); $clr-gray: ( - '100': hsl(0, 0%, 98%), - '200': hsl(0, 0%, 95%), - '300': hsl(0, 0%, 78%), - '400': hsl(0, 0%, 77%), - '450': hsl(0, 1%, 72%), - '500': hsl(0, 0%, 57%), - '600': hsl(0, 0%, 49%), - '700': hsl(0, 0%, 37%), - '800': hsl(0, 0%, 19%), - '900': hsl(0, 0%, 16%), - '1000': hsl(340, 10%, 6%), + '100': #fafafa, + '150': #f0f0f0, + '200': #f2f2f2, + '300': #c7c7c7, + '400': #c4c4c4, + '450': #b8b7b7, + '500': #919191, + '600': #7d7d7d, + '700': #5e5e5e, + '800': #303030, + '900': #292929, + '1000': #110e0f, ); diff --git a/src/template/Header/Header.styles.scss b/src/template/Header/Header.styles.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/template/Header/Header.tsx b/src/template/Header/Header.tsx deleted file mode 100644 index a5d0ee4..0000000 --- a/src/template/Header/Header.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Header() { - return
Hi, I'm Header
-} diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss new file mode 100644 index 0000000..b7ffa68 --- /dev/null +++ b/src/template/Header/index.module.scss @@ -0,0 +1,196 @@ +.header { + position: relative; + + padding: 25px 0; + background-color: var(--clr-common-black); + + @media screen and (min-width: 1025px) { + padding: 25px 0 0; + } +} + +.content { + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0 16px; + margin-bottom: 27.14px; +} + +.search { + display: flex; + align-items: center; + justify-content: center; + + min-height: auto; + height: 36px; + border: 2px solid var(--clr-gray-150); + border-radius: 5px; + + background-color: var(--clr-common-white); + + input { + width: 100%; + height: 36px; + padding: 0 9px 0 16px; + border-radius: 5px 0 0 5px; + } + + button { + display: flex; + align-items: center; + justify-content: center; + + width: 36px; + height: 100%; + + background-color: var(--clr-common-white); + } +} + +.actions-top, +.actions-bottom { + display: flex; + align-items: center; + + a { + color: var(--clr-common-white); + } +} + +// remove open menu mobile button for large devices 1025 > x +.open { + display: flex; + + @media screen and (min-width: 1025px) { + display: none; + } +} + +// remove action link for small devices and added for large devices 1025 > x +.actions-top { + a { + display: none; + } + + @media screen and (min-width: 1025px) { + a { + display: block; + } + } +} + +.menu { + @media screen and (max-width: 1024px) { + position: fixed; + width: 100vw; + height: 100vh; + left: -100%; + top: 0; + background-color: transparent; + transition: 300ms ease; + + &-content { + width: 90%; + height: 100vh; + } + } + + .actions-bottom { + width: 100%; + height: 78px; + background-color: var(--clr-common-black); + } + + .actions-bottom, + .list { + padding: 0 16px; + + a { + display: block; + text-transform: uppercase; + } + } + + .list { + height: calc(100% - 78px); + background-color: var(--clr-common-white); + padding-top: 31px; + + a { + margin-bottom: 12px; + font-weight: 500; + color: var(--clr-gray-400); + } + } +} + +.actions-bottom { + display: flex; + align-items: center; + justify-content: space-between; +} + +// menu styles for large devices 1025 > x +.menu { + &.active { + left: 0; + background-color: #0004; + } + + @media screen and (min-width: 1025px) { + width: 100%; + display: block; + + .list { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 55px; + + padding: 14px 16px; + border-top: 1px solid var(--clr-common-white); + + background-color: var(--clr-common-black); + + a { + color: var(--clr-common-white); + margin: 0; + } + } + + background-color: var(--clr-common-black); + + .actions-bottom { + display: none; + } + } +} + +/*|[X]o-o-o-o[O]|*\ +|=| SEARCH BOXS |=| +\*|[O]o-o-o-o[X]|*/ + +//remove search top box for small, medium devices +.search-top { + display: none; + + @media screen and (min-width: 1025px) { + display: flex; + } +} + +// added search bottom box for small devices, medium devices +.search-bottom { + display: flex; + padding: 0 16px; + + &-content { + width: 100%; + } + + @media screen and (min-width: 1025px) { + display: none; + } +} diff --git a/src/template/Header/index.ts b/src/template/Header/index.ts deleted file mode 100644 index e0e2673..0000000 --- a/src/template/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Header } from './Header' diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx new file mode 100644 index 0000000..02b442c --- /dev/null +++ b/src/template/Header/index.tsx @@ -0,0 +1,96 @@ +import logoImg from '../../assets/m3-logo-small.png' +import searchIcon from '../../assets/icons/search.svg' +import cartIcon from '../../assets/icons/minicart.svg' +import openIcon from '../../assets/icons/hamburger.svg' +import closeIcon from '../../assets/icons/x.svg' + +import css from './index.module.scss' +import { HTMLAttributes, useMemo, useState } from 'react' + +interface SearchProps extends HTMLAttributes {} + +export function Search({ ...props }: SearchProps) { + return ( +
+ + +
+ ) +} + +export const Header = () => { + const [isOpenMenu, setIsOpenMenu] = useState(false) + + const handleOpen = useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsOpenMenu(true) + }, + [] + ) + + const handleClose = useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsOpenMenu(false) + }, + [] + ) + + return ( +
+ +
+ ) +}