Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Back button implementation #47

Merged
merged 5 commits into from
Oct 26, 2021
Merged

Back button implementation #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
959a740
Added the back button to the main Ui
ff2400t Oct 25, 2021
2f1ab20
Changed the naviation in the reader ui so that when the next or previ…
ff2400t Oct 25, 2021
9aca12b
Merge branch 'master' into back-button-implementation
ff2400t Oct 25, 2021
d506810
- Made changes so that if history is of length 1 then the backbutton …
ff2400t Oct 26, 2021
b0814b1
Back button won't show for any route that has an icon in the sidebar
ff2400t Oct 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions src/components/navbar/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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);

Expand All @@ -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}
Expand All @@ -95,7 +98,25 @@ export default function NavBar() {
>
<MenuIcon />
</IconButton>
)}
)
: (
!navbarItems.some(({ path }) => path === history.location.pathname)
&& (
ff2400t marked this conversation as resolved.
Show resolved Hide resolved
<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}
</Typography>
Expand Down
4 changes: 3 additions & 1 deletion src/components/navbar/ReaderNavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -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}`}
>
Expand All @@ -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}`}
>
Expand Down