From 77b78922e5d16eddbe2f2b8f97b4e8cef1d4f5b3 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 15 Mar 2024 17:41:30 +0000
Subject: ui(mobile): Change the creation buttons to be under a menu

---
 apps/mobile/app/dashboard/(tabs)/index.tsx | 52 +++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 11 deletions(-)

(limited to 'apps/mobile/app/dashboard/(tabs)')

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>
   );
 }
 
-- 
cgit v1.2.3-70-g09d2