fancy icon based on if path selected

src/components/navbar/DefaultNavBar.tsx

@@ -14,10 +14,15 @@ import IconButton from '@mui/material/IconButton';
 import { useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
+import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
+import NewReleasesOutlinedIcon from '@mui/icons-material/NewReleasesOutlined';
 import ExploreIcon from '@mui/icons-material/Explore';
+import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined';
 import ExtensionIcon from '@mui/icons-material/Extension';
+import ExtensionOutlinedIcon from '@mui/icons-material/ExtensionOutlined';
 import GetAppIcon from '@mui/icons-material/GetApp';
+import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
 import { useHistory } from 'react-router-dom';
@@ -42,36 +47,43 @@ const navbarItems: Array<NavbarItem> = [
     {
         path: '/library',
         title: 'Library',
-        IconComponent: CollectionsBookmarkIcon,
+        SelectedIconComponent: CollectionsBookmarkIcon,
+        IconComponent: CollectionsOutlinedBookmarkIcon,
         show: 'both',
     }, {
         path: '/updates',
         title: 'Updates',
-        IconComponent: NewReleasesIcon,
+        SelectedIconComponent: NewReleasesIcon,
+        IconComponent: NewReleasesOutlinedIcon,
         show: 'both',
     }, {
         path: '/sources',
         title: 'Sources',
-        IconComponent: ExploreIcon,
+        SelectedIconComponent: ExploreIcon,
+        IconComponent: ExploreOutlinedIcon,
         show: 'desktop',
     }, {
         path: '/extensions',
         title: 'Extensions',
-        IconComponent: ExtensionIcon,
+        SelectedIconComponent: ExtensionIcon,
+        IconComponent: ExtensionOutlinedIcon,
         show: 'desktop',
     }, {
         path: '/browse',
         title: 'Browse',
-        IconComponent: ExploreIcon,
+        SelectedIconComponent: ExploreIcon,
+        IconComponent: ExploreOutlinedIcon,
         show: 'mobile',
     }, {
         path: '/downloads',
         title: 'Downloads',
-        IconComponent: GetAppIcon,
+        SelectedIconComponent: GetAppIcon,
+        IconComponent: GetAppOutlinedIcon,
         show: 'both',
     }, {
         path: '/settings',
         title: 'Settings',
+        SelectedIconComponent: SettingsIcon,
         IconComponent: SettingsIcon,
         show: 'both',
     },

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -28,19 +28,25 @@ interface IProps {
 
 export default function DesktopSideBar({ navBarItems }: IProps) {
     const location = useLocation();
+
+    const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
+        if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
+        return <IconComponent sx={{ color: 'grey.A400' }} fontSize="large" />;
+    };
+
     return (
         <SideNavBarContainer>
             {
                 // eslint-disable-next-line react/destructuring-assignment
-                navBarItems.map(({ path, title, IconComponent }: NavbarItem) => (
+                navBarItems.map(({
+                    path, title, IconComponent, SelectedIconComponent,
+                }: NavbarItem) => (
                     <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
                         <ListItem disableRipple button key={title}>
                             <ListItemIcon style={{ minWidth: '0' }}>
-
                                 <Tooltip placement="right" title={title}>
-                                    <IconComponent sx={{ color: location.pathname === path ? 'primary.main' : 'grey.A400' }} fontSize="large" />
+                                    {iconFor(path, IconComponent, SelectedIconComponent)}
                                 </Tooltip>
-
                             </ListItemIcon>
                         </ListItem>
                     </Link>

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -39,10 +39,20 @@ interface IProps {
 
 export default function MobileBottomBar({ navBarItems }: IProps) {
     const location = useLocation();
+
+    const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
+        if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
+        return <IconComponent sx={{ color: 'grey.A400' }} fontSize="medium" />;
+    };
+
     return (
         <BottomNavContainer>
             {
-                navBarItems.map(({ path, title, IconComponent }: NavbarItem) => (
+                navBarItems.map((
+                    {
+                        path, title, IconComponent, SelectedIconComponent,
+                    }: NavbarItem,
+                ) => (
                     <Link to={path} key={path}>
                         <ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
                             <Box sx={{
@@ -55,7 +65,7 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
                                     : 'grey.A400',
                             }}
                             >
-                                <IconComponent fontSize="medium" />
+                                {iconFor(path, IconComponent, SelectedIconComponent)}
                                 <div style={{ fontSize: '0.65rem' }}>{title}</div>
                             </Box>
                         </ListItem>

src/typings.d.ts

@@ -193,9 +193,10 @@ interface SourcePreferences {
     props: any
 }
 
-interface NavbarItem{
+interface NavbarItem {
     path: string,
     title:string,
+    SelectedIconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>,
     IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>,
     show: 'mobile' | 'desktop' | 'both'
 }