commit 2365039d82e982e92776b6c84a0dde4154caf50c
Author: Michal Schwob <michal.schwob@seznam.cz>
Date:   Fri Nov 3 16:17:32 2023 +0100

    NEW: menu updated
    re #10846

diff --git a/src/components/navigation/MenuComponent.tsx b/src/components/navigation/MenuComponent.tsx
new file mode 100644
index 0000000..f515af8
--- /dev/null
+++ b/src/components/navigation/MenuComponent.tsx
@@ -0,0 +1,70 @@
+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("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
diff --git a/src/pages/Navigation.tsx b/src/pages/Navigation.tsx
index 36cb0e7..38fa0fb 100644
--- a/src/pages/Navigation.tsx
+++ b/src/pages/Navigation.tsx
@@ -1,6 +1,6 @@
 import {createNativeStackNavigator} from "@react-navigation/native-stack"
 import {NavigationContainer} from "@react-navigation/native"
-import {HStack, IconButton, Stack, VStack} from "native-base"
+import {HamburgerIcon, HStack, IconButton, Menu, Pressable, Stack, View, VStack} from "native-base"
 import {AntDesign} from "@expo/vector-icons"
 import {createDrawerNavigator} from "@react-navigation/drawer"
 import {useSelector} from "react-redux"
@@ -12,6 +12,7 @@ import SearchPage from "./SearchPage"
 import Logout from "./Logout"
 import ItemViewPage from "./ItemViewPage"
 import NotesViewPage from "./NotesViewPage"
+import MenuComponent from "../components/navigation/MenuComponent"
 
 export type RootStackParamList = {
     Home: undefined,
@@ -39,38 +40,7 @@ const Navigation = () => {
                                  },
                                  headerTintColor: nativeBaseTheme.colors.primary[500],
                                  headerRight: () => (
-                                     <HStack space={ 0 } alignItems="end" marginRight={-3}>
-                                         <IconButton
-                                             onPress={() => navigation.navigate("Notes", {inventoryId: null})}
-                                             title="Info"
-                                             color="#fff"
-                                             _icon={{
-                                                 as: AntDesign,
-                                                 name: "message1",
-                                                 color: "white"
-                                             }}
-                                         />
-                                         <IconButton
-                                             onPress={ () => navigation.navigate("Search", { inventoryId: null }) }
-                                             title="Info"
-                                             color="#fff"
-                                             _icon={ {
-                                                 as: AntDesign,
-                                                 name: "search1",
-                                                 color: "white"
-                                             } }
-                                         />
-                                         <IconButton
-                                             onPress={() => navigation.navigate("Logout", {inventoryId: null})}
-                                             title="Info"
-                                             color="#fff"
-                                             _icon={{
-                                                 as: AntDesign,
-                                                 name: "logout",
-                                                 color: "white"
-                                             }}
-                                         />
-                                     </HStack>
+                                     <MenuComponent navigation={navigation}/>
                                  ),
                                  contentStyle: {
                                      backgroundColor: nativeBaseTheme.colors.primary[50],
