barra de navegación y pie de página

webapp/src/components/Footer.js

@@ -0,0 +1,14 @@
+import { AppBar, Toolbar, Typography } from '@mui/material';
+
+const Footer = () => {
+    return (
+        <AppBar component="footer" position="static" 
+            sx={{ backgroundColor: "primary", color: "white", bottom: 0, left: 0, width: '100%', zIndex: 1000 }}>
+            <Toolbar>
+                <Typography sx={{ margin: 'auto' }}>© WIQ_ES6C</Typography>
+            </Toolbar>
+        </AppBar>
+    );
+};
+
+export default Footer;

webapp/src/components/NavBar.css

@@ -0,0 +1,46 @@
+nav {
+    background-color: #1c57c4; 
+    color: #fff; 
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+}
+
+.logo img {
+    max-width: 100px; 
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+
+.nav-links li {
+    margin-right: 5%;
+}
+
+.nav-links li:last-child {
+    margin-right: 0%;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: #fff;
+}
+
+.nav-links button {
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+}
+
+.nav-links button:hover {
+    text-decoration: underline;
+}
+
+.nav-links {
+    margin-left: auto; 
+}

webapp/src/components/NavBar.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import './NavBar.css';
+import { Link } from 'react-router-dom';
+
+const Navbar = ({ loggedIn, handleLogout }) => {
+  return (
+    <nav>
+      <div className="logo">
+        <img src=" " alt="Logo de la aplicación" />
+      </div>
+      <ul className="nav-links">
+        {loggedIn ? (
+          <div>
+            <li>
+              <Link to=" ">Perfil</Link>
+            </li>
+            <li>
+              <button onClick={handleLogout}>Cerrar sesión</button>
+            </li>
+          </div>
+        ): 
+          <div> </div>
+        }
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;