Componente layout

app/src/components/layout/footer.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+
+const Header: FC<{ title: string }> = ({ children }) => {
+  return <main>{children}</main>;
+};
+
+export default Header;

app/src/components/layout/header.module.css

@@ -0,0 +1,2 @@
+.header {
+}

app/src/components/layout/header.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import * as classes from "./header.module.css";
+
+const Header = ({ children, toggle }: any) => {
+  return (
+    <header className="bg-dark d-flex justify-content-between align-items-center">
+      <div>
+        <i className="bi bi-house text-light p-3"></i>
+      </div>
+      <button className="btn btn-link d-sm-none" onClick={toggle}>
+        <i className="bi bi-list bi-xl text-light color-white"></i>
+      </button>
+    </header>
+  );
+};
+
+export default Header;

app/src/components/layout/index.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import Sidebar from "./sidebar";
+import Header from "./header";
+import "bootstrap-icons/font/bootstrap-icons.css";
+
+const Layout = ({ children }: any) => {
+  const [isOpen, setIsOpen] = useState<Boolean>(false);
+  const toggle = () => {
+    setIsOpen((s) => !s);
+  };
+
+  const sbClass = `${isOpen ? "" : "d-none d-sm-block"}`;
+
+  return (
+    <>
+      <Header toggle={toggle} />
+      <div className="container-fluid mx-auto px-0 flex-norwap row">
+        <section
+          className={`sidebar bg-light col-auto min-vh-100 col-md-3 col-xl-2 ${sbClass}`}
+        >
+          <Sidebar />
+        </section>
+        <main className="col content">{children}</main>
+      </div>
+    </>
+  );
+};
+
+export default Layout;

app/src/components/layout/sidebar.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const NavLink = ({ children, ...props }: any) => (
+  <Link className="nav-link" {...props}>
+    {children}
+  </Link>
+);
+
+const Sidebar = () => {
+  return (
+    <aside className="pt-5">
+      <ul className="nav nav-pills flex-column">
+        <li>
+          <NavLink to="/">Inicio</NavLink>
+        </li>
+        <li>
+          <NavLink to="/comparativa">Comparativa</NavLink>
+        </li>
+        <li>
+          <NavLink to="/mapa-calor">Mapa de Calor</NavLink>
+        </li>
+      </ul>
+    </aside>
+  );
+};
+
+export default Sidebar;