aswi2023one-team-to-rule-them-all-gitlab/src/components/Navigation.tsx @ 72afb023

import { createNativeStackNavigator } from "@react-navigation/native-stack"
import { NavigationContainer } from "@react-navigation/native"
import { IconButton } from "native-base"
import { AntDesign } from "@expo/vector-icons"
import { createDrawerNavigator } from "@react-navigation/drawer"
import { useSelector } from "react-redux"
import { RootState } from "../stores/store"
import { nativeBaseTheme } from "../theme/nativeBaseTheme"
import HomePage from "../pages/HomePage"
import LoginPage from "../pages/LoginPage"
import SearchPage from "../pages/SearchPage"
import Logout from "../pages/Logout"
import ItemViewPage from "../pages/ItemViewPage"

export type RootDrawerParamList = {
    Home: undefined,
    Search: undefined,
    Logout: undefined,
    Item: { itemId: string },
    Login: undefined
}

const Navigation = () => {
    const Drawer = createDrawerNavigator<RootDrawerParamList>()
    const loggedIn = useSelector((state: RootState) => state.user.loggedIn)

    return (
        <NavigationContainer>
            <Drawer.Navigator useLegacyImplementation
                screenOptions={({ navigation }) => ({
                    headerStyle: {
                        backgroundColor: nativeBaseTheme.colors.primary[800],
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                    headerRight: () => (
                        <IconButton
                            onPress={() => navigation.navigate("Search")}
                            title="Info"
                            color="#fff"
                            _icon={{
                                as: AntDesign,
                                name: "search1",
                                color: "white"
                            }}
                        />
                    ),
                })}
            >
                {loggedIn ? (
                    <>
                        <Drawer.Screen
                            name="Home"
                            component={HomePage}
                            options={{
                                title: 'My home'
                            }}
                        />
                        <Drawer.Screen
                            name="Search"
                            component={SearchPage}
                        />
                        <Drawer.Screen
                            name="Logout"
                            component={Logout}
                        />
                        <Drawer.Screen
                            name={"Item"}
                            component={ItemViewPage}
                            options={{ drawerItemStyle: { display: "none" } }}
                        />
                    </>
                ) : (
                    <Drawer.Screen
                        name="Login"
                        component={LoginPage}
                        options={({ navigation }) => ({
                            headerRight: () => (
                                <></>
                            )
                        })}
                    />
                )}
            </Drawer.Navigator>
        </NavigationContainer>
    )

}

export default Navigation