pogdark-app/components/DrawerMenu.tsx

import React from "react";
import { View } from "react-native";
import { Appbar,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 }]}>
            <Appbar.BackAction onPress={() => onClose()} />
            <Drawer.Section>
                <Drawer.Item label="Profile" onPress={() => { toggleProfile(); onClose(); }} />
                <Drawer.Item label="Location" onPress={() => { toggleLocation(); onClose(); }} />
            </Drawer.Section>
            <Drawer.Section showDivider={false}>
                <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;