Atividade 14: Menu Lateral (Drawer)

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

function TelaInicial({ navigation }) {
  return (
    <View style={styles.telaHome}>
      <Text style={styles.texto}>Bem-vindo!</Text>
      
      {/* Botão de abrir via Código, sem o gesto do Hamburger 🍔 */}
      <Button
        title="Forçar Abertura da Gaveta Mágica 🚪"
        onPress={() => navigation.openDrawer()}
      />
    </View>
  );
}

function TelaAjuda() {
  return (
    <View style={styles.telaAjuda}>
      <Text style={{color: 'white', fontWeight: 'bold'}}>Perguntas Frequentes (FAQ)</Text>
    </View>
  );
}

// 1. Criando a estrutura física do Drawer
const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      {/* 2. Propriedades de como abrir o Drawer e de que lado */}
      <Drawer.Navigator 
        initialRouteName="Início"
        screenOptions={{
          drawerPosition: 'left', // right = abre na direita (bom para Canhotos ou Apps Árabes com leitura reversa)
          drawerType: 'slide', // 'slide' empurra a tela toda para o lado. 'front' vem flutuando por cima da tela
        }}
      >
        
        {/* As Telas Internas */}
        <Drawer.Screen 
          name="Início" 
          component={TelaInicial} 
        />
        
        <Drawer.Screen 
          name="Ajuda" 
          component={TelaAjuda} 
        />

      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  telaHome: { flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center' },
  telaAjuda: { flex: 1, backgroundColor: '#334155', justifyContent: 'center', alignItems: 'center' },
  texto: { fontSize: 22, fontWeight: 'bold', marginBottom: 20 }
});