diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index edd98996..6be0578a 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -11,8 +11,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 makeStyles from '@mui/styles/makeStyles'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Typography from '@mui/material/Typography'; import { useHistory, Link } from 'react-router-dom'; import Slide from '@mui/material/Slide'; @@ -27,113 +26,88 @@ import ListItemText from '@mui/material/ListItemText'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; import Collapse from '@mui/material/Collapse'; import Button from '@mui/material/Button'; -import NavBarContext from 'components/context/NavbarContext'; +import { styled } from '@mui/system'; -const useStyles = (settings: IReaderSettings) => makeStyles((theme) => ({ - // main container and root div need to change classes... - AppMainContainer: { - display: 'none', - }, - AppRootElment: { +const Root = styled('div')(({ theme }) => ({ + top: 0, + left: 0, + width: '300px', + minWidth: '300px', + height: '100vh', + overflowY: 'auto', + backgroundColor: theme.palette.background.default, + + '& header': { + backgroundColor: + theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100], display: 'flex', - }, + alignItems: 'center', + minHeight: '64px', + paddingLeft: '24px', + paddingRight: '24px', - root: { - position: settings.staticNav ? 'sticky' : 'fixed', - top: 0, - left: 0, - width: '300px', - minWidth: '300px', - height: '100vh', - overflowY: 'auto', - backgroundColor: theme.palette.background.default, + transition: 'left 2s ease', - '& header': { - backgroundColor: - theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100], - display: 'flex', - alignItems: 'center', - minHeight: '64px', - paddingLeft: '24px', - paddingRight: '24px', - - transition: 'left 2s ease', - - '& button': { - flexGrow: 0, - flexShrink: 0, - }, - - '& button:nth-child(1)': { - marginRight: '16px', - }, - - '& button:nth-child(3)': { - marginRight: '-12px', - }, - - '& h1': { - fontSize: '1.25rem', - flexGrow: 1, - }, + '& button': { + flexGrow: 0, + flexShrink: 0, }, - '& hr': { - margin: '0 16px', - height: '1px', - border: '0', - backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100], + + '& button:nth-child(1)': { + marginRight: '16px', + }, + + '& h1': { + fontSize: '1.25rem', + flexGrow: 1, }, }, - - navigation: { + '& hr': { margin: '0 16px', - - '& > span:nth-child(1)': { - textAlign: 'center', - display: 'block', - marginTop: '16px', - }, - - '& $navigationChapters': { - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gridTemplateAreas: '"prev next"', - gridColumnGap: '5px', - margin: '10px 0', - - '& a': { - flexGrow: 1, - textDecoration: 'none', - - '& button': { - width: '100%', - padding: '5px 8px', - textTransform: 'none', - }, - }, - }, - + height: '1px', + border: '0', + backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100], }, - navigationChapters: {}, // dummy rule +})); - settingsCollapsseHeader: { - '& span': { - fontWeight: 'bold', +const Navigation = styled('div')({ + margin: '0 16px', + '& > span:nth-child(1)': { + textAlign: 'center', + display: 'block', + marginTop: '16px', + }, +}); + +const ChapterNavigation = styled('div')({ + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridTemplateAreas: '"prev next"', + gridColumnGap: '5px', + margin: '10px 0', + + '& a': { + flexGrow: 1, + textDecoration: 'none', + + '& button': { + width: '100%', + padding: '5px 8px', + textTransform: 'none', }, }, +}); - openDrawerButton: { - position: 'fixed', - top: 0 + 20, - left: 10 + 20, - height: '40px', - width: '40px', - borderRadius: 5, - backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white', - - '&:hover': { - backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100], - }, +const OpenDrawerButton = styled(IconButton)(({ theme }) => ({ + position: 'fixed', + top: 0 + 20, + left: 10 + 20, + height: '40px', + width: '40px', + borderRadius: 5, + backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white', + '&:hover': { + backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100], }, })); @@ -154,9 +128,6 @@ interface IProps { } export default function ReaderNavBar(props: IProps) { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { title } = useContext(NavBarContext); - const history = useHistory(); const { @@ -168,8 +139,6 @@ export default function ReaderNavBar(props: IProps) { const [prevScrollPos, setPrevScrollPos] = useState(0); const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true); - const classes = useStyles(settings)(); - const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value }); const handleScroll = () => { @@ -184,15 +153,16 @@ export default function ReaderNavBar(props: IProps) { useEffect(() => { window.addEventListener('scroll', handleScroll); - const rootEl = document.querySelector('#root')!; - const mainContainer = document.querySelector('#appMainContainer')!; + const rootEl:HTMLDivElement = document.querySelector('#root')!; + const mainContainer:HTMLDivElement = document.querySelector('#appMainContainer')!; - rootEl.classList.add(classes.AppRootElment); - mainContainer.classList.add(classes.AppMainContainer); + // main container and root div need to change styles... + rootEl.style.display = 'flex'; + mainContainer.style.display = 'none'; return () => { - rootEl.classList.remove(classes.AppRootElment); - mainContainer.classList.remove(classes.AppMainContainer); + rootEl.style.display = 'block'; + mainContainer.style.display = 'block'; window.removeEventListener('scroll', handleScroll); }; }, [handleScroll]);// handleScroll changes on every render @@ -207,20 +177,25 @@ export default function ReaderNavBar(props: IProps) { mountOnEnter unmountOnExit > -
+
- setDrawerOpen(false)} - size="large" - > - - + {!settings.staticNav + && ( + setDrawerOpen(false)} + size="large" + > + + + )} - {/* {title} */} {chapter.name} history.goBack()} size="large" + sx={{ mr: -1 }} >
- +
-
+ {`Currently on page ${curPage + 1} of ${chapter.pageCount}`} -
+ {chapter.index > 1 && ( )} -
-
-
+ + + - - + diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx index fde27372..c9e01faf 100644 --- a/src/screens/Reader.tsx +++ b/src/screens/Reader.tsx @@ -58,7 +58,12 @@ const getReaderComponent = (readerType: ReaderType) => { }; const range = (n:number) => Array.from({ length: n }, (value, key) => key); -const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 }); +const initialChapter = () => ({ + pageCount: -1, + index: -1, + chapterCount: 0, + name: 'Loading...', +}); export default function Reader() { const [settings, setSettings] = useLocalStorage('readerSettings', defaultReaderSettings);