Move navigation-bar files into new folder
This commit is contained in:
schroda
187
src/modules/navigation-bar/components/DefaultNavBar.tsx
Normal file
187
src/modules/navigation-bar/components/DefaultNavBar.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
/*
|
||||
* 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 { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
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 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 { useLocation } from 'react-router-dom';
|
||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
|
||||
import { useGetOptionForDirection } from '@/theme.tsx';
|
||||
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
|
||||
import { DesktopSideBar } from '@/modules/navigation-bar/components/DesktopSideBar.tsx';
|
||||
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
|
||||
import { MobileBottomBar } from '@/modules/navigation-bar/components/MobileBottomBar.tsx';
|
||||
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
|
||||
|
||||
const navbarItems: Array<NavbarItem> = [
|
||||
{
|
||||
path: '/library',
|
||||
title: 'library.title',
|
||||
SelectedIconComponent: CollectionsBookmarkIcon,
|
||||
IconComponent: CollectionsOutlinedBookmarkIcon,
|
||||
show: 'both',
|
||||
},
|
||||
{
|
||||
path: '/updates',
|
||||
title: 'updates.title',
|
||||
SelectedIconComponent: NewReleasesIcon,
|
||||
IconComponent: NewReleasesOutlinedIcon,
|
||||
show: 'both',
|
||||
},
|
||||
{
|
||||
path: '/browse',
|
||||
title: 'global.label.browse',
|
||||
SelectedIconComponent: ExploreIcon,
|
||||
IconComponent: ExploreOutlinedIcon,
|
||||
show: 'both',
|
||||
},
|
||||
{
|
||||
path: '/downloads',
|
||||
title: 'download.title',
|
||||
SelectedIconComponent: GetAppIcon,
|
||||
IconComponent: GetAppOutlinedIcon,
|
||||
show: 'both',
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
title: 'settings.title',
|
||||
SelectedIconComponent: SettingsIcon,
|
||||
IconComponent: SettingsIcon,
|
||||
show: 'both',
|
||||
},
|
||||
];
|
||||
|
||||
export function DefaultNavBar() {
|
||||
const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth, setNavBarWidth } =
|
||||
useContext(NavBarContext);
|
||||
|
||||
const theme = useTheme();
|
||||
const getOptionForDirection = useGetOptionForDirection();
|
||||
const { pathname } = useLocation();
|
||||
const handleBack = useBackButton();
|
||||
|
||||
const isMobileWidth = MediaQuery.useIsMobileWidth();
|
||||
const isMainRoute = navbarItems.some(({ path }) => path === pathname);
|
||||
|
||||
const actualNavBarWidth = isMobileWidth || isCollapsed ? 0 : navBarWidth;
|
||||
|
||||
const appBarRef = useRef<HTMLDivElement | null>(null);
|
||||
useResizeObserver(
|
||||
appBarRef,
|
||||
useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]),
|
||||
);
|
||||
useEffect(() => setAppBarHeight(0), []);
|
||||
|
||||
const activeNavBar: NavbarItem['show'] = isMobileWidth ? 'mobile' : 'desktop';
|
||||
const visibleNavBarItems = useMemo(
|
||||
() => navbarItems.filter(({ show }) => ['both', activeNavBar].includes(show)),
|
||||
[isMobileWidth],
|
||||
);
|
||||
const NavBarComponent = useMemo(() => (isMobileWidth ? MobileBottomBar : DesktopSideBar), [isMobileWidth]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!isMobileWidth) {
|
||||
// do not reset navbar width to prevent grid from jumping due to the changing grid item width
|
||||
return;
|
||||
}
|
||||
|
||||
setNavBarWidth(0);
|
||||
}, [isMobileWidth]);
|
||||
|
||||
const navBar = useMemo(
|
||||
() => <NavBarComponent navBarItems={visibleNavBarItems} />,
|
||||
[NavBarComponent, visibleNavBarItems],
|
||||
);
|
||||
|
||||
// Allow default navbar to be overrided
|
||||
if (override.status) return override.value;
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppBar
|
||||
ref={appBarRef}
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
marginLeft: actualNavBarWidth,
|
||||
width: `calc(100% - ${actualNavBarWidth}px)`,
|
||||
zIndex: theme.zIndex.drawer,
|
||||
}}
|
||||
>
|
||||
<Toolbar sx={{ position: 'relative' }}>
|
||||
{!isMobileWidth && (
|
||||
<Stack
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
width: navBarWidth,
|
||||
...(!isCollapsed && { display: 'none' }),
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)} color="inherit">
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
)}
|
||||
<Stack
|
||||
sx={{
|
||||
ml: `${isCollapsed ? navBarWidth : 0}px`,
|
||||
width: `calc(100% - ${isCollapsed ? navBarWidth : 0}px)`,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{!isMainRoute && (
|
||||
<IconButton
|
||||
edge="start"
|
||||
component="button"
|
||||
sx={{ marginRight: 2 }}
|
||||
size="large"
|
||||
aria-label="menu"
|
||||
onClick={handleBack}
|
||||
color="inherit"
|
||||
>
|
||||
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
|
||||
</IconButton>
|
||||
)}
|
||||
<Typography
|
||||
variant="h5"
|
||||
component="h1"
|
||||
noWrap
|
||||
sx={{
|
||||
textOverflow: 'ellipsis',
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
{action}
|
||||
</Stack>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
{!isMobileWidth || isMainRoute ? navBar : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
138
src/modules/navigation-bar/components/DesktopSideBar.tsx
Normal file
138
src/modules/navigation-bar/components/DesktopSideBar.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
/*
|
||||
* 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 Drawer from '@mui/material/Drawer';
|
||||
import List from '@mui/material/List';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import { styled, useTheme } from '@mui/material/styles';
|
||||
import { useCallback, useMemo, useRef } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
|
||||
import { useGetOptionForDirection } from '@/theme.tsx';
|
||||
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
|
||||
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
|
||||
|
||||
const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
padding: theme.spacing(0, 1),
|
||||
// necessary for content to be below app bar
|
||||
...theme.mixins.toolbar,
|
||||
}));
|
||||
|
||||
const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const { isCollapsed } = useNavBarContext();
|
||||
const theme = useTheme();
|
||||
|
||||
const isActive = path === location.pathname;
|
||||
const Icon = isActive ? SelectedIconComponent : IconComponent;
|
||||
|
||||
const { listItemProps, listItemIconProps } = useMemo(
|
||||
() => ({
|
||||
listItemProps: isCollapsed ? { p: 0.5, display: 'flex', flexDirection: 'column' } : {},
|
||||
listItemIconProps: isCollapsed ? { justifyContent: 'center' } : {},
|
||||
}),
|
||||
[isCollapsed],
|
||||
);
|
||||
|
||||
return (
|
||||
<ListItemLink selected={!isCollapsed && isActive} sx={{ p: 0, m: 0 }} to={path}>
|
||||
<Tooltip title={t(title)} placement="right">
|
||||
<ListItem sx={listItemProps}>
|
||||
<ListItemIcon sx={listItemIconProps}>
|
||||
<Icon
|
||||
sx={{
|
||||
color: isActive ? 'primary.dark' : undefined,
|
||||
...theme.applyStyles('dark', {
|
||||
color: isActive ? 'primary.light' : undefined,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={t(title)}
|
||||
sx={{ maxWidth: '100%' }}
|
||||
primaryTypographyProps={{
|
||||
sx: {
|
||||
maxWidth: '100%',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
...(isCollapsed ? theme.typography.caption : {}),
|
||||
color: isActive ? 'primary.dark' : undefined,
|
||||
...theme.applyStyles('dark', {
|
||||
color: isActive ? 'primary.light' : undefined,
|
||||
}),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
</Tooltip>
|
||||
</ListItemLink>
|
||||
);
|
||||
};
|
||||
|
||||
const MIN_WIDTH_COLLAPSED = undefined;
|
||||
const MAX_WIDTH_COLLAPSED = 120;
|
||||
const MIN_WIDTH_EXTENDED = 240;
|
||||
const MAX_WIDTH_EXTENDED = 400;
|
||||
|
||||
export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
|
||||
const { isCollapsed, setIsCollapsed, navBarWidth, setNavBarWidth } = useNavBarContext();
|
||||
const getOptionForDirection = useGetOptionForDirection();
|
||||
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
useResizeObserver(
|
||||
ref,
|
||||
useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref.current]),
|
||||
);
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
sx={{
|
||||
width: navBarWidth,
|
||||
'& .MuiDrawer-paper': {
|
||||
zIndex: (theme) => theme.zIndex.drawer - 1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={ref}
|
||||
sx={{
|
||||
minWidth: isCollapsed ? MIN_WIDTH_COLLAPSED : MIN_WIDTH_EXTENDED,
|
||||
maxWidth: isCollapsed ? MAX_WIDTH_COLLAPSED : MAX_WIDTH_EXTENDED,
|
||||
}}
|
||||
>
|
||||
<DrawerHeader>
|
||||
<IconButton onClick={() => setIsCollapsed(true)}>
|
||||
{getOptionForDirection(<ChevronLeftIcon />, <ChevronRightIcon />)}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
<Divider />
|
||||
<List sx={{ p: 1 }} dense={isCollapsed}>
|
||||
{navBarItems.map((navBarItem) => (
|
||||
<NavigationBarItem key={navBarItem.path} {...navBarItem} />
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
61
src/modules/navigation-bar/components/MobileBottomBar.tsx
Normal file
61
src/modules/navigation-bar/components/MobileBottomBar.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
/*
|
||||
* 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 BottomNavigation from '@mui/material/BottomNavigation';
|
||||
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
|
||||
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
|
||||
|
||||
export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
|
||||
const { t } = useTranslation();
|
||||
const { setBottomBarHeight } = useNavBarContext();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const ref = useRef<HTMLDivElement | null>(null);
|
||||
useResizeObserver(
|
||||
ref,
|
||||
useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref.current]),
|
||||
);
|
||||
useLayoutEffect(() => () => setBottomBarHeight(0), []);
|
||||
|
||||
const [selectedNavBarItem, setSelectedNavBarItem] = useState(
|
||||
navBarItems.find((navBarItem) => navBarItem.path === location.pathname)?.path,
|
||||
);
|
||||
|
||||
return (
|
||||
<Paper
|
||||
ref={ref}
|
||||
sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer - 1 }}
|
||||
elevation={3}
|
||||
>
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={selectedNavBarItem}
|
||||
onChange={(_, newValue: string) => {
|
||||
setSelectedNavBarItem(newValue);
|
||||
navigate(newValue);
|
||||
}}
|
||||
>
|
||||
{navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }) => (
|
||||
<BottomNavigationAction
|
||||
key={path}
|
||||
value={path}
|
||||
label={t(title)}
|
||||
icon={selectedNavBarItem === path ? <SelectedIconComponent /> : <IconComponent />}
|
||||
/>
|
||||
))}
|
||||
</BottomNavigation>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user