Major refactor, remove navs, add drawer menu

app/index.tsx

@@ -4,7 +4,8 @@ import { useTheme } from "react-native-paper";
 import Profile from "@/components/Profile";
 import Status from "@/components/Status";
 import TopNav from "@/components/TopNav";
-import BottomNav from "@/components/BottomNav"
+import DrawerMenu from "@/components/DrawerMenu";
+import Dialogs from "@/components/Dialogs";
 import { useUser } from "@/context/UserContext";
 import styles from "@/assets/styles";
 import log from "@/util/log"
@@ -17,6 +18,14 @@ const Index = () => {
         setProfileActive,
         isMenuActive,
         setMenuActive,
+        setAboutActive,
+        isAboutActive,
+        setPrivacyActive,
+        isPrivacyActive,
+        setBugActive,
+        isBugActive,
+        setLocationActive,
+        isLocationActive,
         userId,
         userName,
         setUserName,
@@ -41,9 +50,27 @@ const Index = () => {
 
     return (
         <View style={[styles.indexContainer, { backgroundColor: theme.colors.background }]}>
-            <TopNav
+            <DrawerMenu
+                isMenuActive={isMenuActive}
+                onClose={() => setMenuActive(false)}
+                toggleAbout={() => setAboutActive(!isAboutActive)}
+                togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
+                toggleBug={() => setBugActive(!isBugActive)}
                 toggleProfile={() => setProfileActive(true)}
-                toggleMenu={() => setMenuActive(true)}
+                toggleLocation={() => setLocationActive(true)}
+            />
+            <Dialogs
+                aboutVisible={isAboutActive}
+                privacyVisible={isPrivacyActive}
+                bugVisible={isBugActive}
+                locationVisible={isLocationActive}
+                toggleAbout={() => setAboutActive(!isAboutActive)}
+                togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
+                toggleBug={() => setBugActive(!isBugActive)}
+                toggleLocation={() => setLocationActive(!isLocationActive)}
+            />
+            <TopNav
+                toggleMenu={() => setMenuActive(!isMenuActive)}
             />
             <Status
                 id={userId}
@@ -53,7 +80,6 @@ const Index = () => {
                 setStatus={setUserStatus}
                 currentTheme={currentTheme}
                 isProfileActive={isProfileActive}
-                isMenuActive={isMenuActive}
             />
             <Profile
                 visible={isProfileActive}
@@ -67,9 +93,6 @@ const Index = () => {
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />
-            <BottomNav
-                isProfileActive={isProfileActive}
-            />
         </View>
     );
 };

assets/styles.ts

@@ -79,7 +79,13 @@ const styles = StyleSheet.create({
     //Nav
     logoContainer: { flex: 1, alignItems: "center" },
     logo: { width: 140, height: 70 },
-    topBar: { },
+    topBar: {
+        zIndex: 4,
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%",
+        alignSelf: "stretch"
+    },
     bottomBar: { height: 38 },
     //index
     indexImageBackground: {
@@ -90,6 +96,30 @@ const styles = StyleSheet.create({
         opacity: 0.3,          // Fades the image
     },
     indexContainer: { flex: 1, alignItems: "stretch" },
+    overlay: {
+
+    },
+    drawerContainer: {
+        ...StyleSheet.absoluteFillObject,
+        marginTop: 70,
+        width: 200,
+        height: "auto",
+        //elevation: 4,
+        //backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        zIndex: 2, // Ensures the drawer is above everything
+        elevation: 5, // Android shadow priority
+        borderRadius: 10,
+    },
+    footer: {
+        padding: 16,
+        alignItems: "center",
+    },
+    closeText: {
+        color: "#6200ee",
+        fontWeight: "bold",
+    },
 });
 
 export default styles;

components/BottomNav.tsx

@@ -2,20 +2,19 @@ import {Appbar, Portal, Button, Dialog, Text, useTheme } from "react-native-pape
 import { View } from "react-native";
 import styles from "@/assets/styles";
 import React, {useState} from "react";
-import Location from "@/components/Location";
 import Broken from "@/components/Broken";
 
-
 interface BNProps {
     isProfileActive: boolean;
+    isMenuActive: boolean;
 }
-const BottomNav: React.FC<BNProps> = ({ isProfileActive })  => {
+
+const BottomNav: React.FC<BNProps> = ({ isProfileActive, isMenuActive })  => {
     const theme = useTheme();
     const [menuVisible, setMenuVisible] = useState(false);
 
-
     return (
-        <View style={ isProfileActive && { display: 'none' }}>
+        <View style={ (isProfileActive || isMenuActive )&& { display: 'none' }}>
             <View style={{ backgroundColor: theme.colors.background }}>
                 <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
                     <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>

components/Dialogs.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import {Portal, Button, Dialog, useTheme} from "react-native-paper";
+import About from "@/components/About";
+import Privacy from "@/components/Privacy";
+import Broken from "@/components/Broken";
+
+interface DialogsProps {
+    aboutVisible: boolean;
+    privacyVisible: boolean;
+    bugVisible: boolean;
+    locationVisible: boolean;
+    toggleAbout: () => void;
+    togglePrivacy: () => void;
+    toggleBug: () => void;
+    toggleLocation: () => void;
+}
+
+const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisible, locationVisible, toggleAbout, togglePrivacy, toggleBug, toggleLocation }) => {
+    const theme = useTheme();
+    return (
+        <Portal>
+            <Dialog visible={aboutVisible} onDismiss={() => toggleAbout()}
+                    style={{backgroundColor: theme.colors.primaryContainer}}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>About Us</Dialog.Title>
+                <About/>
+                <Dialog.Actions style={{justifyContent: "center"}}>
+                    <Button onPress={() => toggleAbout()} mode="contained"
+                            style={{backgroundColor: theme.colors.inversePrimary}}
+                            labelStyle={{color: theme.colors.primary}}>
+                        Close
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+            <Dialog visible={privacyVisible} onDismiss={() => togglePrivacy()}
+                    style={{backgroundColor: theme.colors.primaryContainer}}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Privacy Policy</Dialog.Title>
+                <Privacy/>
+                <Dialog.Actions style={{justifyContent: "center"}}>
+                    <Button onPress={() => togglePrivacy()} mode="contained"
+                            style={{backgroundColor: theme.colors.inversePrimary}}
+                            labelStyle={{color: theme.colors.primary}}>
+                        Close
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+            <Dialog visible={bugVisible} onDismiss={() => toggleBug()}
+                    style={{backgroundColor: theme.colors.primaryContainer}}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Report A Bug</Dialog.Title>
+                <Broken/>
+                <Dialog.Actions style={{justifyContent: "center"}}>
+                    <Button onPress={() => toggleBug()} mode="contained"
+                            style={{backgroundColor: theme.colors.inversePrimary}}
+                            labelStyle={{color: theme.colors.primary}}>
+                        Close
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+            <Dialog visible={locationVisible} onDismiss={() => toggleLocation()}
+                    style={{backgroundColor: theme.colors.primaryContainer}}>
+                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
+                <Broken/>
+                <Dialog.Actions style={{justifyContent: "center"}}>
+                    <Button onPress={() => toggleLocation()} mode="contained"
+                            style={{backgroundColor: theme.colors.inversePrimary}}
+                            labelStyle={{color: theme.colors.primary}}>
+                        Close
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+        </Portal>
+    )
+}
+
+export default Dialogs;

components/DrawerMenu.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { View } from "react-native";
+import {Drawer, useTheme} from "react-native-paper";
+import styles from "@/assets/styles";
+
+interface DrawerMenuProps {
+    isMenuActive: boolean;
+    onClose: () => void;
+    toggleAbout: () => void;
+    togglePrivacy: () => void;
+    toggleBug: () => void;
+    toggleProfile: () => void;
+    toggleLocation: () => void;
+}
+
+const DrawerMenu: React.FC<DrawerMenuProps> = ({ isMenuActive, onClose, toggleAbout, togglePrivacy, toggleBug, toggleProfile, toggleLocation }) => {
+    const theme = useTheme();
+    if (!isMenuActive) {
+        return null;
+    }
+    return (
+        <View style={[styles.drawerContainer, { backgroundColor: theme.colors.background }]}>
+            <Drawer.Section>
+                <Drawer.Item
+                    label="Profile"
+                    onPress={() => {
+                        toggleProfile();
+                        onClose();
+                    }}
+                />
+                <Drawer.Item
+                    label="Location"
+                    onPress={() => {
+                        toggleLocation();
+                        onClose();
+                    }}
+                />
+            </Drawer.Section>
+            <Drawer.Section>
+                <Drawer.Item
+                    label="About Us"
+                    onPress={() => {
+                        toggleAbout();
+                        onClose();
+                    }}
+                />
+                <Drawer.Item
+                    label="Privacy Policy"
+                    onPress={() => {
+                        togglePrivacy();
+                        onClose();
+                    }}
+                />
+                <Drawer.Item
+                    label="Report a Bug"
+                    onPress={() => {
+                        toggleBug();
+                        onClose();
+                    }}
+                />
+            </Drawer.Section>
+        </View>
+    );
+};
+
+export default DrawerMenu;

components/Status.tsx

@@ -27,10 +27,9 @@ interface StatusProps {
     setStatus: (currentStatus: string) => void;
     currentTheme: string;
     isProfileActive: boolean;
-    isMenuActive: boolean;
 }
 
-const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive, isMenuActive })  => {
+const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive })  => {
     log.debug("WebSocket URL: ", WS_URL);
     log.debug("API URL: ", API_URL);
     const theme = useTheme();
@@ -167,7 +166,7 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
     }, [lastMessage, setStatus, id]);
 
     return (
-        <View style={[styles.container, (isProfileActive || isMenuActive) && { display: 'none' }]}>
+        <View style={[styles.container, isProfileActive && { display: 'none' }]}>
             <ImageBackground source={require('../assets/images/bg.webp')} style={styles.imageBackground} />
             <View style={styles.listContainer}>
                 <List.Section style={styles.listColumn}>

components/TopNav.tsx

@@ -1,29 +1,16 @@
-import {Appbar, Portal, Button, Dialog, Menu, useTheme} from "react-native-paper";
+import {Appbar, useTheme} from "react-native-paper";
 import {Image, useColorScheme, View} from "react-native";
-import React, {useState} from "react";
+import React from "react";
 import styles from "@/assets/styles";
-import About from "@/components/About";
-import Privacy from "@/components/Privacy";
-import Broken from "@/components/Broken";
 
-const TopNav = ({ toggleProfile, toggleMenu }: { toggleProfile: () => void; toggleMenu: () => void; }) => {
+const TopNav = ({ toggleMenu }: { toggleMenu: () => void; }) => {
     const theme = useTheme();
     const colorScheme = useColorScheme();
-    const [aboutVisible, setAboutVisible] = useState(false);
-    const [privacyVisible, setPrivacyVisible] = useState(false);
-    const [bugVisible, setBugVisible] = useState(false);
-    const [menuVisible, setMenuVisible] = useState(false);
-    const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number } | null>(null);
 
     return (
         <View style={{ backgroundColor: theme.colors.background }}>
             <Appbar.Header style={[styles.topBar, { backgroundColor: theme.colors.primaryContainer }]}>
                 <View>
-                    <Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={menuAnchor} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                        <Menu.Item onPress={() => { setMenuVisible(false); setAboutVisible(true);}} title="About Us" style={{ backgroundColor: theme.colors.primaryContainer }}/>
-                        <Menu.Item onPress={() => { setMenuVisible(false); setPrivacyVisible(true);}} title="Privacy Policy" style={{ backgroundColor: theme.colors.primaryContainer }}/>
-                        <Menu.Item onPress={() => { setMenuVisible(false); setBugVisible(true);}} title="Report a Bug" style={{ backgroundColor: theme.colors.primaryContainer }}/>
-                    </Menu>
                     <Appbar.Action icon="menu"
                         onPress={toggleMenu}
                         iconColor={theme.colors.primary} />
@@ -34,37 +21,8 @@ const TopNav = ({ toggleProfile, toggleMenu }: { toggleProfile: () => void; togg
                             require("../assets/images/pogdark_logo_inverse.png") : require("../assets/images/pogdark_logo.png")
                     } style={styles.logo} resizeMode={"contain"} />
                 </View>
-                <Appbar.Action icon="pencil" onPress={toggleProfile} iconColor={ theme.colors.primary } />
+                <Appbar.Action icon="pencil" color={ theme.colors.primaryContainer } />
             </Appbar.Header>
-            <Portal>
-                <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>About Us</Dialog.Title>
-                    <About />
-                    <Dialog.Actions style={{ justifyContent: "center" }}>
-                        <Button onPress={() => setAboutVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-                <Dialog visible={privacyVisible} onDismiss={() => setPrivacyVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Privacy Policy</Dialog.Title>
-                    <Privacy />
-                    <Dialog.Actions style={{ justifyContent: "center" }}>
-                        <Button onPress={() => setPrivacyVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-                <Dialog visible={bugVisible} onDismiss={() => setBugVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Report A Bug</Dialog.Title>
-                    <Broken />
-                    <Dialog.Actions style={{ justifyContent: "center" }}>
-                        <Button onPress={() => setBugVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
         </View>
     );
 };

context/UserContext.tsx

@@ -13,6 +13,14 @@ interface UserContextType {
     setProfileActive: (active: boolean) => void;
     isMenuActive: boolean;
     setMenuActive: (active: boolean) => void;
+    isAboutActive: boolean;
+    setAboutActive: (active: boolean) => void;
+    isPrivacyActive: boolean;
+    setPrivacyActive: (active: boolean) => void;
+    isBugActive: boolean;
+    setBugActive: (active: boolean) => void;
+    isLocationActive: boolean;
+    setLocationActive: (active: boolean) => void;
     userId: string;
     userName: string;
     setUserName: (name: string) => void;
@@ -37,6 +45,10 @@ interface UserProviderProps {
 export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
     const [isProfileActive, setProfileActive] = useState(false);
     const [isMenuActive, setMenuActive] = useState(false);
+    const [isAboutActive, setAboutActive] = useState(false);
+    const [isPrivacyActive, setPrivacyActive] = useState(false);
+    const [isBugActive, setBugActive] = useState(false);
+    const [isLocationActive, setLocationActive] = useState(false);
     const [userId, setUserId] = useState("");
     const [userName, setUserName] = useState("");
     const [userImage, setUserImage] = useState("");
@@ -135,6 +147,14 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                 setProfileActive,
                 isMenuActive,
                 setMenuActive,
+                isAboutActive,
+                setAboutActive,
+                isPrivacyActive,
+                setPrivacyActive,
+                isBugActive,
+                setBugActive,
+                isLocationActive,
+                setLocationActive,
                 userId,
                 userName,
                 setUserName,