Implementación de Riel de Navegación en Compose

Este proyecto documenta la adaptación de una aplicación Android para soportar diferentes configuraciones de pantalla, específicamente la transición de una Barra de Navegación inferior a un Riel de Navegación lateral cuando la app se visualiza en modo horizontal (landscape).

📋 Descripción del Trabajo

El objetivo principal es mejorar la experiencia de usuario (UX) en dispositivos con pantallas más anchas. En lugar de desperdiciar espacio con una barra inferior, la aplicación transforma la navegación en un panel lateral accesible.

🔄 Comportamiento Adaptativo

• Modo Vertical (Portrait): Se utiliza una NavigationBar en la parte inferior (implementación previa).
• Modo Horizontal (Landscape): La navegación se desplaza al lado izquierdo mediante un NavigationRail.

🛠️ Tecnologías y Componentes Clave

• Lenguaje: Kotlin
• UI Toolkit: Jetpack Compose
• Librería de Material: Compose Material (Material 3)

Componente	Función
NavigationRail	Contenedor principal para la navegación lateral en pantallas anchas.
NavigationRailItem	Elementos individuales dentro del riel (pantalla principal, perfil, etc.).
Row	Layout utilizado para colocar el contenido y el riel uno al lado del otro.
Surface	Componente utilizado para definir el color de fondo del contenedor principal.

⚙️ Implementación Técnica

1. Estructura del Layout

Para la vista horizontal, se abandona el uso exclusivo de Scaffold para el contenedor principal y se opta por una composición flexible usando Row.

• Disposición: El Row organiza los hijos horizontalmente.
• Hijos del Row:
  1. El NavigationRail (lado izquierdo).
  2. El contenido principal de la pantalla (lado derecho).

2. Gestión de Colores

A diferencia de Scaffold, que maneja automáticamente los colores de fondo, al usar un Row se debe gestionar explícitamente el color de fondo del área de navegación.

• Solución: Se envuelve todo el Row dentro de un componente Surface.
• Configuración: Se asigna el color de fondo adecuado al Surface para asegurar que el riel de navegación tenga el aspecto visual correcto según las directrices de Material Design.

3. Navegación

Se han implementado los siguientes destinos en el riel:

• 🏠 Pantalla Principal
• 👤 Perfil de Usuario

📱 Resultado Visual

La aplicación se adapta dinámicamente:

• Al rotar el dispositivo a landscape, la barra inferior desaparece.
• Aparece un riel vertical a la izquierda.
• El contenido de la app se expande para ocupar el espacio restante.

---

Documentación generada basándose en los principios de diseño de Material 3 y Jetpack Compose.