aswi2023one-team-to-rule-them-all-gitlab/src/components/navigation/MenuComponent.tsx @ 0733beb1

import {HamburgerIcon, Pressable, Menu, Text, Icon, ChevronRightIcon, HStack} from "native-base"
import {useRoute} from "@react-navigation/native"

type MenuComponentProps = {
    navigation: any
}

const MenuComponent = (props: MenuComponentProps) => {
    const route = useRoute().name

    return (
        <>
            <Menu w="190" color={"primary.500"} trigger={ triggerProps => {
                return <Pressable accessibilityLabel="More options menu" { ...triggerProps }>
                    <HamburgerIcon color={"primary.500"}/>
                </Pressable>

            } }>
                <Menu.Item
                    onPress={ () => props.navigation.navigate("Home") }
                    _text={ { color: "primary.500" } }
                    _pressed={ { bg: "secondary.500" } }
                    bg={ route === "Home" ? "secondary.500" : "white" }
                >
                    <HStack justifyContent={ "space-between" } flex={ 1 }>
                        <Text>Home</Text>
                        <ChevronRightIcon/>
                    </HStack>
                </Menu.Item>
                <Menu.Item
                    onPress={ () => props.navigation.navigate("Notes") }
                    _text={ { color: "primary.500" } }
                    _pressed={ { bg: "secondary.500" } }
                    bg={ route === "Notes" ? "secondary.500" : "white" }
                >
                    <HStack justifyContent={ "space-between" } flex={ 1 }>
                        <Text>Notes</Text>
                        <ChevronRightIcon/>
                    </HStack>
                </Menu.Item>
                <Menu.Item
                    onPress={ () => props.navigation.navigate("Search", { inventoryId: null }) }
                    _text={ { color: "primary.500" } }
                    _pressed={ { bg: "secondary.500" } }
                    bg={ route === "Search" ? "secondary.500" : "white" }
                >
                    <HStack justifyContent={ "space-between" } flex={ 1 }>
                        <Text>Search</Text>
                        <ChevronRightIcon/>
                    </HStack>
                </Menu.Item>
                <Menu.Item
                    onPress={ () => props.navigation.navigate("Plan", { placeId: undefined, roomId: undefined }) }
                    _text={ { color: "primary.500" } }
                    _pressed={ { bg: "secondary.500" } }
                    bg={ route === "Plan" ? "secondary.500" : "white" }
                >
                    <HStack justifyContent={ "space-between" } flex={ 1 }>
                        <Text>Plan</Text>
                        <ChevronRightIcon/>
                    </HStack>
                </Menu.Item>
                <Menu.Item
                    onPress={ () => props.navigation.navigate("Logout") }
                    _text={ { color: "primary.500" } }
                    _pressed={ { bg: "secondary.500" } }
                    justifyContent={ "space-between" }
                    flex={ 1 }
                >
                    <HStack justifyContent={ "space-between" } flex={ 1 }>
                        <Text>Logout</Text>
                        <ChevronRightIcon/>
                    </HStack>
                </Menu.Item>

            </Menu>
        </>
    )
}

export default MenuComponent