Back button implementation (#47)

* Added the back button to the main Ui

* Changed the naviation in the reader ui so that when the next or previous chapter links are clicked, instead of adding the a new history entry, it will replace the current History entry and rereder the Reader component

* - Made changes so that if history is of length 1 then the backbutton will take you to /library
- made use of the startsWith method so that if we use url for the saving the last viewed category there won't be a need to change this
- changed a few relative imports to absolute imports

* Back button won't show for any route that has an icon in the  sidebar

src/components/navbar/NavBar.tsx

@@ -20,10 +20,12 @@ import ExtensionIcon from '@mui/icons-material/Extension';
 import ExploreIcon from '@mui/icons-material/Explore';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import SettingsIcon from '@mui/icons-material/Settings';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import { useHistory } from 'react-router-dom';
 import NavBarContext from 'context/NavbarContext';
 import DarkTheme from 'context/DarkTheme';
-import PermanentSideBar from './PermanentSideBar';
 import TemporaryDrawer from './TemporaryDrawer';
+import PermanentSideBar from './PermanentSideBar';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -72,6 +74,7 @@ export default function NavBar() {
     const { title, action, override } = useContext(NavBarContext);
     const theme = useTheme();
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
+    const history = useHistory();
 
     const { darkTheme } = useContext(DarkTheme);
 
@@ -83,7 +86,7 @@ export default function NavBar() {
         <div className={classes.root}>
             <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
                 <Toolbar>
-                    {isMobileWidth && (
+                    {isMobileWidth ? (
                         <IconButton
                             edge="start"
                             className={classes.menuButton}
@@ -95,6 +98,24 @@ export default function NavBar() {
                         >
                             <MenuIcon />
                         </IconButton>
+                    )
+                        : (
+                            !navbarItems.some(({ path }) => path === history.location.pathname)
+                            && (
+                                <IconButton
+                                    edge="start"
+                                    className={classes.menuButton}
+                                    color="inherit"
+                                    aria-label="menu"
+                                    disableRipple
+                                    // when page is opened in new tab backbutton will
+                                    // take you to the library
+                                    onClick={() => (history.length === 1 ? history.push('/library') : history.goBack())}
+                                    size="large"
+                                >
+                                    <ArrowBack />
+                                </IconButton>
+                            )
                         )}
                     <Typography variant={isMobileWidth ? 'h6' : 'h5'} className={classes.title}>
                         {title}

src/components/navbar/ReaderNavBar.tsx

@@ -228,7 +228,7 @@ export default function ReaderNavBar(props: IProps) {
                             color="inherit"
                             aria-label="menu"
                             disableRipple
-                            onClick={() => history.push(`/manga/${manga.id}`)}
+                            onClick={() => history.goBack()}
                             size="large"
                         >
                             <CloseIcon />
@@ -344,6 +344,7 @@ export default function ReaderNavBar(props: IProps) {
                             {chapter.index > 1
                         && (
                             <Link
+                                replace
                                 style={{ gridArea: 'prev' }}
                                 to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
                             >
@@ -358,6 +359,7 @@ export default function ReaderNavBar(props: IProps) {
                             {chapter.index < chapter.chapterCount
                         && (
                             <Link
+                                replace
                                 style={{ gridArea: 'next' }}
                                 to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
                             >