From a30ddcf811ec6998fcadda5b2911c50b63b0dd8e Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Sat, 30 Oct 2021 16:34:09 +0330
Subject: [PATCH] show different NavbarItems depending on device width

---
 src/App.tsx                             |  8 ++++++++
 src/components/navbar/DefaultNavBar.tsx | 25 ++++++++++++++++++++-----
 src/typings.d.ts                        |  1 +
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 38dafb41..db09c71a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,6 +34,8 @@ import Reader from 'screens/Reader';
 import Updates from 'screens/Updates';
 import DownloadQueue from 'screens/DownloadQueue';
 import Browse from 'screens/Browse';
+import Sources from 'screens/Sources';
+import Extensions from 'screens/Extensions';
 
 declare module '@mui/styles/defaultTheme' {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -164,6 +166,12 @@ export default function App() {
                                     <Route path="/updates">
                                         <Updates />
                                     </Route>
+                                    <Route path="/sources">
+                                        <Sources />
+                                    </Route>
+                                    <Route path="/extensions">
+                                        <Extensions />
+                                    </Route>
                                     <Route path="/browse">
                                         <Browse />
                                     </Route>
diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index ce6a55d1..5180ff2a 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/components/navbar/DefaultNavBar.tsx
@@ -16,6 +16,7 @@ import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import ExploreIcon from '@mui/icons-material/Explore';
+import ExtensionIcon from '@mui/icons-material/Extension';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
@@ -42,23 +43,37 @@ const navbarItems: Array<NavbarItem> = [
         path: '/library',
         title: 'Library',
         IconComponent: CollectionsBookmarkIcon,
-    },
-    {
+        show: 'both',
+    }, {
         path: '/updates',
         title: 'Updates',
         IconComponent: NewReleasesIcon,
+        show: 'both',
+    }, {
+        path: '/sources',
+        title: 'Sources',
+        IconComponent: ExploreIcon,
+        show: 'desktop',
+    }, {
+        path: '/extensions',
+        title: 'Extensions',
+        IconComponent: ExtensionIcon,
+        show: 'desktop',
     }, {
         path: '/browse',
         title: 'Browse',
         IconComponent: ExploreIcon,
+        show: 'mobile',
     }, {
         path: '/downloads',
         title: 'Downloads',
         IconComponent: GetAppIcon,
+        show: 'both',
     }, {
         path: '/settings',
         title: 'Settings',
         IconComponent: SettingsIcon,
+        show: 'both',
     },
 ];
 
@@ -78,11 +93,11 @@ export default function DefaultNavBar() {
 
     let navbar = <></>;
     if (isMobileWidth) {
-        if (!isMainRoute) {
-            navbar = <MobileBottomBar navBarItems={navbarItems} />;
+        if (isMainRoute) {
+            navbar = <MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />;
         }
     } else {
-        navbar = <DesktopSideBar navBarItems={navbarItems} />;
+        navbar = <DesktopSideBar navBarItems={navbarItems.filter((it) => it.show !== 'mobile')} />;
     }
 
     return (
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 0b2768ff..43f5d91e 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -197,4 +197,5 @@ interface NavbarItem{
     path: string,
     title:string,
     IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>,
+    show: 'mobile' | 'desktop' | 'both'
 }