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

hoarder-app · Mar 15, 2024 · 77b7892 · 77b7892
1 parent dc591f8
commit 77b7892
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/apps/mobile/app.json b/apps/mobile/app.json
@@ -3,7 +3,7 @@
     "name": "Hoarder App",
     "slug": "hoarder",
     "scheme": "hoarder",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

diff --git 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>
   );
 }