crear el index y la barra de navegacion principal

Arquisoft · Feb 12, 2024 · 5c08df7 · 5c08df7
1 parent 1b23f63
commit 5c08df7
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 4 deletions.
diff --git a/webapp/public/LogoSaberYGanar.png b/webapp/public/LogoSaberYGanar.png
diff --git a/webapp/public/index.html b/webapp/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Arquisof-WIQ</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -38,6 +38,9 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
+
+      
     -->
+
   </body>
 </html>
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -48,18 +48,21 @@ function App() {
 export default App; */
 import React from 'react';
 import GenerateQuestion from './components/GenerateQuestion'; // Asegúrate de importar GenerateQuestion correctamente
+import Login from './components/Login';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 
 function App() {
   return (
-    <Container component="main" maxWidth="xs">
+
+  <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
         Welcome to the 2024 edition of the Software Architecture course
       </Typography>
       {/* Aquí se muestra el componente GenerateQuestion */}
+
       <GenerateQuestion />
     </Container>
   );

diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
@@ -0,0 +1,40 @@
+// En /src/components/Navbar.js
+import React from 'react';
+import '../styles/Navbar.css'; // Importa tu archivo de estilos si es necesario
+
+const Navbar = () => (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+    <div className="collapse navbar-collapse" id="my-navbarColor01">
+      <a className="navbar-brand" href="/">
+        <img src="/LogoSaberYganar.png" alt="Logo" />
+      </a>
+     {/*<ul className="navbar-nav mr-auto">
+        <li className="nav-item">
+          <a className="nav-link" href="/">
+            Home
+          </a>
+        </li>
+</ul>*/}
+    </div>
+
+    <div className="collapse navbar-collapse" id="my-navbarColor02">
+      <ul className="navbar-nav justify-content-end">
+        <li className="nav-item">
+          <a className="nav-link" href="/signup">
+            <i className="fas fa-sign-in-alt" style={{ fontSize: '16px' }}></i>
+            <span>Registrarse</span>
+          </a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="/login">
+            <i className="fas fa-sign-in-alt" style={{ fontSize: '16px' }}></i>
+            <span>Iniciar sesión</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+);
+
+export default Navbar;
diff --git a/webapp/src/index.js b/webapp/src/index.js
@@ -3,11 +3,17 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+/*funcion q representa la barra de navegacion superior*/
+import Navbar from './components/NavBar';
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
+
   <React.StrictMode>
-    <App />
+    <Navbar></Navbar>
+
+     <App />
+
   </React.StrictMode>
 );
 

diff --git a/webapp/src/styles/Navbar.css b/webapp/src/styles/Navbar.css
@@ -0,0 +1,49 @@
+/* Estilo para la barra de navegación */
+.navbar {
+    background-color: #001f3f; /* Fondo azul oscuro */
+    padding: 10px; /* Espaciado interno */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Estilo para el logo */
+.navbar-brand img {
+    width: 5em; /* Ancho del logo */
+}
+
+/* Estilo para la lista de navegación */
+.navbar-nav {
+    display: flex;
+    align-items: center;
+    list-style-type: none; /* Eliminar el punto de los li para que no quede feo */
+    margin: 0; /* Eliminar el margen por defecto */
+    padding: 0; /* Eliminar el padding por defecto */
+}
+
+/* Estilo para los elementos de la lista de navegación */
+.navbar-nav li {
+    margin-right: 1em; /* Espaciado entre elementos de la lista */
+}
+
+/* Estilo para los botones de login y registro */
+.navbar-nav a {
+    color: #ffffff; /* Texto blanco */
+    text-decoration: none;
+}
+
+/* Estilo para hacer que la barra de navegación sea responsive en dispositivos móviles */
+@media (max-width: 768px) {
+    .navbar {
+        flex-direction: column; /* Cambia a una columna en dispositivos móviles */
+        align-items: flex-start;
+    }
+
+    .navbar-nav {
+        margin-top: 10px; /* Espaciado superior en dispositivos móviles */
+    }
+
+    .navbar-nav li {
+        margin: 5px 0; /* Espaciado entre elementos de la lista en dispositivos móviles */
+    }
+}