added support for hamburger dropdown on the OutdoorMap

package.json

@@ -80,6 +80,7 @@
     "react-native-gesture-handler": "~1.10.2",
     "react-native-get-random-values": "~1.7.0",
     "react-native-maps": "0.29.3",
+    "react-native-material-menu": "^2.0.0",
     "react-native-modal": "^12.0.3",
     "react-native-multi-selectbox": "^1.5.0",
     "react-native-multiple-select": "^0.5.7",

src/components/Atlas.tsx

@@ -29,6 +29,8 @@ import * as Updates from 'expo-updates'
 import { Manifest, UpdateCheckResult } from 'expo-updates';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { navigationRef } from '../navigation/RootNavigator';
+
 export enum TokenState {
   CheckingToken,
   ValidToken,
@@ -189,7 +191,7 @@ const Atlas : React.FC = () => {
   return (
     <MenuProvider>
       <StatusBar barStyle='light-content' backgroundColor={colors.red}/>
-      <NavigationContainer>  
+      <NavigationContainer ref={navigationRef}>  
       <SafeAreaView style={{backgroundColor: colors.red, height: '100%'}} edges={['top', 'left', 'right']}>
         {checkingToken ? <Splash/> :
         <QueryClientProvider client={queryClient}>

src/components/Map/IndoorFloor.tsx

@@ -18,7 +18,7 @@ function IndoorFloor(props) {
       <FifthFloorC viewBox='257 153 270 290' style={{ opacity: 0.7 }} height={"100%"} width={"100%"} />,
   ]
 
-  return compArray[props.floorNum] 
+  return compArray[props.floorNum]
 }
 
 export default IndoorFloor

src/navigation/MapNavigator.tsx

@@ -4,7 +4,7 @@ import { createStackNavigator, StackNavigationProp } from "@react-navigation/sta
 import { createNativeStackNavigator } from "@react-navigation/native-stack"
 import { observer } from "mobx-react"
 import React, { useEffect, useState } from "react"
-import { Dimensions, Image, ScrollView, View } from "react-native"
+import { Alert, Dimensions, Image, ScrollView, View } from "react-native"
 import { Chip } from "react-native-paper"
 import { IconButton } from "../components/Buttons"
 import IndoorMap from "../components/Map/MainMapComponent/IndoorMap"
@@ -19,6 +19,11 @@ import { authStore } from "../libs/auth/AuthStore"
 import { colors, lmTypes } from "../utils/GlobalUtils"
 import { AuthTabsNavigationProp } from "./AuthorizedNavigator"
 
+import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
+import { navigate } from "./RootNavigator"
+
+
+
 const MapStackNavigator = createNativeStackNavigator()
 
 export type MapStackParamList = {
@@ -44,10 +49,11 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
 
     // const currentRouteIndex = useNavigation().getState().routes[0].state.index
     // const currentRouteName = useNavigation().getState().routes[0].state.routeNames[currentRouteIndex]
-
     const navigationState = useNavigationState(state => state)
     const [currentRoute, setCurrentRoute] = useState<string>()
 
+    const [visible, setVisible] = useState(false);
+
     useEffect(() => {
         const currentRouteIndex = navigationState?.routes[0]?.state?.index
         const currentRouteName = navigationState?.routes[0]?.state?.routeNames[currentRouteIndex]
@@ -138,9 +144,7 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
                             setSelectedLandmarkId={mapState.setSelectedLandmarkId} />}
                 </MapStackNavigator.Screen>
 
-                <MapStackNavigator.Screen name="Indoor" listeners={{
-                    
-                }} >
+                <MapStackNavigator.Screen name="Indoor" >
                     {({ navigation }) =>
                         <IndoorMap
                             navigation={navigation}
@@ -151,15 +155,13 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
                         />}
                 </MapStackNavigator.Screen>
 
-
-
             </MapStackNavigator.Navigator>
 
 
 
             {/* Filter chips and button*/}
             {!mapState.filterVisible && currentRoute == 'Indoor' ?
-                <View style={{width:Dimensions.get("window").width*0.8 ,marginLeft:Dimensions.get("window").width*0.1, borderColor:"red" , borderWidth:0, bottom: 55, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
+                <View style={{ width: Dimensions.get("window").width * 0.8, marginLeft: Dimensions.get("window").width * 0.1, borderColor: "red", borderWidth: 0, bottom: 55, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
                     <IconButton size={16} color={colors.red} style={[mapStyles.filterButtonIndoor]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
                     <ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>
                         {mapState.onlyOwned ? <Chip avatar={(<FontAwesome name="user" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginRight: 5, marginLeft: 10 }} onClose={() => mapState.toggleOnlyOwned(false)}>My landmarks</Chip> : null}
@@ -171,7 +173,7 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
                         {mapState.minLmRating > 0 ? <Chip avatar={(<FontAwesome name="star" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginLeft: 5, marginRight: 10 }} onClose={() => mapState.setMinLmRating(0)}>Minimum rating: {mapState.minLmRating}</Chip> : null}
                     </ScrollView>
                 </View>
-                 :
+                :
                 <View style={{ top: 10, marginLeft: 40, marginRight: 20, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
                     <IconButton size={20} color={colors.red} style={[mapStyles.filterButtonOutdoor]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
                     <ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>
@@ -184,10 +186,36 @@ const MapNavigator: React.FC<MapNavigatorProps> = ({ route }) => {
                         {mapState.minLmRating > 0 ? <Chip avatar={(<FontAwesome name="star" size={20} color='gray' style={{ textAlign: 'center', textAlignVertical: 'center' }} />)} style={{ borderWidth: 1, borderColor: 'lightgray', marginLeft: 5, marginRight: 10 }} onClose={() => mapState.setMinLmRating(0)}>Minimum rating: {mapState.minLmRating}</Chip> : null}
                     </ScrollView>
                 </View>
-                }
-  
+            }
+
+            {/* Create Hamburger icon */}
+            {currentRoute == 'Indoor' ? <></> :
+                <View style={{ top: 60, right: 20, position: 'absolute', }}>
+                    <Menu
+                        visible={visible}
+                        anchor={<IconButton size={20} color={colors.red} style={[mapStyles.filterButtonOutdoor]} icon="bars" onPress={() => setVisible(true)} />}
+                        onRequestClose={() => setVisible(false)}
+                    >
+
+                        <MenuItem onPress={() => {
+                            setVisible(false)
+                            navigate("Indoor")
+                            // Alert.alert("Cameron Library")
+                        }}>Cameron</MenuItem>
+
+                        <MenuDivider />
+                        <MenuItem disabled>More indoor maps on the way!</MenuItem>
+
+                    </Menu>
+
+                    {/* either "bars" or "list"  */}
+                    <ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}></ScrollView>
+                </View>
+            }
+
+
 
-  {/* {!mapState.filterVisible ?
+            {/* {!mapState.filterVisible ?
                 <View style={{ top: 10, marginLeft: 40, marginRight: 20, position: 'absolute', flexDirection: "row-reverse", justifyContent: 'flex-end' }}>
                     <IconButton size={20} color={colors.red} style={[mapStyles.filterButton]} icon="filter" onPress={() => mapState.toggleFilter(true)} />
                     <ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }} style={{ marginHorizontal: 10, flexDirection: 'row' }}>

src/navigation/RootNavigator.ts

@@ -0,0 +1,10 @@
+import { createNavigationContainerRef } from "@react-navigation/native";
+
+    export const navigationRef = createNavigationContainerRef()
+
+    export function navigate(name, params?) {
+      console.log(navigationRef.isReady())
+      if (navigationRef.isReady()) {
+        navigationRef.navigate(name as never, params as never);
+      }
+    }

src/utils/RequestUtils.ts

@@ -27,7 +27,7 @@ import Config from 'react-native-config'
 //export const API_URL = 'http://192.168.3.81:8000'
 // export const API_URL = 'https://staging.clicknpush.ca'
 
-// export const API_URL = 'http://192.168.3.162:8000'
-export const API_URL = 'http://192.168.3.102:8000'
+// export const API_URL = 'http://192.168.3.162:8000'   // Chase
+export const API_URL = 'http://192.168.0.22:8000'       // Eric
 
 // export const API_URL = Config.API_URL