ManuelaLuanaSchumackerTavares/desafio-react-e-typescript-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(menu-mobile): Torna o menu mobile responsivo #4

Merged
ManuelaLuanaSchumackerTavares merged 1 commits from feature/menu-mobile-responsive into develop 2023-01-12 17:39:18 +00:00
Conversation 0 Commits 1 Files Changed 7 +50 -18
7 changed files with 50 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@ -23,6 +23,7 @@
"web-vitals": "^2.1.4"
},
"devDependencies": {
"react-headless-accordion": "^1.0.2",
"sass": "^1.57.1"
}
},
@ -13949,6 +13950,15 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-headless-accordion": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
"dev": true,
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -26612,6 +26622,13 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"react-headless-accordion": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
"integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
"dev": true,
"requires": {}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
package.json
View File

@ -42,6 +42,7 @@
]
},
"devDependencies": {
"react-headless-accordion": "^1.0.2",
"sass": "^1.57.1"
}
}

19
src/components/HeaderBottom.tsx
View File

@ -1,19 +1,24 @@
import React from "react";
import style from "./header-bottom.module.scss";
const HeaderBottom = () => {
return (
<header className={style["header-bottom-container"]}>
<nav className={style["header-bottom-wrapper"]}>
<button type="button" className={style["header-button"]}>
cursos
<button type="button">
<a className={style["header-button"]} href="/">
cursos
</a>
</button>
<button type="button" className={style["header-button"]}>
Saiba mais
<button type="button">
<a className={style["header-button"]} href="/">
Saiba mais
</a>
</button>
<button type="button" className={style["header-button"]}>
Institucionais
<button type="button">
<a className={style["header-button"]} href="/">
Institucionais
</a>
</button>
</nav>
</header>

8
src/components/header-bottom.module.scss
View File

@ -4,6 +4,10 @@
width: 100%;
background: variables.$color-black;
@media screen and (max-width: 1024px) {
display: none;
}
.header-bottom-wrapper {
width: 80.46875%;
display: flex;
@ -16,6 +20,10 @@
background: transparent;
margin-right: 55px;
cursor: pointer;
a {
text-decoration: none;
}
}
.header-button {

11
src/components/header-top.module.scss
View File

@ -1,13 +1,5 @@
@use "../variables.module.scss";
ul {
list-style: none;
}
li {
list-style-type: none;
}
.header-top-container {
width: 100%;
height: 76px;
@ -52,7 +44,7 @@ li {
}
.dropdown-menu {
// display: none;
width: 100%;
position: fixed;
left: 0;
top: 0;
@ -75,7 +67,6 @@ li {
.menu-bottom,
.menu-top {
width: 96.484375%;
min-width: 988px;
padding: 31px 16px;
}

10
src/globals.module.scss
View File

@ -21,5 +21,13 @@
}
body {
font-family: "Roboto", sans-serif;
font-family: variables.$font-primary;
}
ul {
list-style: none;
}
li {
list-style-type: none;
}

2
src/variables.module.scss
View File

@ -2,6 +2,8 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
$font-primary: "Roboto", sans-serif;
//colors
$color-black: #000000;