show different NavbarItems depending on device width

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>

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 (

src/typings.d.ts

@@ -197,4 +197,5 @@ interface NavbarItem{
     path: string,
     title:string,
     IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>,
+    show: 'mobile' | 'desktop' | 'both'
 }