8dfc89ee17
* Move context providers and configuration providers to separate component, extract theme to separate file * Use custom palette color instead of direct colors * Replace different clicable things with CardActionArea to get transition and links * Refactor DownloadQueue, update layout, unify all the download progress indicators * Unify active filter indicator * Use divider instead of hr * Fix background color in extensions light theme * Fix thumbnail overlay in library screen list view * Don't show download button on downloaded updates
84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
/*
|
|
* Copyright (C) Contributors to the Suwayomi project
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
|
|
|
import React from 'react';
|
|
import { ListItem } from '@mui/material';
|
|
import { styled, Box } from '@mui/system';
|
|
import { Link as RRDLink, useLocation } from 'react-router-dom';
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
const BottomNavContainer = styled('div')(({ theme }) => ({
|
|
bottom: 0,
|
|
left: 0,
|
|
height: theme.spacing(7),
|
|
width: '100vw',
|
|
backgroundColor: theme.palette.custom.light,
|
|
position: 'fixed',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-evenly',
|
|
alignItems: 'center',
|
|
// For Some reason the theme is throwing and error when accessing the Zindex object,
|
|
// This is the zIndex of the appBar in the default theme
|
|
zIndex: 1100,
|
|
}));
|
|
|
|
const Link = styled(RRDLink)({
|
|
textDecoration: 'none',
|
|
flex: 1,
|
|
});
|
|
|
|
interface IProps {
|
|
navBarItems: Array<NavbarItem>
|
|
}
|
|
|
|
export default function MobileBottomBar({ navBarItems }: IProps) {
|
|
const location = useLocation();
|
|
const theme = useTheme();
|
|
|
|
const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
|
|
if (location.pathname === path) return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
|
|
return <IconComponent sx={{ color: (theme.palette.mode === 'dark') ? 'grey.A400' : 'grey.600' }} fontSize="medium" />;
|
|
};
|
|
|
|
return (
|
|
<BottomNavContainer>
|
|
{
|
|
navBarItems.map((
|
|
{
|
|
path, title, IconComponent, SelectedIconComponent,
|
|
}: NavbarItem,
|
|
) => (
|
|
<Link to={path} key={path}>
|
|
<ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
|
|
<Box
|
|
display="flex"
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
>
|
|
{iconFor(path, IconComponent, SelectedIconComponent)}
|
|
<Box sx={{
|
|
fontSize: '0.65rem',
|
|
// eslint-disable-next-line no-nested-ternary
|
|
color: location.pathname === path
|
|
? 'primary.main'
|
|
: ((theme.palette.mode === 'dark')
|
|
? 'grey.A400'
|
|
: 'grey.600'),
|
|
}}
|
|
>
|
|
{title}
|
|
</Box>
|
|
</Box>
|
|
</ListItem>
|
|
</Link>
|
|
))
|
|
}
|
|
</BottomNavContainer>
|
|
);
|
|
}
|