From e35bfb49a2855a8ee73b3fee36b1176ab1d02d3a Mon Sep 17 00:00:00 2001
From: Sakul Budhathoki <sakulbudhathoki977@gmail.com>
Date: Thu, 25 Jan 2024 22:34:06 +0545
Subject: [PATCH 1/2] fix: replace Drawer by Stack for web

---
 packages/components/navigation/Navigator.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/components/navigation/Navigator.tsx b/packages/components/navigation/Navigator.tsx
index 2931eeb0ec..30861397ae 100644
--- a/packages/components/navigation/Navigator.tsx
+++ b/packages/components/navigation/Navigator.tsx
@@ -1,4 +1,5 @@
 import { createDrawerNavigator } from "@react-navigation/drawer";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
 import { Platform } from "react-native";
 
@@ -51,12 +52,14 @@ import { RootStackParamList } from "../../utils/navigation";
 import { neutral00 } from "../../utils/style/colors";
 import { fullSidebarWidth } from "../../utils/style/layout";
 
-//const Stack = createNativeStackNavigator<RootStackParamList>();
-const Drawer = createDrawerNavigator<RootStackParamList>();
+const Stack = createNativeStackNavigator<RootStackParamList>();
+const Drawer =
+  Platform.OS === "web" ? Stack : createDrawerNavigator<RootStackParamList>();
 const screenTitle = (title: string) => "Teritori - " + title;
 
 export const Navigator: React.FC = () => {
   return (
+    //@ts-ignore
     <Drawer.Navigator
       initialRouteName="Home"
       drawerContent={() => (Platform.OS === "web" ? null : <Sidebar />)}

From efeddfc9cd925531960a085032018e33f6a3d672 Mon Sep 17 00:00:00 2001
From: Norman Meier <norman@samourai.coop>
Date: Thu, 25 Jan 2024 23:20:56 +0100
Subject: [PATCH 2/2] chore: use matching screen implem

Signed-off-by: Norman Meier <norman@samourai.coop>
---
 packages/components/navigation/Navigator.tsx | 129 +++++++++++--------
 1 file changed, 72 insertions(+), 57 deletions(-)

diff --git a/packages/components/navigation/Navigator.tsx b/packages/components/navigation/Navigator.tsx
index 30861397ae..a8356042c6 100644
--- a/packages/components/navigation/Navigator.tsx
+++ b/packages/components/navigation/Navigator.tsx
@@ -52,46 +52,61 @@ import { RootStackParamList } from "../../utils/navigation";
 import { neutral00 } from "../../utils/style/colors";
 import { fullSidebarWidth } from "../../utils/style/layout";
 
-const Stack = createNativeStackNavigator<RootStackParamList>();
-const Drawer =
-  Platform.OS === "web" ? Stack : createDrawerNavigator<RootStackParamList>();
+// Drawer navigator is broken on web
+// FIXME: upgrade to expo-router
+
+const getNav = () => {
+  if (Platform.OS === "web") {
+    return {
+      Nav: createNativeStackNavigator<RootStackParamList>(),
+      navigatorScreenOptions: {},
+    };
+  } else {
+    return {
+      Nav: createDrawerNavigator<RootStackParamList>(),
+      navigatorScreenOptions: {
+        drawerStyle: {
+          backgroundColor: neutral00,
+          width: fullSidebarWidth,
+        },
+      },
+    };
+  }
+};
+
+const { Nav, navigatorScreenOptions } = getNav();
+
 const screenTitle = (title: string) => "Teritori - " + title;
 
 export const Navigator: React.FC = () => {
   return (
-    //@ts-ignore
-    <Drawer.Navigator
+    <Nav.Navigator
       initialRouteName="Home"
       drawerContent={() => (Platform.OS === "web" ? null : <Sidebar />)}
-      screenOptions={{
-        drawerStyle: {
-          backgroundColor: neutral00,
-          width: fullSidebarWidth,
-        },
-      }}
+      screenOptions={navigatorScreenOptions as any} // FIXME: upgrade to expo-router
     >
-      <Drawer.Screen
+      <Nav.Screen
         name="Home"
         component={HomeScreen}
         options={{ header: () => null, title: screenTitle("Home") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="MyCollection"
         component={MyCollectionScreen}
         options={{ header: () => null, title: screenTitle("My Collection") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Guardians"
         component={GuardiansScreen}
         options={{ header: () => null, title: screenTitle("Guardians") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGame"
         component={RiotGameScreen}
         options={{ header: () => null }}
       />
 
-      <Drawer.Screen
+      <Nav.Screen
         name="Marketplace"
         component={MarketplaceScreen}
         options={{
@@ -99,29 +114,29 @@ export const Navigator: React.FC = () => {
           title: screenTitle("NFT Marketplace - Popular Collections"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Governance"
         component={GovernanceScreen}
         options={{ header: () => null, title: screenTitle("Governance") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="UserPublicProfile"
         component={UserPublicProfileScreen}
         options={{ header: () => null }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotersFooter"
         component={RiotersFooterScreen}
         options={{ header: () => null, title: screenTitle("Rioters Footer") }}
       />
 
       {/* === Riot Game */}
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGameEnroll"
         component={RiotGameEnrollScreen}
         options={{ header: () => null, title: screenTitle("Riot Game Enroll") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGameFight"
         component={RiotGameFightScreen}
         options={{
@@ -129,7 +144,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Riot Game Fight"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGameBreeding"
         component={RiotGameBreedingScreen}
         options={{
@@ -137,7 +152,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Riot Game Breeding"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGameMarketplace"
         component={RiotGameMarketplaceScreen}
         options={{
@@ -145,7 +160,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Riot Game Marketplace"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGameMemories"
         component={RiotGameMemoriesScreen}
         options={{
@@ -153,7 +168,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Riot Game Memories"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGameLeaderboard"
         component={RiotGameLeaderboardScreen}
         options={{
@@ -161,7 +176,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Riot Game Leaderboard"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="RiotGameInventory"
         component={RiotGameInventoryScreen}
         options={{
@@ -171,12 +186,12 @@ export const Navigator: React.FC = () => {
       />
 
       {/* ==== Wallet Manager */}
-      <Drawer.Screen
+      <Nav.Screen
         name="WalletManager"
         component={WalletManagerScreen}
         options={{ header: () => null, title: screenTitle("Wallet Manager") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="WalletManagerWallets"
         component={WalletManagerWalletsScreen}
         options={{
@@ -184,7 +199,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Wallet Manager (Wallets)"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="WalletManagerChains"
         component={WalletManagerWalletsScreen}
         options={{
@@ -194,12 +209,12 @@ export const Navigator: React.FC = () => {
       />
 
       {/* ==== Launchpad */}
-      <Drawer.Screen
+      <Nav.Screen
         name="Launchpad"
         component={LaunchpadScreen}
         options={{ header: () => null, title: screenTitle("Launchpad") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="LaunchpadApply"
         component={LaunchpadApplyScreen}
         options={{
@@ -207,14 +222,14 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Launchpad (Apply)"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="MintCollection"
         component={MintCollectionScreen}
         options={{ header: () => null, title: screenTitle("Mint Collection") }}
       />
 
       {/* ==== Multisig */}
-      <Drawer.Screen
+      <Nav.Screen
         name="Multisig"
         component={MultisigScreen}
         options={{
@@ -222,7 +237,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Multisig Wallets"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="MultisigCreate"
         component={MultisigCreateScreen}
         options={{
@@ -230,7 +245,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Create Multisig Wallet"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="MultisigWalletDashboard"
         component={MultisigWalletDashboardScreen}
         options={{
@@ -241,7 +256,7 @@ export const Navigator: React.FC = () => {
 
       {/* ==== Organization */}
 
-      <Drawer.Screen
+      <Nav.Screen
         name="OrganizationDeployer"
         component={OrganizationDeployerScreen}
         options={{
@@ -249,7 +264,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Organization Deployer"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Organizations"
         component={OrganizationsScreen}
         options={{
@@ -259,94 +274,94 @@ export const Navigator: React.FC = () => {
       />
 
       {/* ==== Teritori Name Service*/}
-      <Drawer.Screen
+      <Nav.Screen
         name="TNSHome"
         component={TNSHomeScreen}
         options={{ header: () => null, title: screenTitle("Name Service") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Collection"
         component={CollectionScreen}
         options={{ header: () => null, title: screenTitle("Collection") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="NFTDetail"
         component={NFTDetailScreen}
         options={{ header: () => null, title: screenTitle("NFT") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Staking"
         component={StakeScreen}
         options={{ header: () => null, title: screenTitle("Staking") }}
       />
       {/* ==== Swap*/}
-      <Drawer.Screen
+      <Nav.Screen
         name="Swap"
         component={SwapScreen}
         options={{ header: () => null, title: screenTitle("Swap") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="ComingSoon"
         component={ComingSoonScreen}
         options={{ header: () => null }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="CollectionTools"
         component={CollectionToolsScreen}
         options={{ header: () => null }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Settings"
         component={SettingsScreen}
         options={{ header: () => null }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="FeedNewArticle"
         component={FeedNewArticleScreen}
         options={{ header: () => null, title: screenTitle("New Article") }}
       />
 
-      <Drawer.Screen
+      <Nav.Screen
         name="FeedPostView"
         component={FeedPostViewScreen}
         options={{ header: () => null, title: "Teritori" }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Feed"
         component={FeedScreen}
         options={{ header: () => null, title: screenTitle("Feed") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="HashtagFeed"
         component={HashtagFeedScreen}
         options={{ header: () => null, title: screenTitle("") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="ToriPunks"
         component={ToriPunks}
         options={{ header: () => null, title: screenTitle("ToriPunks") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="DAppStore"
         component={DAppStoreScreen}
         options={{ header: () => null, title: screenTitle("dApp Store") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="CoreDAO"
         component={CoreDAOScreen}
         options={{ header: () => null, title: screenTitle("Core DAO") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Metrics"
         component={MetricsScreen}
         options={{ header: () => null, title: screenTitle("Metrics") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="Message"
         component={MessageScreen}
         options={{ header: () => null, title: screenTitle("Message") }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="ChatSection"
         component={ChatSectionScreen}
         options={{
@@ -354,7 +369,7 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Chat Message"),
         }}
       />
-      <Drawer.Screen
+      <Nav.Screen
         name="FriendshipManager"
         component={FriendshipManagerScreen}
         options={{
@@ -362,6 +377,6 @@ export const Navigator: React.FC = () => {
           title: screenTitle("Friends Add"),
         }}
       />
-    </Drawer.Navigator>
+    </Nav.Navigator>
   );
 };