Moved the Nav bar into a separate file.

app/Nav.tsx

@@ -0,0 +1,54 @@
+import {Appbar, Portal, Button, Dialog, Menu, Text, useTheme} from "react-native-paper";
+import {Image, StyleSheet, 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 [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.primary }}>
+                <View>
+                    <Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={menuAnchor}>
+                        <Menu.Item onPress={() => { setMenuVisible(false); setAboutVisible(true);}} title="About Us"/>
+                    </Menu>
+                    <Appbar.Action icon="menu"
+                        onPressIn={(event) => {
+                            setMenuAnchor({ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY + 40 });
+                            setMenuVisible(true);
+                        }}
+                        iconColor={theme.colors.inversePrimary} />
+                </View>
+                <View style={styles.logoContainer}>
+                    <Image source={require("../assets/images/pogdark_logo.png")} style={styles.logo} />
+                </View>
+                <Appbar.Action icon="pencil" onPress={toggleProfile} iconColor={ theme.colors.inversePrimary } />
+            </Appbar.Header>
+            <Portal>
+                <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.background }}>
+                    <Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center' }}>About Us</Dialog.Title>
+                    <Dialog.Content>
+                        <Text style={{ color: theme.colors.onSurface, 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.secondary }} labelStyle={{ color: theme.colors.onPrimary }}>
+                            Close
+                        </Button>
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+        </View>
+    );
+};
+
+export default Nav;

app/StatusPage.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import useWebSocket from "react-use-websocket";
 import axios from "axios";
-import { Image, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
-import { Appbar, Avatar, Button, List, useTheme, Dialog, Portal, Text, Menu } from "react-native-paper";
+import { Avatar, List, Button, useTheme,  } from "react-native-paper";
 
 interface Message {
     Id: string;
@@ -14,8 +14,6 @@ interface Message {
 
 const styles = StyleSheet.create({
     container: { flex: 1, alignItems: "stretch" },
-    logoContainer: { flex: 1, alignItems: "center" },
-    logo: { width: 150, height: 75, resizeMode: "contain" },
     listContainer: { flex: 1, width: "100%" },
     listSubheader: {
         fontSize: 18, // Larger text
@@ -53,16 +51,13 @@ const styles = StyleSheet.create({
     },
 });
 
-const StatusPage = ({ toggleProfile, id, name, image, isProfileActive }: { toggleProfile: () => void; id: string; name: string; image: string; isProfileActive: boolean }) => {
+const StatusPage = ({ id, name, image, isProfileActive }: { id: string; name: string; image: string; isProfileActive: boolean }) => {
     const theme = useTheme();
 
     const [messages, setMessages] = useState<Message[]>([]);
     const { lastMessage } = useWebSocket("ws://localhost:8080/ws", {
         shouldReconnect: () => true,
     });
-    const [aboutVisible, setAboutVisible] = useState(false);
-    const [menuVisible, setMenuVisible] = useState(false);
-    const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number } | null>(null);
 
     useEffect(() => {
         if (lastMessage?.data) {
@@ -91,35 +86,6 @@ const StatusPage = ({ toggleProfile, id, name, image, isProfileActive }: { toggl
 
     return (
         <View style={[styles.container, { backgroundColor: theme.colors.background }, isProfileActive && { display: 'none' }]}>
-            <Appbar.Header style={{ backgroundColor: theme.colors.primary }}>
-            <View>
-                <Menu
-                    visible={menuVisible}
-                    onDismiss={() => setMenuVisible(false)}
-                    anchor={menuAnchor}
-                >
-                    <Menu.Item
-                        onPress={() => {
-                            setMenuVisible(false);
-                            setAboutVisible(true);
-                        }}
-                        title="About Us"
-                    />
-                </Menu>
-                <Appbar.Action
-                    icon="menu"
-                    onPressIn={(event) => {
-                        setMenuAnchor({ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY + 40 });
-                        setMenuVisible(true);
-                    }}
-                    iconColor={theme.colors.inversePrimary}
-                />
-            </View>
-            <View style={styles.logoContainer}>
-                <Image source={require("../assets/images/pogdark_logo.png")} style={styles.logo} />
-            </View>
-            <Appbar.Action icon="pencil" onPress={toggleProfile} iconColor={ theme.colors.inversePrimary } />
-            </Appbar.Header>
             <View style={[styles.listContainer, { backgroundColor: theme.colors.surface }]}>
                 <View style={styles.listRow}>
                     <View style={styles.listColumn}>
@@ -170,21 +136,6 @@ const StatusPage = ({ toggleProfile, id, name, image, isProfileActive }: { toggl
                         style={[styles.actionButton, { backgroundColor: theme.colors.primary }]}
                         labelStyle={{ color: theme.colors.onPrimary }} >Arrived</Button>
             </View>
-            <Portal>
-                <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.background }}>
-                    <Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center' }}>About Us</Dialog.Title>
-                    <Dialog.Content>
-                        <Text style={{ color: theme.colors.onSurface, 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.secondary }} labelStyle={{ color: theme.colors.onPrimary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
         </View>
 
 

app/index.tsx

@@ -5,8 +5,7 @@ import { v4 as uuidv4 } from "uuid";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import ProfileScreen from "@/app/ProfileScreen";
 import StatusPage from "@/app/StatusPage";
-
+import Nav from "@/app/Nav";
-
 
 const Index = () => {
     const { colors } = useTheme();
@@ -55,8 +54,11 @@ const Index = () => {
 
     return (
         <View style={[styles.container,{ backgroundColor: colors.background }]}>
-            <StatusPage
+            <Nav
                 toggleProfile={() => setProfileActive(true)}
+                isProfileActive={isProfileActive}
+            />
+            <StatusPage
                 id={userId}
                 name={userName}
                 image={userImage}