Improve interface #2
Description
Descrição:
Melhorar a interface principal do aplicativo, implementando o layout base em Jetpack Compose com TopAppBar fixo e Navigation Drawer (menu lateral) para navegação entre telas.
O objetivo é construir uma estrutura limpa e escalável, onde o conteúdo central muda dinamicamente conforme a rota selecionada, mantendo o header fixo e consistente em todo o app.
🎯 Objetivo
- Criar a estrutura principal do app usando
ScaffoldcomTopAppBareModalNavigationDrawer. - Implementar a navegação entre telas com o Navigation Compose.
- Definir tema base (cores, tipografia e espaçamentos).
- Criar componentes reutilizáveis de UI (botões, ícones, cards, menus).
- Garantir consistência visual e fluidez entre transições de tela.
🧩 Tarefas
-
Criar layout principal usando
Scaffoldcom:TopAppBarfixo (título, logo e botão para abrir o menu lateral)ModalNavigationDrawerouPermanentNavigationDrawer(dependendo do tipo de layout desejado)contentcentral com base na rota atual
-
Implementar Navigation Compose com rotas nomeadas (ex: “home”, “dashboard”, “settings”, etc.)
-
Criar composable screens de exemplo (
HomeScreen,SettingsScreen, etc.) -
Adicionar ícones vetoriais e nomes para cada item do menu lateral
-
Implementar tema e tipografia personalizados
-
Garantir responsividade e espaçamento consistente entre elementos
-
Testar abertura e fechamento do drawer em diferentes tamanhos de tela
✅ Critérios de Aceite
- Navegação funcional via menu lateral
TopAppBarpermanece fixo em todas as telas- Tema visual aplicado globalmente (MaterialTheme)
- Layout adaptável (drawer permanente em tablets e modal em telas menores)
- Transições suaves entre telas
- Código modular, legível e seguindo boas práticas do Compose
🔧 Tipo
feature | ui/ux | frontend
📚 Referências
- [Navigation Compose Docs](https://developer.android.com/jetpack/compose/navigation)
- [Material 3 Navigation Drawer](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalNavigationDrawer%28kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.DrawerState,androidx.compose.material3.SheetValue,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.material3.ColorScheme,androidx.compose.ui.window.PopupProperties,androidx.compose.ui.window.DialogProperties,kotlin.Function1%29)
- [Material 3 Design System](https://m3.material.io/)