Remove fixed width of ReaderNavBar

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 { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
@@ -34,16 +34,19 @@ import { Select } from '@/components/atoms/Select.tsx';
 import { getOptionForDirection } from '@/theme.ts';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { MangaChapterCountInfo, MangaIdInfo } from '@/lib/data/Mangas.ts';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 
 const Root = styled('div')({
     zIndex: 10,
 });
 
 const NavContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
     top: 0,
     left: 0,
-    width: '300px',
+    minWidth: '240px',
-    minWidth: '300px',
+    maxWidth: '400px',
     height: '100vh',
     overflowY: 'auto',
     backgroundColor: theme.palette.background.default,
@@ -135,6 +138,7 @@ interface IProps {
 
 export function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
+    const { setNavBarWidth } = useNavBarContext();
 
     const navigate = useNavigate();
     const location = useLocation<{
@@ -143,6 +147,19 @@ export function ReaderNavBar(props: IProps) {
     }>();
     const { prevDrawerOpen, prevSettingsCollapseOpen } = location.state ?? {};
 
+    const navBarRef = useRef<HTMLDivElement | null>(null);
+    useResizeObserver(
+        navBarRef,
+        useCallback(() => {
+            if (navBarRef.current?.offsetWidth === undefined) {
+                return;
+            }
+
+            setNavBarWidth(navBarRef.current.offsetWidth);
+        }, [navBarRef.current]),
+    );
+    useEffect(() => () => setNavBarWidth(0), [navBarRef]);
+
     const {
         settings,
         setSettingValue,
@@ -224,11 +241,7 @@ export function ReaderNavBar(props: IProps) {
                 mountOnEnter
                 unmountOnExit
             >
-                <NavContainer
+                <NavContainer ref={navBarRef}>
-                    sx={{
-                        position: 'fixed',
-                    }}
-                >
                     <header>
                         {!settings.staticNav && (
                             <Tooltip title={t('reader.button.close_menu')}>

src/screens/Reader.tsx

@@ -194,7 +194,7 @@ export function Reader() {
     const isLastPage = curPage === chapter.pageCount - 1;
     const curPageDebounced = useDebounce(curPage, isLastPage ? 0 : 1000);
     const [pageToScrollTo, setPageToScrollTo] = useState<number | undefined>(undefined);
-    const { setOverride, setTitle } = useContext(NavBarContext);
+    const { setOverride, setTitle, navBarWidth: currentNavBarWidth } = useContext(NavBarContext);
     const [retrievingNextChapter, setRetrievingNextChapter] = useState(false);
     const {
         data: mangaChaptersData,
@@ -543,6 +543,8 @@ export function Reader() {
     // last page, also probably read = true, we will load the first page.
     const initialPage = pageToScrollTo ?? (chapter.lastPageRead === chapter.pageCount - 1 ? 0 : chapter.lastPageRead);
 
+    const navBarWidth = settings.staticNav ? currentNavBarWidth : 0;
+
     return (
         <Box
             sx={{
@@ -551,11 +553,9 @@ export function Reader() {
                 alignContent: 'center',
                 alignItems: 'center',
                 justifyContent: 'center',
-                minWidth: settings.staticNav
+                minWidth: `calc((100vw - (100vw - 100%)) - ${navBarWidth}px)`, // 100vw = width excluding scrollbar; 100% = width including scrollbar
-                    ? 'calc((100vw - (100vw - 100%)) - 300px)'
-                    : 'calc(100vw - (100vw - 100%))', // 100vw = width excluding scrollbar; 100% = width including scrollbar
                 minHeight: '100vh',
-                marginLeft: settings.staticNav ? '300px' : 'unset',
+                marginLeft: `${navBarWidth}px`,
             }}
         >
             <PageNumber settings={settings} curPage={curPage} pageCount={chapter.pageCount} />