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

menu hamburgue para tablet >1024

Browse Source
This commit is contained in:
Ueber James Santos 2023-01-05 17:10:36 -03:00
parent bcdaed8114
commit 300ffe4390
7 changed files with 128 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
desafio-5/src/assets/icones/menuHamburguer-icon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="23" viewBox="0 0 28 23" fill="white" 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"/>
<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"/>
<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"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 650 B

32
desafio-5/src/components/Header/SubMenu.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import React, { useContext } from "react";
import style from "../../styles/header/submenu.module.scss";
import { HeaderContext } from "../../contexts/HeaderContext";
@ -7,7 +8,8 @@ import style from "../../styles/header/submenu.module.scss";
const Submenu = () => {
const { open, menu } = useContext(HeaderContext);
return (
<div className={style["submenu"]}>
<div className={style["container"]}>
@ -26,6 +28,32 @@ const Submenu = () => {
</a>
</div>
</div>
<div className={style["submenu--mobile"]}>
<div
onClick={() => menu(false)}
className={`${style["submenu--absolute"]} ${
open == true ? style["is-open"] : ""
}`}
></div>
<div
className={`${style["submenu-links"]} ${
style["submenu-links--mobile"]
} ${open == true ? style["is-open"] : ""}`}
>
<a className={style["submenu-link-entre"]} href="#">
ENTRAR
</a>
<a className={style["submenu-link"]} href="#">
CURSOS
</a>
<a className={style["submenu-link"]} href="#">
SAIBA MAIS
</a>
<a className={style["submenu-link"]} href="#">
INSTIUCIONAL
</a>
</div>
</div>
</div>
);

6
desafio-5/src/components/Header/header.tsx
View File

@ -2,19 +2,21 @@ import React from "react";
import style from "../../styles/header/header.module.scss";
import logo from "../../assets/logos/logo-m3Academy.svg";
import { MenuHeader } from "./menuHeader";
import { Submenu } from "./SubMenu"
import { HeaderProvider } from "../../contexts/HeaderContext";
const Header = () => {
return (
<HeaderProvider>
<header className={style["header"]}>
<MenuHeader />
< Submenu />
</header>
</HeaderProvider>
)

9
desafio-5/src/components/Header/menuHeader.tsx
View File

@ -3,14 +3,19 @@ import React, { useContext } from "react";
import style from "../../styles/header/headermenu.module.scss";
import logo from "../../assets/logos/Logo-M3Academy 1m3academy-header.svg";
import CartIcon from "../../assets/icones/shoppingCart-icon.svg";
import { ReactComponent as MenuIcon } from "../../assets/icones/menuHamburguer-icon.svg";
import { BuscaMenu } from "./BuscaMenu";
import { HeaderContext } from "../../contexts/HeaderContext";
const MenuHeader = () => {
const { menu } = useContext(HeaderContext);
return (
<div className={style["container"]}>
<div className={style["menu"]}>
<div onClick={() => menu(true)} className={style["icon-menu"]}>
<MenuIcon />
</div>
<a href="#" className={style["logo"]}>
<img src={logo} alt="Logo M3" />
</a>
@ -20,7 +25,7 @@ const MenuHeader = () => {
ENTRAR
</a>
<button className={style["cart"]}>
<img src={CartIcon} alt="Logo M3" />
<img src={CartIcon} alt="cart" />
</button>
</div>
</div>

25
desafio-5/src/contexts/HeaderContext.tsx Normal file
View File

@ -0,0 +1,25 @@
import React, { createContext, ReactNode, useState } from "react";
const HeaderContext = createContext({} as IValues);
interface Props {
children: ReactNode;
}
interface IValues{
open: boolean,
menu: (stateMenu: boolean) => void
}
const HeaderProvider = ({ children }: Props) => {
const [open, setOpen] = useState(false);
function menu(stateMenu:boolean){
setOpen(stateMenu);
}
return <HeaderContext.Provider value={{open, menu}}>{children}</HeaderContext.Provider>;
};
export { HeaderProvider };
export { HeaderContext };

25
desafio-5/src/contexts/PageContext.tsx Normal file
View File

@ -0,0 +1,25 @@
import React, { createContext, ReactNode, useEffect, useState } from "react";
const PageContext = createContext({} as IValues);
interface Props {
children: ReactNode;
}
interface IValues{
content: string,
aba: (contentSelect: string) => void
}
const PageProvider = ({ children }: Props) => {
const [content, setContent] = useState('Sobre');
function aba(contentSelect:string){
setContent(contentSelect);
}
return <PageContext.Provider value={{content, aba}}>{children}</PageContext.Provider>;
};
export { PageProvider };
export { PageContext };

49
desafio-5/src/styles/header/submenu.module.scss
View File

@ -14,12 +14,12 @@
.submenu-links--desktop {
max-width: 349px;
width: 100%;
justify-content: space-between;
}
.submenu-link {
@ -34,19 +34,19 @@
transition: color .2s linear;
}
.submenu-links--desktop .submenu-link {
color: var( --whiet-100);
color: var(--whiet-100);
}
.submenu-links--mobile {
position: absolute;
z-index: 5;
top: 0;
width: 66%;
width: 94%;
height: 100%;
background-color: #fff;
@ -57,9 +57,7 @@
transition: all .2s .1s linear;
}
.submenu-links .submenu-link:hover {
color: var(--black-300);
}
.submenu--absolute {
position: absolute;
@ -81,17 +79,18 @@
//midia
@media screen and (min-width: 2500px) {
.submenu-links--desktop {
.submenu-links--desktop {
max-width: 568.62px;
}
.submenu-link{
.submenu-link {
font-weight: 500;
font-size: 28px;
line-height: 3
font-size: 28px;
line-height: 3
}
}
}
@media screen and (max-width: 1024px) {
.submenu {
@ -108,10 +107,26 @@ line-height: 3
width: 100%;
padding: 10px 0;
text-align: center;
color: var(--blue-500);
// text-align: center;
color: var(--gray-400);
border-bottom: 1px solid var(--blue-500);
}
.submenu-link-entre {
width: 100%;
padding: 31px 0 31px 16px;
background-color: var(--black-600);
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: var(--gray-400);
color: #FFFFFF;
text-decoration: none;
}
.submenu--absolute.is-open {