mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #6028 from thornbill/expand-drawer-section

Browse source 
Update behavior of expanding drawer sections
This commit is contained in:
Bill Thornton 2024-09-23 13:39:45 -04:00 • committed by GitHub
commit 823e18499e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx
View file

@ -2,10 +2,11 @@ import { Dashboard, ExpandLess, ExpandMore, LibraryAdd, People, PlayCircle, Sett
import Collapse from '@mui/material/Collapse'; import Collapse from '@mui/material/Collapse';
import List from '@mui/material/List'; import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem'; import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader'; import ListSubheader from '@mui/material/ListSubheader';
import React from 'react'; import React, { useCallback, useState } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import ListItemLink from 'components/ListItemLink'; import ListItemLink from 'components/ListItemLink';
@ -28,8 +29,16 @@ const PLAYBACK_PATHS = [
const ServerDrawerSection = () => { const ServerDrawerSection = () => {
const location = useLocation(); const location = useLocation();
const isLibrarySectionOpen = LIBRARY_PATHS.includes(location.pathname); const [ isLibrarySectionOpen, setIsLibrarySectionOpen ] = useState(LIBRARY_PATHS.includes(location.pathname));
const isPlaybackSectionOpen = PLAYBACK_PATHS.includes(location.pathname); const [ isPlaybackSectionOpen, setIsPlaybackSectionOpen ] = useState(PLAYBACK_PATHS.includes(location.pathname));
const onLibrarySectionClick = useCallback(() => {
setIsLibrarySectionOpen(isOpen => !isOpen);
}, []);
const onPlaybackSectionClick = useCallback(() => {
setIsPlaybackSectionOpen(isOpen => !isOpen);
}, []);
return ( return (
<List <List
@ -65,13 +74,13 @@ const ServerDrawerSection = () => {
</ListItemLink> </ListItemLink>
</ListItem> </ListItem>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/dashboard/libraries' selected={false}> <ListItemButton onClick={onLibrarySectionClick}>
<ListItemIcon> <ListItemIcon>
<LibraryAdd /> <LibraryAdd />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={globalize.translate('HeaderLibraries')} /> <ListItemText primary={globalize.translate('HeaderLibraries')} />
{isLibrarySectionOpen ? <ExpandLess /> : <ExpandMore />} {isLibrarySectionOpen ? <ExpandLess /> : <ExpandMore />}
</ListItemLink> </ListItemButton>
</ListItem> </ListItem>
<Collapse in={isLibrarySectionOpen} timeout='auto' unmountOnExit> <Collapse in={isLibrarySectionOpen} timeout='auto' unmountOnExit>
<List component='div' disablePadding> <List component='div' disablePadding>
@ -90,13 +99,13 @@ const ServerDrawerSection = () => {
</List> </List>
</Collapse> </Collapse>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemLink to='/dashboard/playback/transcoding' selected={false}> <ListItemButton onClick={onPlaybackSectionClick}>
<ListItemIcon> <ListItemIcon>
<PlayCircle /> <PlayCircle />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={globalize.translate('TitlePlayback')} /> <ListItemText primary={globalize.translate('TitlePlayback')} />
{isPlaybackSectionOpen ? <ExpandLess /> : <ExpandMore />} {isPlaybackSectionOpen ? <ExpandLess /> : <ExpandMore />}
</ListItemLink> </ListItemButton>
</ListItem> </ListItem>
<Collapse in={isPlaybackSectionOpen} timeout='auto' unmountOnExit> <Collapse in={isPlaybackSectionOpen} timeout='auto' unmountOnExit>
<List component='div' disablePadding> <List component='div' disablePadding>