Header bar with menues! TODO: android

app/index.tsx

@@ -1,5 +1,9 @@
-import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity} from "react-native";
+import { Stack } from "expo-router";
+import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform} from "react-native";
 import {RowMap, SwipeListView} from "react-native-swipe-list-view";
+import {ChevronDown, Plus} from "lucide-react-native";
+import {useRef} from "react";
+import {MenuComponentRef, MenuView} from "@react-native-menu/menu";
 
 const servers: Server[] = [
   {
@@ -26,7 +30,90 @@ const servers: Server[] = [
 
 export default function Index() {
   return (
-    <ComputerList computers={servers[0].computers}/>
+    <View>
+      <Stack.Screen
+        options={{
+          title: 'Home',
+          headerTintColor: '#fff',
+          headerTitleStyle: {
+            fontWeight: 'bold',
+          },
+          headerTitle: props =>
+            <View style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: 10,
+            }}>
+              <Text style={{
+                fontSize: 20,
+                fontWeight: 'bold',
+              }}>{servers[0].name}</Text>
+              <View style={{
+                backgroundColor: "#007AFF",
+                borderRadius: 100,
+              }}>
+                <MenuView
+                  onPressAction={({ nativeEvent }) => {
+                    console.warn(JSON.stringify(nativeEvent));
+                    //TODO: Handle adding computers/servers
+                  }}
+                  actions={[
+                    {
+                      id: 'server0',
+                      title: servers[0].name,
+                      titleColor: '#2367A2',
+                      imageColor: '#2367A2',
+                    },
+                    {
+                      id: 'deleteServer',
+                      title: 'Delete Current Server',
+                      attributes: {
+                        destructive: true,
+                      },
+                      image: Platform.select({
+                        ios: 'trash',
+                        android: 'ic_menu_delete',
+                      }),
+                    },
+                  ]}
+                  shouldOpenOnLongPress={false}
+                >
+                  <ChevronDown color={"#FFFFFF"} />
+                </MenuView>
+              </View>
+            </View>,
+          headerRight: props =>
+            <View>
+              <MenuView
+                onPressAction={({ nativeEvent }) => {
+                  console.warn(JSON.stringify(nativeEvent));
+                  //TODO: Handle adding computers/servers
+                }}
+                actions={[
+                  {
+                    id: 'addComputer',
+                    title: 'Add Server',
+                    titleColor: '#2367A2',
+                    image: 'ic_menu_add', //TODO: Fix icons
+                    imageColor: '#2367A2',
+                  },
+                  {
+                    id: 'addServer',
+                    title: 'Add Server',
+                    titleColor: '#2367A2',
+                    image: 'ic_menu_add',
+                    imageColor: '#2367A2',
+                  },
+                ]}
+                shouldOpenOnLongPress={false}
+              >
+                <Plus color={"#007AFF"} />
+              </MenuView>
+            </View>
+        }}
+      />
+      <ComputerList computers={servers[0].computers}/>
+    </View>
   );
 }
 
@@ -87,9 +174,7 @@ function ComputerList(computers: { computers: Computer[] }) {
   );
 
   return (
-    <SwipeListView style={{
-      // borderRadius: 25,
-    }}
+    <SwipeListView
       data={computers.computers}
       renderItem={({item}: ListRenderItemInfo<Computer>) =>
         <View style={styles.computerElement}>
@@ -100,7 +185,7 @@ function ComputerList(computers: { computers: Computer[] }) {
             backgroundColor: item.background_color,
             alignItems: "center",
             justifyContent: "center",
-          }}>
+          }}> //TODO: Make Button
             <Text style={{
               fontSize: 28
             }}>{item.emoji}</Text>