diff --git a/app/index.tsx b/app/index.tsx index a1c8b6a..5f19379 100644 --- a/app/index.tsx +++ b/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 ( - setMenuActive(false)} + toggleAbout={() => setAboutActive(!isAboutActive)} + togglePrivacy={() => setPrivacyActive(!isPrivacyActive)} + toggleBug={() => setBugActive(!isBugActive)} toggleProfile={() => setProfileActive(true)} - toggleMenu={() => setMenuActive(true)} + toggleLocation={() => setLocationActive(true)} + /> + setAboutActive(!isAboutActive)} + togglePrivacy={() => setPrivacyActive(!isPrivacyActive)} + toggleBug={() => setBugActive(!isBugActive)} + toggleLocation={() => setLocationActive(!isLocationActive)} + /> + setMenuActive(!isMenuActive)} /> { setStatus={setUserStatus} currentTheme={currentTheme} isProfileActive={isProfileActive} - isMenuActive={isMenuActive} /> { setChanged={setUserDataChanged} onClose={() => setProfileActive(false)} /> - ); }; diff --git a/assets/styles.ts b/assets/styles.ts index 025561a..fd99fa0 100644 --- a/assets/styles.ts +++ b/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; diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx index 305d4da..91abf02 100644 --- a/components/BottomNav.tsx +++ b/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 = ({ isProfileActive }) => { + +const BottomNav: React.FC = ({ isProfileActive, isMenuActive }) => { const theme = useTheme(); const [menuVisible, setMenuVisible] = useState(false); - return ( - + diff --git a/components/Dialogs.tsx b/components/Dialogs.tsx new file mode 100644 index 0000000..4faa730 --- /dev/null +++ b/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 = ({ aboutVisible, privacyVisible, bugVisible, locationVisible, toggleAbout, togglePrivacy, toggleBug, toggleLocation }) => { + const theme = useTheme(); + return ( + + toggleAbout()} + style={{backgroundColor: theme.colors.primaryContainer}}> + About Us + + + + + + togglePrivacy()} + style={{backgroundColor: theme.colors.primaryContainer}}> + Privacy Policy + + + + + + toggleBug()} + style={{backgroundColor: theme.colors.primaryContainer}}> + Report A Bug + + + + + + toggleLocation()} + style={{backgroundColor: theme.colors.primaryContainer}}> + Location + + + + + + + ) +} + +export default Dialogs; diff --git a/components/DrawerMenu.tsx b/components/DrawerMenu.tsx new file mode 100644 index 0000000..2bbba5b --- /dev/null +++ b/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 = ({ isMenuActive, onClose, toggleAbout, togglePrivacy, toggleBug, toggleProfile, toggleLocation }) => { + const theme = useTheme(); + if (!isMenuActive) { + return null; + } + return ( + + + { + toggleProfile(); + onClose(); + }} + /> + { + toggleLocation(); + onClose(); + }} + /> + + + { + toggleAbout(); + onClose(); + }} + /> + { + togglePrivacy(); + onClose(); + }} + /> + { + toggleBug(); + onClose(); + }} + /> + + + ); +}; + +export default DrawerMenu; diff --git a/components/Status.tsx b/components/Status.tsx index 0c53b68..bbb211b 100644 --- a/components/Status.tsx +++ b/components/Status.tsx @@ -27,10 +27,9 @@ interface StatusProps { setStatus: (currentStatus: string) => void; currentTheme: string; isProfileActive: boolean; - isMenuActive: boolean; } -const Status: React.FC = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive, isMenuActive }) => { +const Status: React.FC = ({ 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 = ({ id, name, image, currentStatus, setStat }, [lastMessage, setStatus, id]); return ( - + diff --git a/components/TopNav.tsx b/components/TopNav.tsx index 8784993..5f7e9b3 100644 --- a/components/TopNav.tsx +++ b/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 ( - setMenuVisible(false)} anchor={menuAnchor} style={{ backgroundColor: theme.colors.primaryContainer }}> - { setMenuVisible(false); setAboutVisible(true);}} title="About Us" style={{ backgroundColor: theme.colors.primaryContainer }}/> - { setMenuVisible(false); setPrivacyVisible(true);}} title="Privacy Policy" style={{ backgroundColor: theme.colors.primaryContainer }}/> - { setMenuVisible(false); setBugVisible(true);}} title="Report a Bug" style={{ backgroundColor: theme.colors.primaryContainer }}/> - @@ -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"} /> - + - - setAboutVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}> - About Us - - - - - - setPrivacyVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}> - Privacy Policy - - - - - - setBugVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}> - Report A Bug - - - - - - ); }; diff --git a/context/UserContext.tsx b/context/UserContext.tsx index 8dfda1b..3d85978 100644 --- a/context/UserContext.tsx +++ b/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 = ({ 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 = ({ children }) => { setProfileActive, isMenuActive, setMenuActive, + isAboutActive, + setAboutActive, + isPrivacyActive, + setPrivacyActive, + isBugActive, + setBugActive, + isLocationActive, + setLocationActive, userId, userName, setUserName,