From cac634d04fca137efc8ac2db95d5c3833edf4118 Mon Sep 17 00:00:00 2001
From: Liliana <uo288574@uniovi.es>
Date: Mon, 11 Mar 2024 20:26:15 +0100
Subject: [PATCH] =?UTF-8?q?barra=20de=20navegaci=C3=B3n=20y=20pie=20de=20p?=
 =?UTF-8?q?=C3=A1gina?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/Footer.js  | 14 ++++++++++
 webapp/src/components/NavBar.css | 46 ++++++++++++++++++++++++++++++++
 webapp/src/components/NavBar.js  | 29 ++++++++++++++++++++
 3 files changed, 89 insertions(+)
 create mode 100644 webapp/src/components/Footer.js
 create mode 100644 webapp/src/components/NavBar.css
 create mode 100644 webapp/src/components/NavBar.js

diff --git a/webapp/src/components/Footer.js b/webapp/src/components/Footer.js
new file mode 100644
index 00000000..7059ad28
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/webapp/src/components/NavBar.css b/webapp/src/components/NavBar.css
new file mode 100644
index 00000000..54516ebe
--- /dev/null
+++ b/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; 
+}
\ No newline at end of file
diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
new file mode 100644
index 00000000..392baf94
--- /dev/null
+++ b/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;
\ No newline at end of file