1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/apps/experimental/AppLayout.tsx

81 lines
2.6 KiB
TypeScript
Raw Normal View History

2023-11-28 10:26:14 -05:00
import React, { useCallback, useState } from 'react';
2023-06-01 12:12:16 -04:00
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
2023-11-28 10:26:14 -05:00
import { type Theme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
2023-06-01 12:12:16 -04:00
import { Outlet, useLocation } from 'react-router-dom';
import AppBody from 'components/AppBody';
import ElevationScroll from 'components/ElevationScroll';
import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
2023-06-01 12:12:16 -04:00
import { useApi } from 'hooks/useApi';
import AppToolbar from './components/AppToolbar';
import AppDrawer, { isDrawerPath } from './components/drawers/AppDrawer';
2023-06-01 12:12:16 -04:00
import './AppOverrides.scss';
const AppLayout = () => {
2023-11-28 10:26:14 -05:00
const [ isDrawerActive, setIsDrawerActive ] = useState(false);
2023-06-01 12:12:16 -04:00
const { user } = useApi();
const location = useLocation();
2023-11-28 10:26:14 -05:00
const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm'));
const isDrawerAvailable = isDrawerPath(location.pathname) && Boolean(user);
const isDrawerOpen = isDrawerActive && isDrawerAvailable;
2023-06-01 12:12:16 -04:00
const onToggleDrawer = useCallback(() => {
setIsDrawerActive(!isDrawerActive);
}, [ isDrawerActive, setIsDrawerActive ]);
return (
<Box sx={{ display: 'flex' }}>
2023-11-28 10:26:14 -05:00
<ElevationScroll elevate={false}>
<AppBar
position='fixed'
2023-11-28 10:26:14 -05:00
sx={{
width: {
xs: '100%',
sm: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
},
ml: {
xs: 0,
sm: isDrawerAvailable ? DRAWER_WIDTH : 0
}
}}
>
<AppToolbar
2023-11-28 10:26:14 -05:00
isDrawerAvailable={!isSmallScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
/>
</AppBar>
</ElevationScroll>
2023-06-01 12:12:16 -04:00
2023-11-28 10:26:14 -05:00
{
isDrawerAvailable && (
2023-11-28 10:26:14 -05:00
<AppDrawer
open={isDrawerOpen}
onClose={onToggleDrawer}
onOpen={onToggleDrawer}
/>
)
}
2023-06-01 12:12:16 -04:00
<Box
component='main'
sx={{
width: '100%',
2023-11-28 10:26:14 -05:00
flexGrow: 1
}}
>
<AppBody>
<Outlet />
</AppBody>
2023-06-01 12:12:16 -04:00
</Box>
</Box>
2023-06-01 12:12:16 -04:00
);
};
export default AppLayout;