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

Merge pull request 'fix: correção menu mobile, footer links' (#11) from bugfix/menu-mobile into main

Browse Source 
Reviewed-on: #11
This commit is contained in:
Thiago Bronisio Damascena 2023-01-08 02:18:25 +00:00
commit fe1c7eb3f4
13 changed files with 180 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@ -24,6 +24,9 @@
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/react-modal": "^3.13.1"
}
},
"node_modules/@adobe/css-tools": {
@ -3916,6 +3919,15 @@
"@types/react": "*"
}
},
"node_modules/@types/react-modal": {
"version": "3.13.1",
"resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
"integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -21203,6 +21215,15 @@
"@types/react": "*"
}
},
"@types/react-modal": {
"version": "3.13.1",
"resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
"integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",

3
package.json
View File

@ -43,5 +43,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react-modal": "^3.13.1"
}
}

6
src/components/Footer/Footer.tsx
View File

@ -3,7 +3,7 @@ import { LinksFooter } from "./LinksFooter/LinksFooter"
import { FooterSelosDev } from "./FooterSelosDev/FooterSelosDev"
import { Newsletter } from "./Newsletter/Newsletter"
export function Footer() {
const Footer = () => {
return (
<footer>
<Newsletter />
@ -11,4 +11,6 @@ export function Footer() {
<FooterSelosDev />
</footer>
)
}
}
export { Footer };

7
src/components/Footer/LinksFooter/Links/Link.tsx
View File

@ -1,15 +1,16 @@
import React from "react";
interface linkProps {
text: string;
children?: React.ReactNode;
text?: string;
href: string;
}
export const Link = (props: linkProps) => {
const { href, text } = props;
const { href, text, children } = props;
return <li><a href={href}>{text}</a></li>
return <li><a href={href}>{text}{children}</a></li>
}
export default Link;

16
src/components/Footer/LinksFooter/LinksFooter.module.scss
View File

@ -27,7 +27,7 @@
margin-bottom: 12px;
text-transform: uppercase;
@media (max-width: 1025px) {
@media (max-width: 1024px) {
display: flex;
justify-content: space-between;
}
@ -258,7 +258,7 @@
width: 10.16px;
height: 19.62px;
position: absolute;
left: 9px;
left: 10px;
top: 4px;
@media (min-width: 2500px) {
@ -273,8 +273,8 @@
width: 19.65px;
height: 19.62px;
position: absolute;
left: 5px;
top: 4px;
left: 5.5px;
top: 4.5px;
@media (min-width: 2500px) {
width: 39.29px;
@ -303,8 +303,8 @@
width: 22.39px;
height: 15.64px;
position: absolute;
left: 3.5px;
top: 6.3px;
left: 4.3px;
top: 7.3px;
@media (min-width: 2500px) {
width: 44.77px;
@ -318,8 +318,8 @@
width: 15.64px;
height: 15.64px;
position: absolute;
left: 7px;
top: 5px;
left: 7.5px;
top: 6px;
@media (min-width: 2500px) {
width: 31.35px;

55
src/components/Footer/LinksFooter/LinksFooter.tsx
View File

@ -9,7 +9,7 @@ import { ReactComponent as Linkedlin } from "./assets/linkedlin.svg"
import titleLinks from "./assets/titleLinks.svg"
import { Link } from "./Links/Link"
export const LinksFooter = () => {
const LinksFooter = () => {
const [openInstitucional, setOpenInstitucional] = useState<boolean>(false);
const [openDuvidas, setOpenDuvidas] = useState<boolean>(false);
@ -117,45 +117,26 @@ export const LinksFooter = () => {
<div className={styleLink["container__social-networks"]}>
<ul className={styleLink["container__social-networks__circles"]}>
<li>
<a href="/">
<figure>
<Facebook className={styleLink["facebook"]} title="Imagem Facebook" />
</figure>
</a>
</li>
<li>
<a href="/">
<figure>
<Instagram className={styleLink["instagram"]} title="Imagem Instagram" />
</figure>
</a>
</li>
<Link href="/">
<Facebook className={styleLink["facebook"]} title="Imagem Facebook" />
</Link>
<li>
<a href="/">
<figure>
<Twitter className={styleLink["twitter"]} title="Imagem Twitter" />
</figure>
</a>
</li>
<Link href="/">
<Instagram className={styleLink["instagram"]} title="Imagem Instagram" />
</Link>
<li>
<a href="/">
<figure>
<Youtube className={styleLink["youtube"]} title="Imagem Youtube" />
</figure>
</a>
</li>
<Link href="/">
<Twitter className={styleLink["twitter"]} title="Imagem Twitter" />
</Link>
<li>
<a href="/">
<figure>
<Linkedlin className={styleLink["linkedlin"]} title="Imagem Linkedlin" />
</figure>
</a>
</li>
<Link href="/">
<Youtube className={styleLink["youtube"]} title="Imagem Youtube" />
</Link>
<Link href="/">
<Linkedlin className={styleLink["linkedlin"]} title="Imagem Linkedlin" />
</Link>
</ul>
<div className={styleLink["container__lorem"]}>
@ -166,4 +147,4 @@ export const LinksFooter = () => {
)
}
export default LinksFooter;
export { LinksFooter };

7
src/components/Footer/Newsletter/Newsletter.tsx
View File

@ -1,10 +1,9 @@
import React from "react"
import styleNewsletter from "./Newsletter.module.scss"
export const Newsletter = () => {
const Newsletter = () => {
return (
<section className={styleNewsletter["container"]}>
<div className={styleNewsletter["container__wrapper"]}>
<p>ASSINE NOSSA NEWSLETTER</p>
<form>
@ -16,8 +15,8 @@ export const Newsletter = () => {
</div>
</form>
</div>
</section >
</section>
)
}
export default Newsletter
export { Newsletter };

14
src/components/Header/Header.module.scss
View File

@ -12,7 +12,7 @@
padding: 25px 16px;
}
&__container-logo {
&__logo {
width: 136px;
height: 25.86px;
@ -34,7 +34,7 @@
}
}
&__container-input-busca {
&__input-busca {
position: relative;
width: 24.452%;
@media (max-width: 1024px) {
@ -45,7 +45,7 @@
width: 22.421%;
}
.input-busca {
.input {
width: 100%;
height: 32px;
padding: 8px 44px 8px 16px;
@ -83,7 +83,7 @@
right: 17px;
cursor: pointer;
@media (max-width: 1025px) {
@media (max-width: 1024px) {
display: none;
}
@ -106,7 +106,7 @@
}
}
&__container-login-cart {
&__login-cart {
display: flex;
p {
@ -201,10 +201,10 @@
}
}
.container-nav {
&__navigation {
background-color: var(--black);
padding: 14px 100.32px 14px 100px;
@media (max-width: 1025px) {
@media (max-width: 1024px) {
display: none;
}

18
src/components/Header/Header.tsx
View File

@ -1,12 +1,12 @@
import React from "react";
import { InputMenuMobile } from "./InputMenuMobile/InputMenuMobile"
import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer"
import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer";
import styleHeader from "./Header.module.scss"
import logo from "./assets/logo-m3.png"
import { ReactComponent as Cart } from "./assets/cart.svg"
import { ReactComponent as Search } from "./assets/search.svg"
export function Header() {
const Header = () => {
return (
<header className={styleHeader["container"]}>
@ -15,15 +15,15 @@ export function Header() {
<MenuHamburguer />
<div className={styleHeader["container__wrapper__container-logo"]}>
<div className={styleHeader["container__wrapper__logo"]}>
<a href="teste">
<img className={styleHeader["logo-m3"]} src={logo} alt="Logo M3 Academy" />
</a>
</div>
<div className={styleHeader["container__wrapper__container-input-busca"]}>
<div className={styleHeader["container__wrapper__input-busca"]}>
<input
className={styleHeader["input-busca"]}
className={styleHeader["input"]}
placeholder="Buscar...">
</input>
<button className={styleHeader["button-search"]}>
@ -31,7 +31,7 @@ export function Header() {
</button>
</div>
<div className={styleHeader["container__wrapper__container-login-cart"]}>
<div className={styleHeader["container__wrapper__login-cart"]}>
<p>ENTRAR</p>
<button>
<Cart className={styleHeader["cart-svg"]} title="Carrinho" />
@ -42,7 +42,7 @@ export function Header() {
<InputMenuMobile />
<nav className={styleHeader["container-nav"]}>
<nav className={styleHeader["container__navigation"]}>
<ul>
<li><a href="teste">CURSOS</a></li>
<li><a href="teste">SAIBA MAIS</a></li>
@ -51,4 +51,6 @@ export function Header() {
</nav>
</header>
)
}
}
export { Header };

6
src/components/Header/InputMenuMobile/InputMenuMobile.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import styleInput from "./inputMenuMobile.module.scss"
import { ReactComponent as Search } from "../assets/search.svg"
export const InputMenuMobile = () => {
const InputMenuMobile = () => {
return (
<form className={styleInput["container__form-input-button"]}>
@ -15,11 +15,11 @@ export const InputMenuMobile = () => {
<button
type="submit"
className={styleInput["container__form-input-button__button"]}>
<Search className={styleInput["container__form-input-button__button__svg"]} title="Icone de busca" />
<Search className={styleInput["svg"]} title="Icone de busca" />
</button>
</form>
)
}
export default InputMenuMobile;
export { InputMenuMobile };

6
src/components/Header/InputMenuMobile/inputMenuMobile.module.scss
View File

@ -28,16 +28,14 @@
&__button {
position: absolute;
z-index: 10;
border: none;
background: transparent;
outline: none;
top: 8px;
right: 30px;
right: 31.2px;
width: 18px;
height: 18px;
&__svg {
.svg {
width: 18px;
height: 18px;
color: var(--black-200);

77
src/components/Header/MenuHamburguer/MenuHamburguer.module.scss
View File

@ -1,18 +1,73 @@
.container {
&__wrapper {
&__btnHamburguer {
@media (min-width: 1025px) {
display: none;
}
button {
background: transparent;
border: none;
width: 28px;
height: 22.5px;
img {
width: 28px;
height: 22.5px;
}
@media (min-width: 1025px) {
display: none;
}
.button {
width: 100%;
height: 100%;
background: transparent;
border: none;
.svg {
width: 100%;
height: 100%;
}
}
}
}
.container-modal {
width: 100%;
height: 585px;
background: white;
&__top-modal {
display: flex;
justify-content: space-between;
background: var(--black);
padding: 31px 16px;
a {
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
color: var(--white);
text-decoration: none;
text-transform: uppercase;
}
}
&__list {
padding: 31px 16px;
list-style: none;
li:nth-child(2) {
margin: 12px 0;
}
a {
text-decoration: none;
color: var(--gray-100);
font-family: var(--font-roboto);
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
}
}
}
.outside-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-right: 36px;
background: rgba(69, 69, 69, 0.7);
}

61
src/components/Header/MenuHamburguer/MenuHamburguer.tsx
View File

@ -1,50 +1,51 @@
import React, { useState } from "react";
import styleMenu from "./MenuHamburguer.module.scss"
import styleModal from "./MenuHamburguer.module.scss";
import Modal from "react-modal"
import hamburguer from "../assets/hamburguer.svg"
import closeMenu from "../assets/close.svg"
import { ReactComponent as Close } from "../assets/close.svg"
import { ReactComponent as Hamburguer } from "../assets/hamburguer.svg"
export const MenuHamburguer = () => {
const MenuHamburguer = () => {
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const [modalIsOpen, setIsOpen] = useState(false);
const handleMenuHamburguer = (state: boolean) => {
setMenuOpen(!state)
};
function openModal() {
setIsOpen(true)
}
function closeModal() {
setIsOpen(false)
}
return (
<>
<div className={styleMenu["container__wrapper__btnHamburguer"]}>
<button type="button" onClick={() => handleMenuHamburguer(menuOpen)}>
<img src={hamburguer} alt="Imagem expansão de menu" />
<div className={styleModal["container__wrapper"]}>
<button className={styleModal["button"]} onClick={openModal} type="button" aria-label="Abrir modal">
<Hamburguer className={styleModal["svg"]} title="Menu" />
</button>
</div>
{modalIsOpen &&
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
ariaHideApp={false}
overlayClassName={styleModal[`outside-modal`]}
className={styleModal[`container-modal`]}>
{menuOpen &&
<>
<div>
<div className={styleModal[`container-modal__top-modal`]}>
<a href="/">Entrar</a>
<button type="button" aria-label="Botão fechar menu">
<img src={closeMenu} alt="Imagem fechar menu" />
</button>
<Close onClick={closeModal} title="Fechar menu" />
</div>
<nav>
<ul>
<li><a href="/">Cursos</a></li>
<li><a href="/">Saiba mais</a></li>
<li><a href="/">Institucionais</a></li>
</ul>
</nav>
</>
<ul className={styleModal[`container-modal__list`]}>
<li><a href="/">Cursos</a></li>
<li><a href="/">Saiba Mais</a></li>
<li><a href="/">Institucionais</a></li>
</ul>
</Modal>
}
</>
)
}
export default MenuHamburguer;
export { MenuHamburguer };