Merge pull request #5020 from thornbill/mui-design-tweaks

Update mui based layout ui

src/components/Backdrop.tsx

@@ -1,4 +1,6 @@
+import Box from '@mui/material/Box';
 import React, { useEffect } from 'react';
+import { DRAWER_WIDTH } from './ResponsiveDrawer';
 
 const Backdrop = () => {
     useEffect(() => {
@@ -8,7 +10,14 @@ const Backdrop = () => {
 
     return (
         <>
-            <div className='backdropContainer' />
+            <Box
+                className='backdropContainer'
+                sx={{
+                    left: {
+                        md: DRAWER_WIDTH
+                    }
+                }}
+            />
             <div className='backgroundContainer' />
         </>
     );

src/components/ResponsiveDrawer.tsx

@@ -1,17 +1,15 @@
-import { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import React, { FC, useCallback } from 'react';
+import React, { FC } from 'react';
 
 import browser from 'scripts/browser';
 
 export const DRAWER_WIDTH = 240;
 
 export interface ResponsiveDrawerProps {
-    hasSecondaryToolBar?: boolean
     open: boolean
     onClose: () => void
     onOpen: () => void
@@ -19,19 +17,13 @@ export interface ResponsiveDrawerProps {
 
 const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
     children,
-    hasSecondaryToolBar = false,
     open = false,
     onClose,
     onOpen
 }) => {
-    const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
-    const isLargeScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('lg'));
+    const isMediumScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
 
-    const getToolbarStyles = useCallback((theme: Theme) => ({
-        marginBottom: (hasSecondaryToolBar && !isLargeScreen) ? theme.spacing(6) : 0
-    }), [ hasSecondaryToolBar, isLargeScreen ]);
-
-    return ( isSmallScreen ? (
+    return ( isMediumScreen ? (
         /* DESKTOP DRAWER */
         <Drawer
             sx={{
@@ -42,14 +34,9 @@ const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
                     boxSizing: 'border-box'
                 }
             }}
-            variant='persistent'
+            variant='permanent'
             anchor='left'
-            open={open}
         >
-            <Toolbar
-                variant='dense'
-                sx={getToolbarStyles}
-            />
             {children}
         </Drawer>
     ) : (
@@ -65,10 +52,6 @@ const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
                 keepMounted: true // Better open performance on mobile.
             }}
         >
-            <Toolbar
-                variant='dense'
-                sx={getToolbarStyles}
-            />
             <Box
                 role='presentation'
                 // Close the drawer when the content is clicked

src/components/toolbar/AppToolbar.tsx

@@ -4,11 +4,9 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
 import React, { FC, ReactNode } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
-import appIcon from 'assets/img/icon-transparent.png';
 import { appRouter } from 'components/router/appRouter';
 import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
@@ -84,35 +82,6 @@ const AppToolbar: FC<AppToolbarProps> = ({
                 </Tooltip>
             )}
 
-            <Box
-                component={Link}
-                to='/'
-                color='inherit'
-                aria-label={globalize.translate('Home')}
-                sx={{
-                    ml: 2,
-                    display: 'inline-flex',
-                    textDecoration: 'none'
-                }}
-            >
-                <Box
-                    component='img'
-                    src={appIcon}
-                    sx={{
-                        height: '2rem',
-                        marginInlineEnd: 1
-                    }}
-                />
-                <Typography
-                    variant='h6'
-                    noWrap
-                    component='div'
-                    sx={{ display: { xs: 'none', sm: 'inline-block' } }}
-                >
-                    Jellyfin
-                </Typography>
-            </Box>
-
             {children}
 
             {isUserLoggedIn && isUserMenuAvailable && (