Gustavo_Rallenson_Goncalves_Da_Silva/desafio-react-e-typescript
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mobile):Menu Hamburguer responsivo

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-06 22:55:24 -03:00
parent a316ed33b4
commit 4834ed54a9
4 changed files with 77 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
desafio-5/src/components/assets/icons/Hamburger_menu.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 688 B

BIN
desafio-5/src/components/assets/imgs/Logo-M3Academy-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

45
desafio-5/src/components/modules/header.module.scss
View File

@ -10,6 +10,13 @@
justify-content: space-between;
height: 22.225vh;
max-height: 160px;
&-mobileTop{
display: none;
}
&-mobilebottom{
display: none;
}
// Top-header
&-top {
@ -23,6 +30,7 @@
border-bottom: 1px solid $-gray-300;
&-logo {
border: 0;
width: 12.593%;
max-width: 264.61px;
margin: 3px 0;
@ -207,9 +215,42 @@
}
}
}
//Mobile
@media screen and (min-width: 280px) and (max-width: 490px) {
@media screen and (min-width: 280px) and (max-width: 1024px) {
.Header_wrapper {
height: 25.93vh;
max-height: 100%;
// Top-header-mobile
}
&-mobileTop {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 16px;
gap: 10px;
background: pink;
&-menu{
border: none;
min-height: 22.5px;
height: 4.083vh;
width: 8.17%;
.hamburguer{
width: 100%;
height: 100%;
}
}
}
// Top-header-desktop
&-top {
display: none;
}
//bottom-header-desktop
&-bottom {
display: none;
}
}
}

31
desafio-5/src/components/scripts/header.tsx
View File

@ -2,19 +2,21 @@ import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} fr
import HeaderStyles from "../modules/header.module.scss"
import Logo from '../assets/imgs/Logo.png';
import LogoMobile from '../assets/imgs/Logo-M3Academy-mobile.png';
import Lupa from "../assets/icons/search_Icon_desk.svg";
import Cart from "../assets/icons/cart_desk_icon.svg";
import MenuMobile from "../assets/icons/Hamburger_menu.svg";
const Header = () =>{
return (
<div className={HeaderStyles["Header_wrapper"]}>
<div className={HeaderStyles["Header_wrapper-top"]}>
<div className={HeaderStyles["Header_wrapper-top-logo"]}>
<fieldset className={HeaderStyles["Header_wrapper-top-logo"]}>
<a href="/">
<img src={Logo} alt="Logo" />
</a>
</div>
</fieldset>
<div className={HeaderStyles["Header_wrapper-top-Searchbox"]}>
<input name="search" type="text" placeholder="Buscar">
</input>
@ -32,6 +34,31 @@ const Header = () =>{
</div>
</div>
<div className={HeaderStyles["Header_wrapper-mobileTop"]}>
<fieldset className={HeaderStyles["Header_wrapper-mobileTop-menu"]}>
<img className={HeaderStyles["hamburguer"]} src={MenuMobile} alt="Logo-mobile" />
</fieldset>
{/* <fieldset className={HeaderStyles["Header_wrapper-mobileTop-menu"]}>
<a href="/">
<img src={LogoMobile} alt="Logo-mobile" />
</a>
</fieldset>
<button>
<img src={Cart} alt="Carrinho_icon" />
</button> */}
</div>
{/* <div className={HeaderStyles["Header_wrapper-mobilebottom"]}>
<div className={HeaderStyles["Header_wrapper-mobilebottom-Searchbox"]}>
<input name="search" type="text" placeholder="Buscar">
</input>
<label htmlFor="search">
<button>
<img src={Lupa} alt="Lupa" />
</button>
</label>
</div>
</div> */}
<div className={HeaderStyles["Header_wrapper-bottom"]}>
<nav className={HeaderStyles["Header_wrapper-bottom-navigator"]}>