76 lines
4.7 KiB
TypeScript
76 lines
4.7 KiB
TypeScript
import {Appbar, Portal, Button, Dialog, Menu, useTheme} from "react-native-paper";
|
|
import {Image, useColorScheme, View} from "react-native";
|
|
import React, {useState} 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 }: { toggleProfile: () => 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"
|
|
onPressIn={(event) => {
|
|
setMenuAnchor({ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY + 40 });
|
|
setMenuVisible(true);
|
|
}}
|
|
iconColor={theme.colors.primary} />
|
|
</View>
|
|
<View style={styles.logoContainer} >
|
|
<Image source={
|
|
colorScheme === 'dark' ?
|
|
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.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>
|
|
);
|
|
};
|
|
|
|
export default TopNav;
|