Refactor base app layout

src/App.tsx

@@ -6,12 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Container from '@mui/material/Container';
 import CssBaseline from '@mui/material/CssBaseline';
 import React, { useLayoutEffect } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
 import { loadable } from 'react-lazily/loadable';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
 import { AppContext } from '@/components/context/AppContext';
 import '@/i18n';
 import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
@@ -20,6 +21,7 @@ import { WebUIUpdateChecker } from '@/components/util/WebUIUpdateChecker.tsx';
 import { ServerUpdateChecker } from '@/components/util/ServerUpdateChecker.tsx';
 import { lazyLoadFallback } from '@/util/LazyLoad.tsx';
 import { ErrorBoundary } from '@/util/ErrorBoundary.tsx';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 
 const { Browse } = loadable(() => import('@/screens/Browse'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/screens/DownloadQueue'), lazyLoadFallback);
@@ -76,26 +78,23 @@ const BackgroundSubscriptions = () => {
     return null;
 };
 
-export const App: React.FC = () => (
+const MainApp = () => {
-    <AppContext>
+    const { navBarWidth, bottomBarHeight } = useNavBarContext();
-        <ScrollToTop />
+
-        <ServerUpdateChecker />
+    return (
-        <WebUIUpdateChecker />
+        <Box
-        <BackgroundSubscriptions />
-        <CssBaseline enableColorScheme />
-        <DefaultNavBar />
-        <Container
             id="appMainContainer"
-            maxWidth={false}
+            component="main"
-            disableGutters
             sx={{
-                mt: 8,
+                flexGrow: 1,
-                ml: { sm: 8 },
+                minHeight: `calc(100vh - ${bottomBarHeight}px)`,
-                mb: { xs: 8, sm: 0 },
+                maxWidth: `calc(100vw - ${navBarWidth}px)`,
-                width: 'auto',
+                position: 'relative',
-                overflow: 'auto',
+                mb: `${bottomBarHeight}px`,
             }}
         >
+            <Toolbar />
+
             <ErrorBoundary>
                 <Routes>
                     {/* General Routes */}
@@ -142,12 +141,32 @@ export const App: React.FC = () => (
                     <Route path="tracker/login/oauth" element={<TrackerOAuthLogin />} />
                 </Routes>
             </ErrorBoundary>
-        </Container>
+        </Box>
+    );
+};
+
+const ReaderApp = () => (
     <ErrorBoundary>
         <Routes>
             <Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
             <Route path="*" element={null} />
         </Routes>
     </ErrorBoundary>
+);
+
+export const App: React.FC = () => (
+    <AppContext>
+        <ScrollToTop />
+        <ServerUpdateChecker />
+        <WebUIUpdateChecker />
+        <BackgroundSubscriptions />
+        <CssBaseline enableColorScheme />
+        <Box sx={{ display: 'flex' }}>
+            <Box sx={{ flexShrink: 0 }}>
+                <DefaultNavBar />
+            </Box>
+            <MainApp />
+            <ReaderApp />
+        </Box>
     </AppContext>
 );

src/components/context/NavbarContext.tsx

@@ -16,6 +16,9 @@ type ContextType = {
     title: string | React.ReactNode;
     setTitle: (title: ContextType['title'], browserTitle?: string) => void;
 
+    appBarHeight: number;
+    setAppBarHeight: React.Dispatch<React.SetStateAction<number>>;
+
     // AppBar action buttons
     action: any;
     setAction: React.Dispatch<React.SetStateAction<any>>;
@@ -23,16 +26,34 @@ type ContextType = {
     // Allow default navbar to be overrided
     override: INavbarOverride;
     setOverride: React.Dispatch<React.SetStateAction<INavbarOverride>>;
+
+    // NavBar
+    isCollapsed: boolean;
+    setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+
+    navBarWidth: number;
+    setNavBarWidth: React.Dispatch<React.SetStateAction<number>>;
+
+    bottomBarHeight: number;
+    setBottomBarHeight: React.Dispatch<React.SetStateAction<number>>;
 };
 
 export const NavBarContext = React.createContext<ContextType>({
     history: [],
     title: 'Suwayomi',
     setTitle: (): void => {},
+    appBarHeight: 0,
+    setAppBarHeight: (): void => {},
     action: <div />,
     setAction: (): void => {},
     override: { status: false, value: <div /> },
     setOverride: (): void => {},
+    isCollapsed: false,
+    setIsCollapsed: (): void => {},
+    navBarWidth: 0,
+    setNavBarWidth: (): void => {},
+    bottomBarHeight: 0,
+    setBottomBarHeight: (): void => {},
 });
 
 export const useNavBarContext = () => useContext(NavBarContext);

src/components/navbar/DefaultNavBar.tsx

@@ -6,12 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useContext } from 'react';
+import { useCallback, useContext, 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 Box from '@mui/material/Box';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
@@ -23,15 +22,17 @@ 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 { createPortal } from 'react-dom';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import MenuIcon from '@mui/icons-material/Menu';
+import Stack from '@mui/material/Stack';
 import { NavbarItem } from '@/typings';
 import { NavBarContext } from '@/components/context/NavbarContext';
-import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar';
-import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar';
 import { useBackButton } from '@/util/useBackButton.ts';
 import { getOptionForDirection } from '@/theme.ts';
 import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
+import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar.tsx';
+import { useResizeObserver } from '@/util/useResizeObserver.tsx';
+import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar.tsx';
 
 const navbarItems: Array<NavbarItem> = [
     {
@@ -72,7 +73,8 @@ const navbarItems: Array<NavbarItem> = [
 ];
 
 export function DefaultNavBar() {
-    const { title, action, override } = useContext(NavBarContext);
+    const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth } =
+        useContext(NavBarContext);
 
     const { pathname } = useLocation();
     const handleBack = useBackButton();
@@ -80,30 +82,73 @@ export function DefaultNavBar() {
     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]),
+    );
+
+    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]);
+
+    const navBar = useMemo(
+        () => <NavBarComponent navBarItems={visibleNavBarItems} />,
+        [NavBarComponent, visibleNavBarItems],
+    );
+
     // Allow default navbar to be overrided
     if (override.status) return override.value;
 
-    let navbar: JSX.Element | null = null;
-    if (isMobileWidth) {
-        if (isMainRoute) {
-            navbar = <MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />;
-        }
-    } else {
-        navbar = <DesktopSideBar navBarItems={navbarItems.filter((it) => it.show !== 'mobile')} />;
-    }
-
     return (
-        <Box sx={{ flexGrow: 1 }}>
+        <>
-            <AppBar position="fixed" color="default">
+            <AppBar
-                <Toolbar>
+                ref={appBarRef}
+                sx={{
+                    position: 'fixed',
+                    marginLeft: actualNavBarWidth,
+                    width: `calc(100% - ${actualNavBarWidth}px)`,
+                    zIndex: (theme) => theme.zIndex.drawer + 1,
+                }}
+                color="default"
+            >
+                <Toolbar sx={{ position: 'relative' }}>
+                    {!isMobileWidth && (
+                        <Stack
+                            sx={{
+                                position: 'absolute',
+                                left: 0,
+                                width: navBarWidth,
+                                ...(!isCollapsed && { display: 'none' }),
+                                alignItems: 'center',
+                            }}
+                        >
+                            <IconButton color="inherit" aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
+                                <MenuIcon />
+                            </IconButton>
+                        </Stack>
+                    )}
+                    <Stack
+                        sx={{
+                            ml: `${isCollapsed ? navBarWidth : 0}px`,
+                            width: '100%',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }}
+                    >
                         {!isMainRoute && (
                             <IconButton
-                            component="button"
                                 edge="start"
+                                component="button"
                                 sx={{ marginRight: 2 }}
+                                size="large"
                                 color="inherit"
                                 aria-label="menu"
-                            size="large"
                                 onClick={handleBack}
                             >
                                 {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
@@ -118,21 +163,10 @@ export function DefaultNavBar() {
                             {title}
                         </Typography>
                         {action}
-                    <div id="navbarToolbar" />
+                    </Stack>
                 </Toolbar>
             </AppBar>
-            {navbar}
+            {!isMobileWidth || isMainRoute ? navBar : null}
-        </Box>
+        </>
     );
 }
-
-interface INavbarToolbarProps {
-    children?: React.ReactNode;
-}
-
-export const NavbarToolbar: React.FC<INavbarToolbarProps> = ({ children }) => {
-    const container = document.getElementById('navbarToolbar');
-    if (!container) return null;
-
-    return createPortal(children, container);
-};

src/components/navbar/NavBarContextProvider.tsx

@@ -10,6 +10,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { INavbarOverride } from '@/typings';
 import { NavBarContext } from '@/components/context/NavbarContext';
 import { useHistory } from '@/util/useHistory.ts';
+import { useLocalStorage } from '@/util/useStorage.tsx';
 
 interface IProps {
     children: React.ReactNode;
@@ -18,10 +19,14 @@ interface IProps {
 export function NavBarContextProvider({ children }: IProps) {
     const [title, setTitle] = useState<string | React.ReactNode>('Suwayomi');
     const [action, setAction] = useState<any>(<div />);
+    const [appBarHeight, setAppBarHeight] = useState(0);
     const [override, setOverride] = useState<INavbarOverride>({
         status: false,
         value: <div />,
     });
+    const [isCollapsed, setIsCollapsed] = useLocalStorage('NavBar::isCollapsed', false);
+    const [navBarWidth, setNavBarWidth] = useState(0);
+    const [bottomBarHeight, setBottomBarHeight] = useState(0);
 
     const history = useHistory();
 
@@ -38,12 +43,36 @@ export function NavBarContextProvider({ children }: IProps) {
             history,
             title,
             setTitle: updateTitle,
+            appBarHeight,
+            setAppBarHeight,
             action,
             setAction,
             override,
             setOverride,
+            isCollapsed,
+            setIsCollapsed,
+            navBarWidth,
+            setNavBarWidth,
+            bottomBarHeight,
+            setBottomBarHeight,
         }),
-        [history, title, updateTitle, action, setAction, override, setOverride],
+        [
+            history,
+            title,
+            updateTitle,
+            appBarHeight,
+            setAppBarHeight,
+            action,
+            setAction,
+            override,
+            setOverride,
+            isCollapsed,
+            setIsCollapsed,
+            navBarWidth,
+            setNavBarWidth,
+            bottomBarHeight,
+            setBottomBarHeight,
+        ],
     );
     return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
 }

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -6,56 +6,116 @@
  * 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 Tooltip from '@mui/material/Tooltip';
+import ListItemText from '@mui/material/ListItemText';
-import ListItemButton from '@mui/material/ListItemButton';
-import { styled, useTheme } from '@mui/material/styles';
-import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { NavbarItem } from '@/typings';
+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, useEffect, useMemo, useRef } from 'react';
+import Box from '@mui/material/Box';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+import { NavbarItem } from '@/typings.ts';
+import { ListItemLink } from '@/components/util/ListItemLink.tsx';
+import { getOptionForDirection } from '@/theme.ts';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 
-const SideNavBarContainer = styled('div')(({ theme }) => ({
+const DrawerHeader = styled('div')(({ theme }) => ({
-    height: '100vh',
-    width: theme.spacing(8),
-    backgroundColor: theme.palette.custom.dark,
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    paddingTop: theme.spacing(8),
     display: 'flex',
-    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
 }));
 
-interface IProps {
+const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => {
-    navBarItems: Array<NavbarItem>;
-}
-
-export function DesktopSideBar({ navBarItems }: IProps) {
     const { t } = useTranslation();
     const location = useLocation();
+    const { isCollapsed } = useNavBarContext();
     const theme = useTheme();
 
-    const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
+    const isActive = path === location.pathname;
-        if (location.pathname === path)
+    const Icon = isActive ? SelectedIconComponent : IconComponent;
-            return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
+
-        return (
+    const { listItemProps, listItemIconProps } = useMemo(
-            <IconComponent sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }} fontSize="large" />
+        () => ({
+            listItemProps: isCollapsed ? { p: 0.5, display: 'flex', flexDirection: 'column' } : {},
+            listItemIconProps: isCollapsed ? { justifyContent: 'center' } : {},
+        }),
+        [isCollapsed],
     );
-    };
 
     return (
-        <SideNavBarContainer>
+        <ListItemLink selected={!isCollapsed && isActive} sx={{ p: 0, m: 0 }} to={path}>
-            {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
+            <Tooltip title={t(title)} placement="right">
-                <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
+                <ListItem sx={listItemProps}>
-                    <ListItemButton disableRipple key={title}>
+                    <ListItemIcon sx={listItemIconProps}>
-                        <ListItemIcon sx={{ minWidth: '0' }}>
+                        <Icon sx={{ color: isActive ? 'primary.main' : undefined }} />
-                            <Tooltip placement="right" title={t(title)}>
-                                {iconFor(path, IconComponent, SelectedIconComponent)}
-                            </Tooltip>
                     </ListItemIcon>
-                    </ListItemButton>
+                    <ListItemText
-                </Link>
+                        primary={t(title)}
-            ))}
+                        sx={{ maxWidth: '100%' }}
-        </SideNavBarContainer>
+                        primaryTypographyProps={{
+                            sx: {
+                                maxWidth: '100%',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                ...(isCollapsed ? theme.typography.caption : {}),
+                                color: isActive ? 'primary.main' : 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();
+
+    useEffect(() => () => setNavBarWidth(0), []);
+
+    const ref = useRef<HTMLDivElement | null>(null);
+    useResizeObserver(
+        ref,
+        useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref]),
+    );
+
+    return (
+        <Drawer variant="permanent" sx={{ width: navBarWidth }}>
+            <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>
+    );
+};

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -6,76 +6,58 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Box from '@mui/material/Box';
+import BottomNavigation from '@mui/material/BottomNavigation';
-import ListItemButton from '@mui/material/ListItemButton';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import { styled, useTheme } from '@mui/material/styles';
-import { Link as RRDLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { NavbarItem } from '@/typings';
+import Paper from '@mui/material/Paper';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { NavbarItem } from '@/typings.ts';
+import { useResizeObserver } from '@/util/useResizeObserver.tsx';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 
-const BottomNavContainer = styled('div')(({ theme }) => ({
+export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
-    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 function MobileBottomBar({ navBarItems }: IProps) {
     const { t } = useTranslation();
+    const { setBottomBarHeight } = useNavBarContext();
     const location = useLocation();
-    const theme = useTheme();
+    const navigate = useNavigate();
 
-    const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
+    useEffect(() => () => setBottomBarHeight(0), []);
-        if (location.pathname === path)
+
-            return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
+    const ref = useRef<HTMLDivElement | null>(null);
-        return (
+    useResizeObserver(
-            <IconComponent sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }} fontSize="medium" />
+        ref,
+        useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref]),
+    );
+
+    const [selectedNavBarItem, setSelectedNavBarItem] = useState(
+        navBarItems.find((navBarItem) => navBarItem.path === location.pathname)?.path,
     );
-    };
 
     return (
-        <BottomNavContainer>
+        <Paper
-            {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
+            ref={ref}
-                <Link to={path} key={path}>
+            sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer - 1 }}
-                    <ListItemButton disableRipple sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
+            elevation={3}
-                        <Box display="flex" flexDirection="column" alignItems="center">
+        >
-                            {iconFor(path, IconComponent, SelectedIconComponent)}
+            <BottomNavigation
-                            <Box
+                sx={{ backgroundColor: 'custom.light' }}
-                                sx={{
+                showLabels
-                                    fontSize: '0.65rem',
+                value={selectedNavBarItem}
-                                    color:
+                onChange={(_, newValue: string) => {
-                                        // eslint-disable-next-line no-nested-ternary
+                    setSelectedNavBarItem(newValue);
-                                        location.pathname === path
+                    navigate(newValue);
-                                            ? 'primary.main'
-                                            : theme.palette.mode === 'dark'
-                                              ? 'grey.A400'
-                                              : 'grey.600',
                 }}
             >
-                                {t(title)}
+                {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }) => (
-                            </Box>
+                    <BottomNavigationAction
-                        </Box>
+                        key={path}
-                    </ListItemButton>
+                        value={path}
-                </Link>
+                        label={t(title)}
+                        icon={selectedNavBarItem === path ? <SelectedIconComponent /> : <IconComponent />}
+                    />
                 ))}
-        </BottomNavContainer>
+            </BottomNavigation>
+        </Paper>
     );
-}
+};

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -79,7 +79,6 @@ function ListDialog(props: IListDialogProps) {
                                 <Checkbox
                                     checked={selectedValues.some((selectedValue) => value === selectedValue)}
                                     onChange={(e) => handleChange(e, value)}
-                                    color="default"
                                 />
                             }
                             label={value}

src/components/tabs/TabsMenu.tsx

@@ -8,31 +8,46 @@
 
 import Tabs, { TabsProps } from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
+import { ForwardedRef, forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useResizeObserver } from '@/util/useResizeObserver.tsx';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 
 const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
     display: 'flex',
-    position: 'fixed',
+    position: 'sticky',
-    top: '64px',
+    left: 0,
-    width: 'calc(100% - 64px)',
+    right: 0,
     zIndex: 1,
     backgroundColor: theme.palette.background.default,
     border: 0,
     borderBottomWidth: 2,
     borderStyle: 'solid',
     borderColor: theme.palette.divider,
-    [theme.breakpoints.down('sm')]: {
-        top: '56px', // header height
-        width: '100%',
-    },
 }));
 
-export const TabsMenu = ({ children, tabsCount, ...props }: TabsProps & { tabsCount: number }) => {
+export const TabsMenu = forwardRef(
+    (
+        { children, tabsCount, ...props }: TabsProps & { tabsCount: number },
+        ref: ForwardedRef<HTMLDivElement | null>,
+    ) => {
+        const { appBarHeight } = useNavBarContext();
+
+        const tabsMenuRef = useRef<HTMLDivElement | null>(null);
+        useImperativeHandle(ref, () => tabsMenuRef.current!);
+        const [width, setWidth] = useState<number>();
+        useResizeObserver(
+            tabsMenuRef,
+            useCallback(() => setWidth(tabsMenuRef.current?.clientWidth), [tabsMenuRef]),
+        );
+
         // Visual Hack: 160px is min-width for viewport width of >600
-    const scrollableTabs = window.innerWidth < tabsCount * 160;
+        const scrollableTabs = !width ? false : width < tabsCount * 160;
 
         return (
             <StyledTabsMenu
                 {...props}
+                sx={{ ...props.sx, top: appBarHeight }}
+                ref={tabsMenuRef}
                 indicatorColor="primary"
                 textColor="primary"
                 centered={!scrollableTabs}
@@ -43,4 +58,5 @@ export const TabsMenu = ({ children, tabsCount, ...props }: TabsProps & { tabsCo
                 {children}
             </StyledTabsMenu>
         );
-};
+    },
+);

src/components/tabs/TabsWrapper.tsx

@@ -6,19 +6,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 
-export const TabsWrapper = styled(Box)(({ theme }) => ({
+export const TabsWrapper = ({ children, ...props }: BoxProps) => {
-    // TabsMenu height + TabsMenu bottom padding - grid item top padding
+    const { appBarHeight } = useNavBarContext();
-    marginTop: `calc(48px + 13px - 8px)`,
+
-    // header height - TabsMenu height - TabsMenu bottom padding + grid item top padding
+    return (
-    minHeight: 'calc(100vh - 64px - 48px - 13px + 8px)',
+        <Box {...props} sx={{ ...props.sx, position: 'relative', height: `calc(100% - ${appBarHeight}px)` }}>
-    position: 'relative',
+            {children}
-    [theme.breakpoints.down('sm')]: {
+        </Box>
-        // TabsMenu - 8px margin diff header height (56px) + TabsMenu bottom padding - grid item top padding
+    );
-        marginTop: `calc(48px - 8px + 13px - 8px)`,
+};
-        // header height (+ 8px margin) - footer height - TabsMenu height
-        minHeight: 'calc(100vh - 64px - 64px - 48px)',
-    },
-}));

src/components/virtuoso/StyledGroupItemWrapper.tsx

@@ -9,9 +9,6 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 
-export const StyledGroupItemWrapper = styled(Box, { shouldForwardProp: (prop) => prop !== 'isLastItem' })<{
+export const StyledGroupItemWrapper = styled(Box)(() => ({
-    isLastItem: boolean;
+    padding: '1px 10px 10px 10px',
-}>(({ isLastItem }) => ({
-    padding: '0 10px',
-    paddingBottom: isLastItem ? '0' : '10px',
 }));

src/components/virtuoso/StyledGroupedVirtuoso.tsx

@@ -6,18 +6,24 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { styled } from '@mui/material/styles';
 import { GroupedVirtuoso } from 'react-virtuoso';
+import { ComponentProps } from 'react';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
 
-export const StyledGroupedVirtuoso = styled(GroupedVirtuoso, {
+export const StyledGroupedVirtuoso = ({
-    shouldForwardProp: (prop) => prop !== 'heightToSubtract',
+    heightToSubtract = 0,
-})<{
+    style,
-    heightToSubtract?: number;
+    ...props
-}>(({ theme, heightToSubtract = 0 }) => ({
+}: ComponentProps<typeof GroupedVirtuoso> & { heightToSubtract?: number }) => {
-    // 64px header
+    const { appBarHeight, bottomBarHeight } = useNavBarContext();
-    height: `calc(100vh - 64px - ${heightToSubtract}px)`,
+
-    [theme.breakpoints.down('sm')]: {
+    return (
-        // 64px header (margin); 64px menu (margin);
+        <GroupedVirtuoso
-        height: `calc(100vh - 64px - 64px - ${heightToSubtract}px)`,
+            {...props}
-    },
+            style={{
-}));
+                ...style,
+                height: `calc(100vh - ${heightToSubtract}px - ${appBarHeight}px - ${bottomBarHeight}px)`,
+            }}
+        />
+    );
+};

src/screens/Browse.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import Tab from '@mui/material/Tab';
 import { useTranslation } from 'react-i18next';
 import { Sources } from '@/screens/Sources';
@@ -16,11 +16,19 @@ import { TabsWrapper } from '@/components/tabs/TabsWrapper.tsx';
 import { TabsMenu } from '@/components/tabs/TabsMenu.tsx';
 import { Migration } from '@/screens/Migration.tsx';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 
 export function Browse() {
     const { t } = useTranslation();
     const { setTitle } = useContext(NavBarContext);
 
+    const tabsMenuRef = useRef<HTMLDivElement | null>(null);
+    const [tabsMenuHeight, setTabsMenuHeight] = useState(0);
+    useResizeObserver(
+        tabsMenuRef,
+        useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef]),
+    );
+
     const [tabNum, setTabNum] = useState<number>(0);
 
     useEffect(() => {
@@ -29,7 +37,7 @@ export function Browse() {
 
     return (
         <TabsWrapper>
-            <TabsMenu value={tabNum} tabsCount={2} onChange={(e, newTab) => setTabNum(newTab)}>
+            <TabsMenu ref={tabsMenuRef} value={tabNum} tabsCount={2} onChange={(e, newTab) => setTabNum(newTab)}>
                 <Tab sx={{ textTransform: 'none' }} label={t('source.title_one')} />
                 <Tab sx={{ textTransform: 'none' }} label={t('extension.title_other')} />
                 <Tab sx={{ textTransform: 'none' }} label={t('migrate.title')} />
@@ -38,7 +46,7 @@ export function Browse() {
                 <Sources />
             </TabPanel>
             <TabPanel index={1} currentIndex={tabNum}>
-                <Extensions />
+                <Extensions tabsMenuHeight={tabsMenuHeight} />
             </TabPanel>
             <TabPanel index={2} currentIndex={tabNum}>
                 <Migration />

src/screens/Extensions.tsx

@@ -39,7 +39,6 @@ import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
 import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
-import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 const LANGUAGE = 0;
 const EXTENSIONS = 1;
@@ -98,12 +97,10 @@ function getExtensionsInfo(extensions: TExtension[]): {
     };
 }
 
-export function Extensions() {
+export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const { t } = useTranslation();
     const { setAction } = useContext(NavBarContext);
 
-    const isMobileWidth = MediaQuery.useIsMobileWidth();
-
     const {
         data: serverSettingsData,
         loading: areServerSettingsLoading,
@@ -281,34 +278,14 @@ export function Extensions() {
             {toasts}
             {FileInputComponent}
             <StyledGroupedVirtuoso
-                style={{
+                heightToSubtract={tabsMenuHeight}
-                    // override Virtuoso default values and set them with class
-                    height: 'undefined',
-                }}
-                heightToSubtract={
-                    isMobileWidth
-                        ? // desktop: TabsMenu height
-                          48
-                        : // desktop: TabsMenu height - TabsMenu bottom padding + grid item top padding
-                          48 + 13 - 8
-                }
                 overscan={window.innerHeight * 0.5}
                 groupCounts={groupCounts}
                 groupContent={(index) => {
                     const [groupName] = filteredGroupedExtensions[index];
 
                     return (
-                        <StyledGroupHeader
+                        <StyledGroupHeader key={groupName} variant="h4" isFirstItem={index === 0}>
-                            key={groupName}
-                            variant="h4"
-                            style={{
-                                paddingLeft: '24px',
-                                paddingTop: '6px',
-                                paddingBottom: '16px',
-                                fontWeight: 'bold',
-                            }}
-                            isFirstItem={index === 0}
-                        >
                             {translateExtensionLanguage(groupName)}
                         </StyledGroupHeader>
                     );
@@ -319,7 +296,6 @@ export function Extensions() {
                     return (
                         <StyledGroupItemWrapper
                             key={`${item.pkgName}_${item.isInstalled}_${item.isObsolete}_${item.hasUpdate}`}
-                            isLastItem={index === visibleExtensions.length - 1}
                         >
                             <ExtensionCard
                                 extension={item}

src/screens/Migration.tsx

@@ -65,11 +65,8 @@ export const Migration = () => {
 
     return (
         <List>
-            {Object.values(migratableSources).map((migratableSource, index) => (
+            {Object.values(migratableSources).map((migratableSource) => (
-                <StyledGroupItemWrapper
+                <StyledGroupItemWrapper key={migratableSource.id}>
-                    key={migratableSource.id}
-                    isLastItem={index === Object.values(migratableSources).length - 1}
-                >
                     <MigrationCard {...migratableSource} />
                 </StyledGroupItemWrapper>
             ))}

src/screens/SearchAll.tsx

@@ -25,9 +25,9 @@ import { MangaCardProps } from '@/components/manga/MangaCard.types.tsx';
 import { EmptyView } from '@/components/util/EmptyView';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { SourceType } from '@/lib/graphql/generated/graphql.ts';
 import { BaseMangaGrid } from '@/components/source/BaseMangaGrid.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 
 type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
 type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -152,7 +152,7 @@ const SourceSearchPreview = React.memo(
                 </Card>
                 {errorMessage ? (
                     <EmptyView
-                        sx={{ alignItems: 'start' }}
+                        sx={{ alignItems: 'start', height: undefined }}
                         noFaces
                         message={errorMessage}
                         messageExtra={error && error.message}

src/screens/Updates.tsx

@@ -163,7 +163,7 @@ export const Updates: React.FC = () => {
                     const download = downloadForChapter(chapter);
 
                     return (
-                        <StyledGroupItemWrapper key={index} isLastItem={index === updateEntries.length - 1}>
+                        <StyledGroupItemWrapper key={index}>
                             <Card>
                                 <CardActionArea
                                     component={Link}

src/screens/settings/Categories.tsx

@@ -238,11 +238,7 @@ export function Categories() {
                     />
                     <FormControlLabel
                         control={
-                            <Checkbox
+                            <Checkbox checked={dialogDefault} onChange={(e) => setDialogDefault(e.target.checked)} />
-                                checked={dialogDefault}
-                                onChange={(e) => setDialogDefault(e.target.checked)}
-                                color="default"
-                            />
                         }
                         label={t('category.label.use_as_default_category')}
                     />

src/screens/settings/LibraryDuplicates.tsx

@@ -35,6 +35,7 @@ import { GET_MANGAS_DUPLICATES } from '@/lib/graphql/queries/MangaQuery.ts';
 import { MangaIdInfo } from '@/lib/data/Mangas.ts';
 import { BaseMangaGrid } from '@/components/source/BaseMangaGrid.tsx';
 import { IMangaGridProps } from '@/components/MangaGrid.tsx';
+import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
 
 const findDuplicatesByTitle = <Manga extends Pick<MangaType, 'title'>>(
     libraryMangas: Manga[],
@@ -174,10 +175,6 @@ export const LibraryDuplicates = () => {
     if (gridLayout === GridLayout.List) {
         return (
             <StyledGroupedVirtuoso
-                style={{
-                    // override Virtuoso default values and set them with class
-                    height: 'undefined',
-                }}
                 groupCounts={mangasCountByTitle}
                 groupContent={(index) => (
                     <StyledGroupHeader variant="h5" isFirstItem={index === 0}>
@@ -185,14 +182,14 @@ export const LibraryDuplicates = () => {
                     </StyledGroupHeader>
                 )}
                 itemContent={(index) => (
-                    <Box key={duplicatedMangas[index].id} sx={{ px: 1, pb: 1 }}>
+                    <StyledGroupItemWrapper key={duplicatedMangas[index].id}>
                         <MangaCard
                             manga={duplicatedMangas[index] as IMangaGridProps['mangas'][number]}
                             gridLayout={gridLayout}
                             selected={null}
                             mode="duplicate"
                         />
-                    </Box>
+                    </StyledGroupItemWrapper>
                 )}
             />
         );

src/util/useResizeObserver.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 { RefObject, useLayoutEffect } from 'react';
+
+export const useResizeObserver = (ref: RefObject<HTMLElement>, callback: ResizeObserverCallback) => {
+    useLayoutEffect(() => {
+        if (!ref.current) {
+            return () => {};
+        }
+
+        const resizeObserver = new ResizeObserver(callback);
+        resizeObserver.observe(ref.current);
+
+        return () => resizeObserver.disconnect();
+    }, [ref, callback]);
+};