25 Ajustando el menu del AdminLTE en la PLATAFORMA de PELICULAS con (LARAVEL y MYSQL) FULLSTACK

Duración: 7 min
Módulo: 🖥️ Módulo de Arquitectura Admin y Vistas Blade Lección 7 de 8

Descripción

🎨  Lección 25: Ajuste y Personalización del Menú de AdminLTE

Esta lección avanzada se enfoca en la personalización y limpieza de los elementos de navegación y estructurales de la plantilla maestra de AdminLTE, asegurando que solo se muestren los componentes necesarios para el panel de administración de la plataforma de películas.

1. ⚙️ Personalización de la Cabecera (Navbar) [00:55]

Se realizan modificaciones en la parte superior de la plantilla, que es la cabecera global:

  • Cambio de Título: Se reemplaza el título por defecto "AdminLTE 3" por "Plataforma de Películas" en la etiqueta <title> [00:55].
  • Eliminación de Elementos Redundantes: Se eliminan los elementos de navegación innecesarios en la barra superior (Navbar) que vienen por defecto en la plantilla, incluyendo:
    • Enlaces "Home" y "Contact" [01:23].
    • Botones de notificación, chat y vista de pantalla completa (full screen) [01:45].
    • Se mantiene el botón de lupa/búsqueda y se verifica que la interfaz siga siendo responsive [02:12].

2. 🧭 Configuración del Menú Lateral (Sidebar) [02:27]

El enfoque principal es adaptar el menú lateral para la gestión de películas, que es el centro del sistema:

  • Identidad del Proyecto:
    • Se reemplaza el icono por defecto de AdminLTE por el logo del proyecto "cachorrito" [02:40].
    • Se cambia el nombre del sistema mostrado en el menú lateral por "Yo Quiero Ver" [02:57].
  • Información de Usuario: Se personaliza estáticamente el nombre del usuario logeado con "Freddy" [03:07]. (Se aclara que esto se hará dinámicamente más adelante).
  • Eliminación de Buscador: Se remueve el campo de búsqueda dentro del menú lateral (diferente al de la cabecera) por no ser necesario en este contexto [03:42].
  • Ajuste de Comportamiento: Se elimina la clase menu-open del menú desplegable por defecto, forzando a que los submenús solo se abran al hacer clic, no al cargar la página [04:02].

3. 📝 Estructuración del Menú de Películas [04:21]

Se crean los enlaces de navegación esenciales para el CRUD de películas:

  • Elemento Principal: Se renombra el menú principal como "Películas" [04:21] y se le asigna un icono representativo de video/fotos [04:47].
  • Submenús Creados:
    1. Listado de Películas: Para visualizar todos los registros (función Read del CRUD) [05:07].
    2. Registrar Nuevo: Para el formulario de inserción de nuevas películas (función Create del CRUD) [05:37].
  • Cerrar Sesión (Logout): Se añade el botón de "Cerrar Sesión" en la parte inferior del menú [05:48]. Se le asigna un icono de puerta de salida [06:28] y se aplica un estilo de color rojo (background-color: red) para destacarlo visualmente y simular el color típico de las acciones de salida [06:46].