forked from M3-Academy/desafio-react-e-typescript
feat: Cria sidebar desktop
This commit is contained in:
parent
e90b89edbd
commit
8b78465d99
61
package-lock.json
generated
61
package-lock.json
generated
@ -19,6 +19,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
@ -3081,6 +3082,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -13998,6 +14007,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
|
||||
"integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
|
||||
"integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -18914,6 +18953,11 @@
|
||||
"source-map": "^0.7.3"
|
||||
}
|
||||
},
|
||||
"@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -26695,6 +26739,23 @@
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
|
||||
"integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
|
||||
"integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.1"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-headless-accordion": "^1.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
|
||||
@ -1,7 +1,34 @@
|
||||
import React from "react";
|
||||
|
||||
const Entrega = () => {
|
||||
return <div></div>
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<section>
|
||||
<h3>Entrega</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
||||
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
||||
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus
|
||||
error sit voluptatem accusantium doloremque laudantium, totam rem
|
||||
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
|
||||
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
|
||||
est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
|
||||
sed quia non numquam eius modi tempora incidunt ut labore et dolore
|
||||
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
|
||||
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
|
||||
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
|
||||
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
|
||||
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Entrega };
|
||||
@ -1,7 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const NavBar = () => {
|
||||
return <div></div>
|
||||
}
|
||||
|
||||
export { NavBar };
|
||||
62
src/components/sidebar/index.tsx
Normal file
62
src/components/sidebar/index.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import { Root } from "../../routes/root";
|
||||
import styles from "./style.module.scss";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function SideBar() {
|
||||
return (
|
||||
<>
|
||||
<div className={styles["sidebar"]}>
|
||||
<nav className={styles["sidebar__list"]}>
|
||||
<ul>
|
||||
<li><Link to="/">Sobre</Link></li>
|
||||
<li><Link to="/pagamento">Forma de Pagamento</Link></li>
|
||||
<li><Link to="/entrega">Entrega</Link></li>
|
||||
<li><Link to="/troca">Troca e Devolução</Link></li>
|
||||
<li><Link to="/segurança">Segurança e Privacidade</Link></li>
|
||||
<li><Link to="/contato">Contato</Link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className={styles["sidebar__divider"]}></div>
|
||||
<Root />
|
||||
{/* <h3>Sobre</h3>
|
||||
<div>
|
||||
<form id="search-form" role="search">
|
||||
<input
|
||||
id="q"
|
||||
aria-label="Search contacts"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="q"
|
||||
/>
|
||||
<div
|
||||
id="search-spinner"
|
||||
aria-hidden
|
||||
hidden={true}
|
||||
/>
|
||||
<div
|
||||
className="sr-only"
|
||||
aria-live="polite"
|
||||
></div>
|
||||
</form>
|
||||
<form method="post">
|
||||
<button type="submit">New</button>
|
||||
</form>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={`contacts/1`}>Your Name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={`contacts/2`}>Your Friend</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { SideBar };
|
||||
44
src/components/sidebar/style.module.scss
Normal file
44
src/components/sidebar/style.module.scss
Normal file
@ -0,0 +1,44 @@
|
||||
.sidebar {
|
||||
display: flex;
|
||||
&__list {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 90px 0 80px;
|
||||
|
||||
li {
|
||||
margin: 20px 16px;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
text-decoration: none;
|
||||
color: var(--medium-gray-200);
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
content: "";
|
||||
background-color: var(--black);
|
||||
width: 1px;
|
||||
height: 285px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 465px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,44 @@
|
||||
import React from "react";
|
||||
|
||||
const Sobre = () => {
|
||||
return <div></div>
|
||||
}
|
||||
import styles from "./style.module.scss";
|
||||
|
||||
export { Sobre };
|
||||
const Sobre = () => {
|
||||
return (
|
||||
<>
|
||||
<section className={styles["sobre"]}>
|
||||
<h3>Sobre</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
|
||||
ab illo inventore veritatis et quasi architecto beatae vitae dicta
|
||||
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
||||
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
|
||||
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
|
||||
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
|
||||
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
|
||||
aliquam quaerat voluptatem.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
||||
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
|
||||
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
|
||||
voluptas nulla pariatur?
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { Sobre };
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
.sobre {
|
||||
width: 748px;
|
||||
height: auto;
|
||||
margin: 0 30px;
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: var(--dark-gray-200);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: var(--medium-gray-200);
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import {
|
||||
createBrowserRouter,
|
||||
RouterProvider,
|
||||
} from "react-router-dom";
|
||||
import SideBar from "./components/sidebar";
|
||||
|
||||
import './global.scss';
|
||||
|
||||
@ -14,3 +19,16 @@ root.render(
|
||||
<Institucional />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <SideBar />,
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("#root")!).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import React, { useState } from "react";
|
||||
import { Header } from "../components/header";
|
||||
import { Breadcrumb } from "../components/breadcrumbs-title";
|
||||
import { Footer } from "../components/footer";
|
||||
import { BurgerMenu } from "../components/header/MenuModal";
|
||||
import { Breadcrumb } from "../components/breadcrumbs-title";
|
||||
import { SideBar } from "../components/sidebar";
|
||||
import { Footer } from "../components/footer";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
const Institucional = () => {
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<Header handleOpenModal={() => setOpenModal(true)} />
|
||||
<BurgerMenu
|
||||
isOpen={openModal}
|
||||
@ -16,9 +18,10 @@ const Institucional = () => {
|
||||
/>
|
||||
<main>
|
||||
<Breadcrumb />
|
||||
<SideBar />
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
</ BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
15
src/routes/root.tsx
Normal file
15
src/routes/root.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import { Routes, Route } from "react-router";
|
||||
import { Sobre } from "../components/sobre/index"
|
||||
import { Entrega } from "../components/entrega";
|
||||
|
||||
const Root = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Sobre />} />
|
||||
<Route path="/entrega" element={<Entrega />} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
export { Root };
|
||||
Loading…
Reference in New Issue
Block a user