ui(mobile): Change the creation buttons to be under a menu

1 files changed, 41 insertions, 11 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index fe15956c..1736def9 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,18 +1,48 @@
-import { View } from "react-native";
-import { Link, Stack } from "expo-router";
+import { Platform, View } from "react-native";
+import * as Haptics from "expo-haptics";
+import { Stack, useRouter } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
-import { Link as LinkIcon, SquarePen } from "lucide-react-native";
+import { MenuView } from "@react-native-menu/menu";
+import { SquarePen } from "lucide-react-native";
 
 function HeaderRight() {
+  const router = useRouter();
   return (
-    <View className="flex flex-row">
-      <Link href="dashboard/add-link" className="mt-2 px-2">
-        <LinkIcon />
-      </Link>
-      <Link href="dashboard/add-note" className="mt-2 px-2">
-        <SquarePen />
-      </Link>
-    </View>
+      <MenuView
+        onPressAction={({ nativeEvent }) => {
+          Haptics.selectionAsync();
+          if (nativeEvent.event === "note") {
+            router.navigate("dashboard/add-note");
+          } else if (nativeEvent.event === "link") {
+            router.navigate("dashboard/add-link");
+          }
+        }}
+        actions={[
+          {
+            id: "link",
+            title: "New Link",
+            image: Platform.select({
+              ios: "link",
+              android: "ic_menu_link",
+            }),
+          },
+          {
+            id: "note",
+            title: "New Note",
+            image: Platform.select({
+              ios: "note",
+              android: "ic_menu_note",
+            }),
+          },
+        ]}
+        shouldOpenOnLongPress={false}
+      >
+        <View className="mt-2 px-2">
+          <SquarePen
+            onPress={() => Haptics.selectionAsync()}
+          />
+        </View>
+      </MenuView>
   );
 }