forked from M3-Academy/desafio-react-e-typescript
fix: corrige erro inicial das rotas do projeto #19
@ -7,10 +7,10 @@ export const HeaderBottom = () => {
|
||||
<div className={styleHeader["header__bottom"]}>
|
||||
<nav className={styleHeader["navBar__items"]}>
|
||||
|
||||
<Link className={styleHeader["list__items__link"]} to="/cursos">
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
Cursos
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
Saiba Mais
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
|
@ -10,21 +10,21 @@ export const HeaderTop = () => {
|
||||
return (
|
||||
<div className={styleHeader["header__top"]}>
|
||||
<div className={styleHeader["container__header__top"]}>
|
||||
<Link to="/" className={styleHeader["container__logo"]}>
|
||||
<Link to="/institucional/sobre" className={styleHeader["container__logo"]}>
|
||||
< img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} />
|
||||
</Link>
|
||||
<form className={styleHeader["container__search"]}>
|
||||
<input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
|
||||
<a className={styleHeader["container__search__link"]} href="/">
|
||||
<Link className={styleHeader["container__search__link"]} to="/institucional/sobre">
|
||||
<img className={styleHeader["container__search__link__img"]} src={search} alt="Icone de busca" />
|
||||
</a>
|
||||
</Link>
|
||||
</form>
|
||||
<div className={styleHeader["container__menu"]} >
|
||||
<span className={styleHeader["container__menu__enter"]}>
|
||||
<a href="/">Entrar</a>
|
||||
<Link to="/institucional/sobre">Entrar</Link>
|
||||
</span>
|
||||
<span className={styleHeader["container__menu__cart"]}>
|
||||
<Link to="/" >
|
||||
<Link to="/institucional/sobre" >
|
||||
<img src={cart} alt="icone de cart" />
|
||||
</Link>
|
||||
</span>
|
||||
|
@ -30,10 +30,10 @@ export const BurguerMenu = ({ isOpenMenu, setisOpenMenu }: MenuMobile) => {
|
||||
</div>
|
||||
</div>
|
||||
<nav className={styleHeader["navBar__items"]}>
|
||||
<Link className={styleHeader["list__items__link"]} to="/cursos">
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
Cursos
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/saiba-mais">
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
Saiba Mais
|
||||
</Link>
|
||||
<Link className={styleHeader["list__items__link"]} to="/institucional/sobre">
|
||||
|
@ -23,13 +23,13 @@ export const HeaderMobile = () => {
|
||||
</div>
|
||||
<div className={styleHeader["container__menu"]} >
|
||||
<span className={styleHeader["container__menu_cart"]}>
|
||||
<a href="/" ><img src={cart} alt="icone de cart" /></a>
|
||||
<a href="/institucional/sobre" ><img src={cart} alt="icone de cart" /></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<form className={styleHeader["container__search__mobile"]}>
|
||||
<input className={styleHeader["container__search__input"]} type="text" placeholder="Buscar..." />
|
||||
<a className={styleHeader["container__search__link"]} href="/">
|
||||
<a className={styleHeader["container__search__link"]} href="/institucional/sobre">
|
||||
<img src={search} alt="Icone de busca" />
|
||||
</a>
|
||||
</form>
|
||||
|
25
src/components/Layout/index.tsx
Normal file
25
src/components/Layout/index.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
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 >
|
||||
)
|
||||
}
|
50
src/components/Layout/styles.module.scss
Normal file
50
src/components/Layout/styles.module.scss
Normal file
@ -0,0 +1,50 @@
|
||||
@import "../../variaveis";
|
||||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
|
||||
height: auto;
|
||||
margin: 0 100px;
|
||||
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: 3000px) {
|
||||
min-height: 897px;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:$tablets) {
|
||||
margin: 0 16px;
|
||||
// z-index: -9;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $color-black1;
|
||||
|
||||
@media (min-width:$full) {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
@ -1,7 +1,6 @@
|
||||
import { Outlet } from "react-router-dom"
|
||||
import { Footer } from "../components/Footer/Footer"
|
||||
import { Header } from "../components/Header/Header"
|
||||
import { BreadCrumb } from "../components/BreadCrumb/BreadCreumb"
|
||||
|
||||
|
||||
|
||||
import styles from "./styles.module.scss"
|
||||
|
||||
|
||||
@ -10,15 +9,10 @@ import styles from "./styles.module.scss"
|
||||
|
||||
export const Home = () => {
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles["container"]}>
|
||||
<Header />
|
||||
<BreadCrumb />
|
||||
<main className={styles["main"]}>
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<h1>HOME</h1>
|
||||
</div >
|
||||
)
|
||||
}
|
@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import { NavLink, Outlet } from "react-router-dom";
|
||||
|
||||
import styleInstitucional from "./Instituitional.module.scss"
|
||||
|
||||
export const Instituitional = () => {
|
||||
export const Institucional = () => {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
@ -1,21 +1,25 @@
|
||||
import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
|
||||
import { Routes as ReactRouterRoutes, Route, Navigate } from "react-router-dom"
|
||||
import { Home } from "./pages/Home"
|
||||
import { Contact } from "./pages/Intitucional/Contact"
|
||||
import { Delivery } from "./pages/Intitucional/Delivery"
|
||||
import { FormOfPayment } from "./pages/Intitucional/FormOfPayment"
|
||||
import { Instituitional } from "./pages/Intitucional/Instituitional"
|
||||
import { Institucional } from "./pages/Intitucional"
|
||||
import { SecurityAndPrivacy } from "./pages/Intitucional/SecurityAndPrivacy"
|
||||
import { About } from "./pages/Intitucional/About"
|
||||
import { ExchangeAndEvolution } from "./pages/Intitucional/ExchangeAndEvolution"
|
||||
import { Layout } from "./components/Layout"
|
||||
|
||||
|
||||
|
||||
export const Routes = () => {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<ReactRouterRoutes>
|
||||
<Route path="/" element={< Home />}>
|
||||
< Route path="institucional" element={<Instituitional />} >
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Navigate to="/institucional/sobre" replace />} />
|
||||
<Route path="institucional" element={<Institucional />}>
|
||||
<Route path="sobre" element={<About />} />
|
||||
<Route path="forma-de-pagamento" element={<FormOfPayment />} />
|
||||
<Route path="entrega" element={<Delivery />} />
|
||||
@ -23,6 +27,8 @@ export const Routes = () => {
|
||||
<Route path="seguranca-e-privacidade" element={<SecurityAndPrivacy />} />
|
||||
<Route path="contato" element={<Contact />} />
|
||||
</Route>
|
||||
|
||||
|
||||
</Route>
|
||||
</ReactRouterRoutes >
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user