Prevent grid items from jumping after closing reader

Due to the reader and the "default" nav bar updating the same navbar width in the context, the grid item width calculation resulted in different grid item widths, which caused the items to "jump" after closing the reader

src/components/navbar/DefaultNavBar.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+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';
@@ -73,7 +73,7 @@ const navbarItems: Array<NavbarItem> = [
 ];
 
 export function DefaultNavBar() {
-    const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth } =
+    const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth, setNavBarWidth } =
         useContext(NavBarContext);
 
     const { pathname } = useLocation();
@@ -98,6 +98,15 @@ export function DefaultNavBar() {
     );
     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],

src/components/navbar/NavBarContextProvider.tsx

@@ -26,6 +26,7 @@ export function NavBarContextProvider({ children }: IProps) {
     });
     const [isCollapsed, setIsCollapsed] = useLocalStorage('NavBar::isCollapsed', false);
     const [navBarWidth, setNavBarWidth] = useState(0);
+    const [readerNavBarWidth, setReaderNavBarWidth] = useState(0);
     const [bottomBarHeight, setBottomBarHeight] = useState(0);
 
     const history = useHistory();
@@ -53,6 +54,8 @@ export function NavBarContextProvider({ children }: IProps) {
             setIsCollapsed,
             navBarWidth,
             setNavBarWidth,
+            readerNavBarWidth,
+            setReaderNavBarWidth,
             bottomBarHeight,
             setBottomBarHeight,
         }),
@@ -70,6 +73,8 @@ export function NavBarContextProvider({ children }: IProps) {
             setIsCollapsed,
             navBarWidth,
             setNavBarWidth,
+            readerNavBarWidth,
+            setReaderNavBarWidth,
             bottomBarHeight,
             setBottomBarHeight,
         ],

src/components/navbar/ReaderNavBar.tsx

@@ -12,7 +12,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
@@ -138,7 +138,7 @@ interface IProps {
 
 export function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
-    const { setNavBarWidth } = useNavBarContext();
+    const { setReaderNavBarWidth } = useNavBarContext();
 
     const navigate = useNavigate();
     const location = useLocation<{
@@ -155,10 +155,10 @@ export function ReaderNavBar(props: IProps) {
                 return;
             }
 
-            setNavBarWidth(navBarRef.current.offsetWidth);
+            setReaderNavBarWidth(navBarRef.current.offsetWidth);
         }, [navBarRef.current]),
     );
-    useEffect(() => () => setNavBarWidth(0), [navBarRef]);
+    useLayoutEffect(() => () => setReaderNavBarWidth(0), [navBarRef]);
 
     const {
         settings,

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -17,7 +17,7 @@ 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 { useCallback, useMemo, useRef } from 'react';
 import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
@@ -92,7 +92,6 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
         ref,
         useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref.current]),
     );
-    useEffect(() => () => setNavBarWidth(0), []);
 
     return (
         <Drawer variant="permanent" sx={{ width: navBarWidth }}>

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -10,7 +10,7 @@ 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, useEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { NavbarItem } from '@/typings.ts';
 import { useResizeObserver } from '@/util/useResizeObserver.tsx';
@@ -27,7 +27,7 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
         ref,
         useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref.current]),
     );
-    useEffect(() => () => setBottomBarHeight(0), []);
+    useLayoutEffect(() => () => setBottomBarHeight(0), []);
 
     const [selectedNavBarItem, setSelectedNavBarItem] = useState(
         navBarItems.find((navBarItem) => navBarItem.path === location.pathname)?.path,