Skip to content

Commit

Permalink
fix(navigation): replace Drawer by Stack on web (#895)
Browse files Browse the repository at this point in the history 
* fix: replace Drawer by Stack for web

* chore: use matching screen implem

Signed-off-by: Norman Meier <[email protected]>

---------

Signed-off-by: Norman Meier <[email protected]>
Co-authored-by: Norman Meier <[email protected]>
  • Loading branch information
@sakul-budhathoki @n0izn0iz @ChiragPansuriya-iView
2 people authored and ChiragPansuriya-iView committed Jan 31, 2024
1 parent e051831 commit 8c9f4d2
Showing 1 changed file with 73 additions and 55 deletions.
128 changes: 73 additions & 55 deletions packages/components/navigation/Navigator.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -51,114 +52,131 @@ 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>();
// 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 (
<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={{
header: () => null,
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={{
header: () => null,
title: screenTitle("Riot Game Fight"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="RiotGameBreeding"
component={RiotGameBreedingScreen}
options={{
header: () => null,
title: screenTitle("Riot Game Breeding"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="RiotGameMarketplace"
component={RiotGameMarketplaceScreen}
options={{
header: () => null,
title: screenTitle("Riot Game Marketplace"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="RiotGameMemories"
component={RiotGameMemoriesScreen}
options={{
header: () => null,
title: screenTitle("Riot Game Memories"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="RiotGameLeaderboard"
component={RiotGameLeaderboardScreen}
options={{
header: () => null,
title: screenTitle("Riot Game Leaderboard"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="RiotGameInventory"
component={RiotGameInventoryScreen}
options={{
Expand All @@ -168,20 +186,20 @@ 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={{
header: () => null,
title: screenTitle("Wallet Manager (Wallets)"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="WalletManagerChains"
component={WalletManagerWalletsScreen}
options={{
Expand All @@ -191,43 +209,43 @@ 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={{
header: () => null,
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={{
header: () => null,
title: screenTitle("Multisig Wallets"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="MultisigCreate"
component={MultisigCreateScreen}
options={{
header: () => null,
title: screenTitle("Create Multisig Wallet"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="MultisigWalletDashboard"
component={MultisigWalletDashboardScreen}
options={{
Expand All @@ -238,15 +256,15 @@ export const Navigator: React.FC = () => {

{/* ==== Organization */}

<Drawer.Screen
<Nav.Screen
name="OrganizationDeployer"
component={OrganizationDeployerScreen}
options={{
header: () => null,
title: screenTitle("Organization Deployer"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="Organizations"
component={OrganizationsScreen}
options={{
Expand All @@ -256,109 +274,109 @@ 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={{
header: () => null,
title: screenTitle("Chat Message"),
}}
/>
<Drawer.Screen
<Nav.Screen
name="FriendshipManager"
component={FriendshipManagerScreen}
options={{
header: () => null,
title: screenTitle("Friends Add"),
}}
/>
</Drawer.Navigator>
</Nav.Navigator>
);
};

0 comments on commit 8c9f4d2

Please sign in to comment.