ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render reader desktop nav bar content only when visible

Browse Source
This commit is contained in:
schroda
2024-12-21 15:36:47 +01:00
parent 948e2564fa
commit f141a5ae66
1 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -106,52 +106,56 @@ const BaseReaderNavBarDesktop = ({
}} }}
> >
<ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}> <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
<Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}> {isVisible && (
<Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}> <>
<Tooltip title={t('reader.button.exit')}> <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
<IconButton onClick={exit} color="inherit"> <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)} <Tooltip title={t('reader.button.exit')}>
</IconButton> <IconButton onClick={exit} color="inherit">
</Tooltip> {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
<Tooltip title={t('reader.settings.label.static_navigation')}> </IconButton>
<IconButton </Tooltip>
onClick={() => { <Tooltip title={t('reader.settings.label.static_navigation')}>
setReaderNavBarWidth(0); <IconButton
updateReaderSettings('isStaticNav', !isStaticNav); onClick={() => {
}} setReaderNavBarWidth(0);
color={isStaticNav ? 'primary' : 'inherit'} updateReaderSettings('isStaticNav', !isStaticNav);
> }}
<PushPinIcon /> color={isStaticNav ? 'primary' : 'inherit'}
</IconButton> >
</Tooltip> <PushPinIcon />
</Stack> </IconButton>
{manga && currentChapter ? ( </Tooltip>
<> </Stack>
<ReaderNavBarDesktopMetadata {manga && currentChapter ? (
mangaId={manga.id} <>
mangaTitle={manga.title} <ReaderNavBarDesktopMetadata
chapterTitle={currentChapter.name} mangaId={manga.id}
scanlator={currentChapter.scanlator} mangaTitle={manga.title}
/> chapterTitle={currentChapter.name}
<ReaderNavBarDesktopActions /> scanlator={currentChapter.scanlator}
</> />
) : ( <ReaderNavBarDesktopActions />
<LoadingPlaceholder /> </>
)} ) : (
</Stack> <LoadingPlaceholder />
<Stack sx={{ p: 2, gap: 2 }}> )}
<Stack sx={{ gap: 1 }}> </Stack>
<ReaderNavBarDesktopPageNavigation /> <Stack sx={{ p: 2, gap: 2 }}>
<ReaderNavBarDesktopChapterNavigation <Stack sx={{ gap: 1 }}>
chapters={chapters} <ReaderNavBarDesktopPageNavigation />
currentChapter={currentChapter} <ReaderNavBarDesktopChapterNavigation
nextChapter={nextChapter} chapters={chapters}
previousChapter={previousChapter} currentChapter={currentChapter}
/> nextChapter={nextChapter}
</Stack> previousChapter={previousChapter}
<Divider /> />
<ReaderNavBarDesktopQuickSettings openSettings={openSettings} /> </Stack>
</Stack> <Divider />
<ReaderNavBarDesktopQuickSettings openSettings={openSettings} />
</Stack>
</>
)}
</ReaderNavContainer> </ReaderNavContainer>
</Drawer> </Drawer>
); );