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