Revize 2365039d
Přidáno uživatelem Michal Schwob před více než 1 rok
| src/components/navigation/MenuComponent.tsx | ||
|---|---|---|
| 1 |
import {HamburgerIcon, Pressable, Menu, Text, Icon, ChevronRightIcon, HStack} from "native-base"
|
|
| 2 |
import {useRoute} from "@react-navigation/native"
|
|
| 3 |
|
|
| 4 |
type MenuComponentProps = {
|
|
| 5 |
navigation: any |
|
| 6 |
} |
|
| 7 |
|
|
| 8 |
const MenuComponent = (props: MenuComponentProps) => {
|
|
| 9 |
const route = useRoute().name |
|
| 10 |
|
|
| 11 |
return ( |
|
| 12 |
<> |
|
| 13 |
<Menu w="190" color={"primary.500"} trigger={ triggerProps => {
|
|
| 14 |
return <Pressable accessibilityLabel="More options menu" { ...triggerProps }>
|
|
| 15 |
<HamburgerIcon color={"primary.500"}/>
|
|
| 16 |
</Pressable> |
|
| 17 |
|
|
| 18 |
} }> |
|
| 19 |
<Menu.Item |
|
| 20 |
onPress={ () => props.navigation.navigate("Home") }
|
|
| 21 |
_text={ { color: "primary.500" } }
|
|
| 22 |
_pressed={ { bg: "secondary.500" } }
|
|
| 23 |
bg={ route === "Home" ? "secondary.500" : "white" }
|
|
| 24 |
> |
|
| 25 |
<HStack justifyContent={ "space-between" } flex={ 1 }>
|
|
| 26 |
<Text>Home</Text> |
|
| 27 |
<ChevronRightIcon/> |
|
| 28 |
</HStack> |
|
| 29 |
</Menu.Item> |
|
| 30 |
<Menu.Item |
|
| 31 |
onPress={ () => props.navigation.navigate("Notes") }
|
|
| 32 |
_text={ { color: "primary.500" } }
|
|
| 33 |
_pressed={ { bg: "secondary.500" } }
|
|
| 34 |
bg={ route === "Notes" ? "secondary.500" : "white" }
|
|
| 35 |
> |
|
| 36 |
<HStack justifyContent={ "space-between" } flex={ 1 }>
|
|
| 37 |
<Text>Notes</Text> |
|
| 38 |
<ChevronRightIcon/> |
|
| 39 |
</HStack> |
|
| 40 |
</Menu.Item> |
|
| 41 |
<Menu.Item |
|
| 42 |
onPress={ () => props.navigation.navigate("Search", { inventoryId: null }) }
|
|
| 43 |
_text={ { color: "primary.500" } }
|
|
| 44 |
_pressed={ { bg: "secondary.500" } }
|
|
| 45 |
bg={ route === "Search" ? "secondary.500" : "white" }
|
|
| 46 |
> |
|
| 47 |
<HStack justifyContent={ "space-between" } flex={ 1 }>
|
|
| 48 |
<Text>Search</Text> |
|
| 49 |
<ChevronRightIcon/> |
|
| 50 |
</HStack> |
|
| 51 |
</Menu.Item> |
|
| 52 |
<Menu.Item |
|
| 53 |
onPress={ () => props.navigation.navigate("Logout") }
|
|
| 54 |
_text={ { color: "primary.500" } }
|
|
| 55 |
_pressed={ { bg: "secondary.500" } }
|
|
| 56 |
justifyContent={ "space-between" }
|
|
| 57 |
flex={ 1 }
|
|
| 58 |
> |
|
| 59 |
<HStack justifyContent={ "space-between" } flex={ 1 }>
|
|
| 60 |
<Text>Logout</Text> |
|
| 61 |
<ChevronRightIcon/> |
|
| 62 |
</HStack> |
|
| 63 |
</Menu.Item> |
|
| 64 |
|
|
| 65 |
</Menu> |
|
| 66 |
</> |
|
| 67 |
) |
|
| 68 |
} |
|
| 69 |
|
|
| 70 |
export default MenuComponent |
|
| src/pages/Navigation.tsx | ||
|---|---|---|
| 1 | 1 |
import {createNativeStackNavigator} from "@react-navigation/native-stack"
|
| 2 | 2 |
import {NavigationContainer} from "@react-navigation/native"
|
| 3 |
import {HStack, IconButton, Stack, VStack} from "native-base"
|
|
| 3 |
import {HamburgerIcon, HStack, IconButton, Menu, Pressable, Stack, View, VStack} from "native-base"
|
|
| 4 | 4 |
import {AntDesign} from "@expo/vector-icons"
|
| 5 | 5 |
import {createDrawerNavigator} from "@react-navigation/drawer"
|
| 6 | 6 |
import {useSelector} from "react-redux"
|
| ... | ... | |
| 12 | 12 |
import Logout from "./Logout" |
| 13 | 13 |
import ItemViewPage from "./ItemViewPage" |
| 14 | 14 |
import NotesViewPage from "./NotesViewPage" |
| 15 |
import MenuComponent from "../components/navigation/MenuComponent" |
|
| 15 | 16 |
|
| 16 | 17 |
export type RootStackParamList = {
|
| 17 | 18 |
Home: undefined, |
| ... | ... | |
| 39 | 40 |
}, |
| 40 | 41 |
headerTintColor: nativeBaseTheme.colors.primary[500], |
| 41 | 42 |
headerRight: () => ( |
| 42 |
<HStack space={ 0 } alignItems="end" marginRight={-3}>
|
|
| 43 |
<IconButton |
|
| 44 |
onPress={() => navigation.navigate("Notes", {inventoryId: null})}
|
|
| 45 |
title="Info" |
|
| 46 |
color="#fff" |
|
| 47 |
_icon={{
|
|
| 48 |
as: AntDesign, |
|
| 49 |
name: "message1", |
|
| 50 |
color: "white" |
|
| 51 |
}} |
|
| 52 |
/> |
|
| 53 |
<IconButton |
|
| 54 |
onPress={ () => navigation.navigate("Search", { inventoryId: null }) }
|
|
| 55 |
title="Info" |
|
| 56 |
color="#fff" |
|
| 57 |
_icon={ {
|
|
| 58 |
as: AntDesign, |
|
| 59 |
name: "search1", |
|
| 60 |
color: "white" |
|
| 61 |
} } |
|
| 62 |
/> |
|
| 63 |
<IconButton |
|
| 64 |
onPress={() => navigation.navigate("Logout", {inventoryId: null})}
|
|
| 65 |
title="Info" |
|
| 66 |
color="#fff" |
|
| 67 |
_icon={{
|
|
| 68 |
as: AntDesign, |
|
| 69 |
name: "logout", |
|
| 70 |
color: "white" |
|
| 71 |
}} |
|
| 72 |
/> |
|
| 73 |
</HStack> |
|
| 43 |
<MenuComponent navigation={navigation}/>
|
|
| 74 | 44 |
), |
| 75 | 45 |
contentStyle: {
|
| 76 | 46 |
backgroundColor: nativeBaseTheme.colors.primary[50], |
Také k dispozici: Unified diff
NEW: menu updated
re #10846