forked from M3-Academy/desafio-react-e-typescript
feat: cria rotas para subpastas de institucional
This commit is contained in:
parent
4e339aac77
commit
a2f0995df5
@ -15,6 +15,7 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.4.2",
|
||||
"web-vitals": "^2.1.0",
|
||||
|
39
src/components/BreadCrumb/BreadCreumb.tsx
Normal file
39
src/components/BreadCrumb/BreadCreumb.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import { IconLink } from "../utils/IconLink";
|
||||
import { ListItem } from "../utils/ListItem";
|
||||
import homeIcon from "./assets/svgs/home.svg"
|
||||
import arrowRight from "./assets/svgs/arrow-right.svg"
|
||||
|
||||
import { useLocation, Link } from "react-router-dom"
|
||||
import styles from "./BreadCrumb.module.scss"
|
||||
export const BreadCrumb = () => {
|
||||
|
||||
const { pathname } = useLocation()
|
||||
|
||||
const routeName = pathname.split("/")[1]
|
||||
|
||||
|
||||
return (
|
||||
<nav >
|
||||
{pathname !== "/" && (
|
||||
<ul className={styles.breadNav}>
|
||||
<li>
|
||||
<Link to="/">
|
||||
<img src={homeIcon} alt="Icone de home" />
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={styles.navItem}>
|
||||
<img src={arrowRight} alt="Icone de seta para a direita" />
|
||||
|
||||
<span className={styles.routeName}>
|
||||
{routeName}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
)}
|
||||
|
||||
</nav>
|
||||
);
|
||||
}
|
27
src/components/BreadCrumb/BreadCrumb.module.scss
Normal file
27
src/components/BreadCrumb/BreadCrumb.module.scss
Normal file
@ -0,0 +1,27 @@
|
||||
.breadNav {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin: 0 7.8125%;
|
||||
padding: 30px 16px;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.routeName {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
|
||||
color: #C4C4C4;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 669 B |
Before Width: | Height: | Size: 986 B After Width: | Height: | Size: 986 B |
@ -1,6 +1,8 @@
|
||||
.newsLetter {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
|
@ -22,21 +22,6 @@
|
||||
margin: 0 16px;
|
||||
|
||||
}
|
||||
|
||||
// .container {
|
||||
// width: 94.9734%;
|
||||
|
||||
// align-items: center;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
|
||||
// @media (max-width: 1024px) {
|
||||
// flex-direction: column;
|
||||
// align-items: flex-start;
|
||||
// margin: 0 16px;
|
||||
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
&__address {
|
||||
@ -96,6 +81,7 @@
|
||||
img {
|
||||
width: 36px;
|
||||
height: 20.2px;
|
||||
|
||||
@media(min-width:2500px) {
|
||||
width: 70px;
|
||||
height: 39.27px;
|
||||
@ -109,13 +95,14 @@
|
||||
@media (max-width: 490px) {
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 370px) {
|
||||
column-gap: 5.5px;
|
||||
width: 18px;
|
||||
width: 19px;
|
||||
|
||||
column-gap: 5.5px;
|
||||
width: 18px;
|
||||
width: 19px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
@ -1,19 +1,21 @@
|
||||
import React from "react";
|
||||
import styleHeader from '../styles/Header.module.scss';
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export const HeaderBottom = () => {
|
||||
return (
|
||||
<div className={styleHeader["header__bottom"]}>
|
||||
<nav className={styleHeader["navBar__items"]}>
|
||||
<a className={styleHeader["list__items__link"]} href="/cursos">
|
||||
|
||||
<Link className={styleHeader["list__items__link"]} to="/cursos">
|
||||
Cursos
|
||||
</a>
|
||||
<a className={styleHeader["list__items__link"]} href="/saiba-mais">
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
|
||||
Saiba Mais
|
||||
</a>
|
||||
<a className={styleHeader["list__items__link"]} href="/institucionais">
|
||||
Institucionais
|
||||
</a>
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional">
|
||||
Institucional
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
|
@ -314,7 +314,7 @@ a {
|
||||
background: #FFFFFF;
|
||||
transition: all .45s;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
|
24
src/components/Layout/index.tsx
Normal file
24
src/components/Layout/index.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { Outlet } from "react-router-dom"
|
||||
import { Footer } from "../Footer/Footer"
|
||||
import { Header } from "../Header/Header"
|
||||
import { BreadCrumb } from "../BreadCrumb/BreadCreumb"
|
||||
import styles from "./styles.module.scss"
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const Layout = () => {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
<BreadCrumb />
|
||||
<main className={styles.main}>
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div >
|
||||
)
|
||||
}
|
19
src/components/Layout/styles.module.scss
Normal file
19
src/components/Layout/styles.module.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
||||
height: auto;
|
||||
margin: 0 7.8125%;
|
||||
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
}
|
@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
import { IconLink } from "../../utils/IconLink";
|
||||
import { ListItem } from "../../utils/ListItem";
|
||||
import homeIcon from "./assets/svgs/home.svg"
|
||||
import arrowRight from "./assets/svgs/arrow-right.svg"
|
||||
|
||||
export const BreadCrumb = () => {
|
||||
return (
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">
|
||||
<img src={homeIcon} alt="Icone de home" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src={homeIcon} alt="Icone de home" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={homeIcon} alt="Icone de home" />
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import "./Main.module.scss";
|
||||
|
||||
export const Main = () => {
|
||||
return (
|
||||
|
||||
<div></div>
|
||||
|
||||
);
|
||||
}
|
@ -1,12 +1,16 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { Home } from './pages/Home';
|
||||
import './index.css';
|
||||
import { BrowserRouter } from "react-router-dom"
|
||||
import { Routes } from './routes';
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Home />
|
||||
<BrowserRouter>
|
||||
<Routes />
|
||||
</BrowserRouter>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -1,16 +0,0 @@
|
||||
import React from "react";
|
||||
import { Footer } from "../components/Footer/Footer";
|
||||
import { Header } from "../components/Header/Header";
|
||||
import { Main } from "../components/Main/Main";
|
||||
|
||||
|
||||
export const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Main />
|
||||
<Footer />
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
46
src/pages/Intitucional/Institucional.module.scss
Normal file
46
src/pages/Intitucional/Institucional.module.scss
Normal file
@ -0,0 +1,46 @@
|
||||
.batata {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
||||
.sideBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #000;
|
||||
width: 100%;
|
||||
min-width: 302px;
|
||||
padding: 0;
|
||||
|
||||
@media (min-width:2500px) {}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
min-width: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
text-transform: inherit;
|
||||
|
||||
|
||||
padding: 10px 16px;
|
||||
color: #7D7D7D;
|
||||
|
||||
|
||||
&.ativo {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-right {
|
||||
background-color: aquamarine;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
71
src/pages/Intitucional/Instituicional.tsx
Normal file
71
src/pages/Intitucional/Instituicional.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
import { NavLink, Outlet } from "react-router-dom";
|
||||
|
||||
import styleInstitucional from "./Institucional.module.scss"
|
||||
|
||||
export const Instituicional = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Institucional</h1>
|
||||
<div className={styleInstitucional["batata"]}>
|
||||
<nav>
|
||||
<ul className={styleInstitucional["sideBar"]}>
|
||||
<NavLink
|
||||
to="sobre"
|
||||
className={({ isActive }) =>
|
||||
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
|
||||
}>
|
||||
Sobre
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="forma-de-pagamento"
|
||||
className={({ isActive }) =>
|
||||
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
|
||||
}>
|
||||
Forma de Pagamento
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="entrega"
|
||||
className={({ isActive }) =>
|
||||
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
|
||||
}>
|
||||
Entrega
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="troca-e-devolucao"
|
||||
className={({ isActive }) =>
|
||||
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
|
||||
}>
|
||||
Troca e Devolução
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="seguranca-e-privacidade"
|
||||
className={({ isActive }) =>
|
||||
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
|
||||
}>
|
||||
Segurança e Privacidade
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="contato"
|
||||
className={({ isActive }) =>
|
||||
isActive ? `${styleInstitucional["sideBar__item"]} ${styleInstitucional["ativo"]}` : styleInstitucional["sideBar__item"]
|
||||
}>
|
||||
Contato
|
||||
</NavLink>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<div className={styleInstitucional["content-right"]} >
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
23
src/routes.tsx
Normal file
23
src/routes.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
|
||||
import { Layout } from "./components/Layout"
|
||||
import { Instituicional } from "./pages/Intitucional/Instituicional"
|
||||
|
||||
|
||||
|
||||
export const Routes = () => {
|
||||
|
||||
return (
|
||||
<ReactRouterRoutes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route path="institucional" element={<Instituicional />}>
|
||||
<Route path="sobre" element={<div>Red</div>} />
|
||||
<Route path="forma-de-pagamento" element={<div>batata2</div>} />
|
||||
<Route path="entrega" element={<div>batata3</div>} />
|
||||
<Route path="troca-e-devolucao" element={<div>batata4</div>} />
|
||||
<Route path="seguranca-e-privacidade" element={<div>batata5</div>} />
|
||||
<Route path="contato" element={<div>batata6</div>} />
|
||||
</Route>
|
||||
</Route>
|
||||
</ReactRouterRoutes>
|
||||
)
|
||||
}
|
20
yarn.lock
20
yarn.lock
@ -1612,6 +1612,11 @@
|
||||
schema-utils "^3.0.0"
|
||||
source-map "^0.7.3"
|
||||
|
||||
"@remix-run/router@1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
|
||||
integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
|
||||
|
||||
"@rollup/plugin-babel@^5.2.0":
|
||||
version "5.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
|
||||
@ -8136,6 +8141,21 @@ react-refresh@^0.11.0:
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
|
||||
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
|
||||
|
||||
react-router-dom@^6.6.2:
|
||||
version "6.6.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.2.tgz#bbf1f9b45855b218d22fc2d294b79408a084740a"
|
||||
integrity sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==
|
||||
dependencies:
|
||||
"@remix-run/router" "1.2.1"
|
||||
react-router "6.6.2"
|
||||
|
||||
react-router@6.6.2:
|
||||
version "6.6.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.2.tgz#556f7b56cff7fe32c5c02429fef3fcb2ecd08111"
|
||||
integrity sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==
|
||||
dependencies:
|
||||
"@remix-run/router" "1.2.1"
|
||||
|
||||
react-scripts@5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
|
||||
|
Loading…
Reference in New Issue
Block a user