From 8b78465d99228944c9b3d8f228b0527cf708b6f6 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Mon, 9 Jan 2023 19:38:44 -0300 Subject: [PATCH] feat: Cria sidebar desktop --- package-lock.json | 61 +++++++++++++++++++++++ package.json | 1 + src/components/entrega/index.tsx | 31 +++++++++++- src/components/navbar/index.tsx | 7 --- src/components/navbar/style.module.scss | 0 src/components/sidebar/index.tsx | 62 ++++++++++++++++++++++++ src/components/sidebar/style.module.scss | 44 +++++++++++++++++ src/components/sobre/index.tsx | 45 +++++++++++++++-- src/components/sobre/style.module.scss | 21 ++++++++ src/index.tsx | 18 +++++++ src/pages/Institucional.tsx | 11 +++-- src/routes/root.tsx | 15 ++++++ 12 files changed, 299 insertions(+), 17 deletions(-) delete mode 100644 src/components/navbar/index.tsx delete mode 100644 src/components/navbar/style.module.scss create mode 100644 src/components/sidebar/index.tsx create mode 100644 src/components/sidebar/style.module.scss create mode 100644 src/routes/root.tsx diff --git a/package-lock.json b/package-lock.json index e751577..1fa0267 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index fa2c680..dab5a33 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/entrega/index.tsx b/src/components/entrega/index.tsx index 2c6e7b4..7c57768 100644 --- a/src/components/entrega/index.tsx +++ b/src/components/entrega/index.tsx @@ -1,7 +1,34 @@ import React from "react"; const Entrega = () => { - return
-} + return ( +
+
+

Entrega

+

+ 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? +

+
+
+ ); +}; export { Entrega }; \ No newline at end of file diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx deleted file mode 100644 index 924e0b8..0000000 --- a/src/components/navbar/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const NavBar = () => { - return
-} - -export { NavBar }; \ No newline at end of file diff --git a/src/components/navbar/style.module.scss b/src/components/navbar/style.module.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx new file mode 100644 index 0000000..1d0d2d9 --- /dev/null +++ b/src/components/sidebar/index.tsx @@ -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 ( + <> +
+ +
+ + {/*

Sobre

+
+ + */} +
+ + ); + }; + + export { SideBar }; diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss new file mode 100644 index 0000000..651defc --- /dev/null +++ b/src/components/sidebar/style.module.scss @@ -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; + } + } +} diff --git a/src/components/sobre/index.tsx b/src/components/sobre/index.tsx index baf6875..8784f00 100644 --- a/src/components/sobre/index.tsx +++ b/src/components/sobre/index.tsx @@ -1,7 +1,44 @@ import React from "react"; -const Sobre = () => { - return
-} +import styles from "./style.module.scss"; -export { Sobre }; \ No newline at end of file +const Sobre = () => { + return ( + <> +
+

Sobre

+

+ 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? +

+
+ + ); +}; + +export { Sobre }; diff --git a/src/components/sobre/style.module.scss b/src/components/sobre/style.module.scss index e69de29..b6e275c 100644 --- a/src/components/sobre/style.module.scss +++ b/src/components/sobre/style.module.scss @@ -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; + } +} diff --git a/src/index.tsx b/src/index.tsx index 6066e75..488b203 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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( ); + +const router = createBrowserRouter([ + { + path: "/", + element: , + }, +]); + +ReactDOM.createRoot(document.getElementById("#root")!).render( + + + +); diff --git a/src/pages/Institucional.tsx b/src/pages/Institucional.tsx index 3a0d4cb..5cf8e9e 100644 --- a/src/pages/Institucional.tsx +++ b/src/pages/Institucional.tsx @@ -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 ( - <> +
setOpenModal(true)} /> { />
+