Lección: 13 Modificando el menu con todos los ITEMS en la PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK (parte 1)

13 Modificando el menu con todos los ITEMS en la PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK (parte 1)

Duración: 8 min

Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 13 de 18

Descripción

🛠️ Lección 13: Modificando la Barra de Navegación (Navbar) con Items (Parte 1)

Esta lección es la primera parte del proceso de personalización de la barra de navegación (Navbar), que se había incorporado previamente con Bootstrap. El enfoque es adaptar el diseño y los elementos del menú para que cumplan con los requisitos de una plataforma de películas, centrándose en el estilo y el botón de inicio de sesión.

1. 🎨 Personalización del Diseño del Navbar [01:35]

Se ajusta el estilo visual del Navbar utilizando las clases y propiedades de Bootstrap y CSS:

Color de Fondo: Se modifica el color de fondo. Se prueba con diferentes clases predefinidas de Bootstrap (como primary, info, success, danger), pero finalmente se opta por el tono oscuro (navbar-dark y bg-dark) para mantener una estética de cine [02:01], [04:04].
Alineación del Contenido: Se cambia la clase del contenedor de container-fluid a container [04:30], lo que provoca que el contenido del Navbar no se extienda por todo el ancho de la pantalla, sino que se mantenga centrado y con márgenes a los lados [05:04].

2. 📝 Inclusión del Botón "Iniciar Sesión" [06:27]

Se prepara la interfaz para el sistema de autenticación de usuarios:

Ubicación: El botón se coloca en el lado derecho del Navbar [06:35].
Estilo del Botón: Se utiliza un botón de Bootstrap (<button>) con la clase btn-primary [07:29].
Funcionalidad (Conceptual): Se explica que este botón será clave para la lógica backend, ya que redirigirá a la vista de login [07:32]. Una vez que el usuario inicie sesión, el sistema (la vista de administrador o usuario) se ajustará automáticamente según el rol que tenga en la base de datos [07:41].

3. 🔎 Reubicación del Buscador [05:22]

Se conceptualiza la posición del campo de búsqueda:

Nuevo Diseño: Se extrae el formulario de búsqueda (form con input) del Navbar original y se coloca debajo de los botones de redes sociales [05:35].
Próximo Paso: Se establece que este componente de búsqueda será estilizado y ajustado en lecciones posteriores para que se centre en el diseño final [06:13].

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web