feat(sidebar): created initial styles for small, medium devices

src/pages/Introduction/index.module.scss

@@ -1 +0,0 @@
-@use '../../settings/styles/utils/helpers/functions' as function;

src/pages/Introduction/index.tsx

@@ -1,9 +0,0 @@
-import css from './index.module.scss'
-
-export function Introduction() {
-	return (
-		<section className={css.introduction}>
-			<div className={css.container}></div>
-		</section>
-	)
-}

src/settings/routes/index.tsx

@@ -20,7 +20,7 @@ export function Router() {
 						<div className={css['breadcrumb-container']}>
 							<Breadcrumb className={css.breadcrumb} list={listBreadcrumb} />
 						</div>
-						<div className="window-content">
+						<div className="window-routes">
 							<Outlet />
 						</div>
 						<Footer />
@@ -31,14 +31,16 @@ export function Router() {
 					path="/"
 					element={
 						<>
-							<div>
+							<div className="window-content">
 								<h1>Institutional</h1>
-								<Sidebar />
-								<main>
-									<div className="main-container">
-										<Outlet />
-									</div>
-								</main>
+								<div className="window-initial">
+									<Sidebar />
+									<main>
+										<div className="main-container">
+											<Outlet />
+										</div>
+									</main>
+								</div>
 							</div>
 						</>
 					}
@@ -51,7 +53,11 @@ export function Router() {
 							</>
 						}
 					/>
-					<Route path="/signup" element={<h2>Preencha o formulário</h2>} />
+					<Route path="/contact" element={<h2>Preencha o formulário</h2>} />
+					<Route path="/payments" element={<h2>Formas de pagamentos</h2>} />
+					<Route path="/exchange" element={<h2>Troca e Devolução</h2>} />
+					<Route path="/privacity" element={<h2>Privacidade</h2>} />
+					<Route path="/shipping" element={<h2>Entrega</h2>} />
 				</Route>
 			</Route>
 		</Routes>

src/settings/styles/global/_config.scss

@@ -52,11 +52,33 @@ textarea {
 	width: 100%;
 	padding: 0 16px;
 
+	h1 {
+		font-weight: 400;
+		font-size: var(--txt-xl);
+		font-family: var(--font-family-100);
+		letter-spacing: 0.1em;
+
+		text-align: center;
+		text-transform: uppercase;
+
+		color: var(--clr-gray-900);
+	}
+
 	@media screen and (min-width: 1025px) {
 		width: function.fluid(1080px, 1280px);
 		padding: 0;
+		margin: 0 auto;
 	}
 	@media screen and (min-width: 2500px) {
 		width: function.fluid(2299.68px, 2500px);
 	}
 }
+
+.window-initial {
+	display: grid;
+	grid-template-columns: 1fr;
+
+	@media screen and (min-width: 1025px) {
+		grid-template-columns: 1fr 1fr;
+	}
+}

src/template/Sidebar/index.module.scss

@@ -0,0 +1,34 @@
+.sidebar {
+	width: 100%;
+	height: auto;
+
+	.container {
+		width: 100%;
+		height: auto;
+
+		@media screen and (min-width: 1025px) {
+			border-right: 1px solid var(--clr-common-black);
+		}
+	}
+
+	.list {
+		li {
+			a {
+				display: inline-block;
+
+				width: 100%;
+				padding: 10px 20px;
+
+				font-weight: 400;
+				font-size: var(--txt-medium);
+
+				color: var(--clr-gray-600);
+
+				&.active {
+					background-color: var(--clr-common-black);
+					color: var(--clr-common-white);
+				}
+			}
+		}
+	}
+}

src/template/Sidebar/index.tsx

@@ -1,19 +1,34 @@
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
+
+import css from './index.module.scss'
 
 export function Sidebar() {
+	const { pathname } = useLocation()
+
+	const paths = [
+		{ name: 'Sobre', path: '/' },
+		{ name: 'Forma de Pagamento', path: '/payments' },
+		{ name: 'Entrega', path: '/shipping' },
+		{ name: 'Troca e Devolução', path: '/exchange' },
+		{ name: 'Segurança e Privacidade', path: '/privacity' },
+		{ name: 'Contact', path: '/contact' },
+	]
+
 	return (
-		<aside>
-			<li>
-				<Link to={'/'}>Initial</Link>
-			</li>
-
-			<li>
-				<Link to={'/about'}>About</Link>
-			</li>
-
-			<li>
-				<Link to={'/signup'}>Sign up</Link>
-			</li>
+		<aside className={css.sidebar}>
+			<div className={css.container}>
+				<ul className={css.list}>
+					{paths.map(({ path, name }, index) => {
+						return (
+							<li key={name + '-sidebar'}>
+								<Link className={pathname === path ? css.active : ''} to={path}>
+									{name}
+								</Link>
+							</li>
+						)
+					})}
+				</ul>
+			</div>
 		</aside>
 	)
 }