diff --git a/src/components/AppDrawer.tsx b/src/components/AppDrawer.tsx index 25bc7a4..2b07230 100644 --- a/src/components/AppDrawer.tsx +++ b/src/components/AppDrawer.tsx @@ -5,11 +5,14 @@ import { useContext, useState, } from "react" -import { StyleSheet } from "react-native" +import { StyleSheet, View } from "react-native" import { Drawer } from "react-native-drawer-layout" -import { Button, Surface } from "react-native-paper" +import { Avatar, Button, Surface } from "react-native-paper" import { WWText } from "./ui/WWText" import { useExtendedTheme } from "../theme" +import { useAuth } from "../providers/AuthProvider" +import { useSafeAreaInsets } from "react-native-safe-area-context" +import { getReadableVersion } from "react-native-device-info" type DrawerContextProps = { isOpen: boolean @@ -21,21 +24,38 @@ export const useAppDrawer = () => useContext(DrawerContext) export const AppDrawer = ({ children }: PropsWithChildren) => { const [isOpen, setIsOpen] = useState(false) - const { padding } = useExtendedTheme() + const { padding, spacing } = useExtendedTheme() + const { setIsLoggedIn, isLoggedIn } = useAuth() + const { top } = useSafeAreaInsets() + + const onLogout = () => { + setIsLoggedIn(false) + setIsOpen(false) + } return ( setIsOpen(true)} onClose={() => setIsOpen(false)} + drawerStyle={styles.view} renderDrawerContent={() => { return ( - + + I'm empty at the moment. - + + + Current version: + + v{getReadableVersion()} + + ) }} @@ -50,5 +70,17 @@ export const AppDrawer = ({ children }: PropsWithChildren) => { const styles = StyleSheet.create({ view: { flex: 1, + height: "auto", + }, + test: { + height: 500, + }, + version: { + flex: 1, + flexDirection: "row", + alignItems: "flex-end", + }, + versionText: { + fontWeight: "bold", }, }) diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index 0a248b1..9e4d245 100644 --- a/src/components/NavigationBar.tsx +++ b/src/components/NavigationBar.tsx @@ -1,8 +1,9 @@ import { NativeStackHeaderProps } from "@react-navigation/native-stack" -import { Appbar } from "react-native-paper" +import { Appbar, Avatar } from "react-native-paper" import { getHeaderTitle } from "@react-navigation/elements" -import { useAuth } from "../providers/AuthProvider" import { useAppDrawer } from "./AppDrawer" +import { useExtendedTheme } from "../theme" +import { StyleSheet } from "react-native" export const NavigationBar = ({ navigation, @@ -11,23 +12,39 @@ export const NavigationBar = ({ back, }: NativeStackHeaderProps) => { const title = getHeaderTitle(options, route.name) - const { setIsLoggedIn } = useAuth() const { isOpen, setIsOpen } = useAppDrawer() + const { + colors: { onBackground }, + } = useExtendedTheme() return ( {back ? ( - + ) : ( setIsOpen((prevState) => !prevState)} + onPress={() => setIsOpen(isOpen ? false : true)} /> )} {title && } - {setIsLoggedIn && ( - setIsLoggedIn(false)} /> + {!isOpen && ( + )} ) } + +const styles = StyleSheet.create({ + avatar: { + marginEnd: 6, + }, +})