Topbar Sidebar Navigation - Copy this Angular, Css Component to your project
Crea una barra superior (topbar) y una barra lateral izquierda (sidebar) en HTML y CSS utilizando los siguientes datos y estructuras. La barra superior debe mostrar la información del usuario (nombre y apellido), su rol (admin o user), un icono de notificaciones con un contador y un menú desplegable de notificaciones, y un icono de perfil con un menú desplegable que incluya opciones de configuración, contáctanos y cerrar sesión. La barra lateral izquierda debe incluir un logo y una navegación con enlaces a "Inicio", "Solicitudes", "Lista de solicitudes" y, si el usuario es administrador, "Registrar Usuario". Asegúrate de que las imágenes dentro de las cartas sean más pequeñas y estén centradas. **Datos disponibles:** `userData.firstName`: Nombre del usuario. `userData.lastName`: Apellido del usuario. `userRole`: Rol del usuario (`'admin'` o `'user'`). `notificationsCount`: Número de notificaciones. `notifications`: Array de notificaciones con propiedades `message` y `fecha`. `isNotificationsMenuOpen`: Booleano para mostrar u ocultar el menú de notificaciones. `isProfileMenuOpen`: Booleano para mostrar u ocultar el menú de perfil. `isConfigModalOpen`: Booleano para mostrar u ocultar el modal de configuración. `isUserModalOpen`: Booleano para mostrar u ocultar el modal de gestión de usuarios. `users`: Array de usuarios con propiedades `firstName`, `lastName`, `email`, y `role`. `searchQuery`: Cadena para la búsqueda de usuarios. **Requisitos:** 1. **Barra Superior (Topbar):** Mostrar el nombre completo del usuario y su rol. Icono de notificaciones con contador. Menú desplegable de notificaciones que muestra la lista de notificaciones o un mensaje si no hay ninguna. Icono de perfil con menú desplegable que incluye enlaces a configuración, contáctanos y cerrar sesión. 2. **Barra Lateral Izquierda (Sidebar):** Incluir un logo en la parte superior. Navegación con enlaces a: Inicio Solicitudes Lista de solicitudes Registrar Usuario (solo visible para administradores) 3. **Estilos de Imágenes en Cartas:** Reducir el tamaño de las imágenes dentro de las cartas. Centrar las imágenes tanto vertical como horizontalmente.
