ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fancy icon based on if path selected

Browse Source
This commit is contained in:
Aria Moradi
2021-10-30 17:29:27 +03:30
parent a2081a4552
commit 1eccc28097
4 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/navbar/navigation/DesktopSideBar.tsx
View File

@@ -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>

14
src/components/navbar/navigation/MobileBottomBar.tsx
View File

@@ -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>