pogdark-app/app/Nav.tsx

import {Appbar, Portal, Button, Dialog, Menu, Text, useTheme} from "react-native-paper";
import {Image, StyleSheet, useColorScheme, View} from "react-native";
import React, {useState} from "react";

const styles = StyleSheet.create({
    logoContainer: { flex: 1, alignItems: "center" },
    logo: { width: 150, height: 75, resizeMode: "contain" },
});

const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
    const theme = useTheme();
    const colorScheme = useColorScheme();
    const [aboutVisible, setAboutVisible] = 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={{ 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>
                    <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} />
                </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>
                    <Dialog.Content>
                        <Text style={{ color: theme.colors.primary, textAlign: 'justify' }}>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec laoreet luctus, felis sapien facilisis augue, at tristique enim turpis nec turpis. Donec convallis justo vel mi consectetur, at pulvinar justo dictum. Mauris vulputate dapibus neque, sed sagittis libero dapibus eu. Integer nec mi at quam cursus suscipit sed et tortor.
                        </Text>
                    </Dialog.Content>
                    <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>
            </Portal>
        </View>
    );
};

export default Nav;