Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(navigation): replace Drawer by Stack on web #895

Merged
merged 2 commits into from
Jan 25, 2024
Merged

fix(navigation): replace Drawer by Stack on web #895

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e35bfb4
fix: replace Drawer by Stack for web
sakul-budhathoki Jan 25, 2024
efeddfc
chore: use matching screen implem
n0izn0iz Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 73 additions & 55 deletions packages/components/navigation/Navigator.tsx
View file
Open in desktop
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>
);
};
Loading