Update mui based layout ui

src/apps/dashboard/AppLayout.tsx

@@ -1,7 +1,8 @@
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import { type Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import React, { FC, useCallback, useState } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
@@ -9,7 +10,6 @@ import AppToolbar from 'components/toolbar/AppToolbar';
 import ElevationScroll from 'components/ElevationScroll';
 import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
 import { useApi } from 'hooks/useApi';
-import { useLocalStorage } from 'hooks/useLocalStorage';
 
 import AppDrawer from './components/drawer/AppDrawer';
 
@@ -19,45 +19,37 @@ interface AppLayoutProps {
     drawerlessPaths: string[]
 }
 
-interface DashboardAppSettings {
-    isDrawerPinned: boolean
-}
-
-const DEFAULT_APP_SETTINGS: DashboardAppSettings = {
-    isDrawerPinned: false
-};
-
 const AppLayout: FC<AppLayoutProps> = ({
     drawerlessPaths
 }) => {
-    const [ appSettings, setAppSettings ] = useLocalStorage<DashboardAppSettings>('DashboardAppSettings', DEFAULT_APP_SETTINGS);
-    const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
+    const [ isDrawerActive, setIsDrawerActive ] = useState(false);
     const location = useLocation();
-    const theme = useTheme();
     const { user } = useApi();
 
-    const isDrawerAvailable = !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
+    const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm'));
+    const isDrawerAvailable = !isSmallScreen
+        && !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
     const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
 
-    useEffect(() => {
-        if (isDrawerActive !== appSettings.isDrawerPinned) {
-            setAppSettings({
-                ...appSettings,
-                isDrawerPinned: isDrawerActive
-            });
-        }
-    }, [ appSettings, isDrawerActive, setAppSettings ]);
-
     const onToggleDrawer = useCallback(() => {
         setIsDrawerActive(!isDrawerActive);
     }, [ isDrawerActive, setIsDrawerActive ]);
 
     return (
         <Box sx={{ display: 'flex' }}>
-            <ElevationScroll elevate={isDrawerOpen}>
+            <ElevationScroll elevate={false}>
                 <AppBar
                     position='fixed'
-                    sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }}
+                    sx={{
+                        width: {
+                            xs: '100%',
+                            sm: `calc(100% - ${DRAWER_WIDTH}px)`
+                        },
+                        ml: {
+                            xs: 0,
+                            sm: `${DRAWER_WIDTH}px`
+                        }
+                    }}
                 >
                     <AppToolbar
                         isDrawerAvailable={isDrawerAvailable}
@@ -77,24 +69,7 @@ const AppLayout: FC<AppLayoutProps> = ({
                 component='main'
                 sx={{
                     width: '100%',
-                    flexGrow: 1,
-                    transition: theme.transitions.create('margin', {
-                        easing: theme.transitions.easing.sharp,
-                        duration: theme.transitions.duration.leavingScreen
-                    }),
-                    marginLeft: 0,
-                    ...(isDrawerAvailable && {
-                        marginLeft: {
-                            sm: `-${DRAWER_WIDTH}px`
-                        }
-                    }),
-                    ...(isDrawerActive && {
-                        transition: theme.transitions.create('margin', {
-                            easing: theme.transitions.easing.easeOut,
-                            duration: theme.transitions.duration.enteringScreen
-                        }),
-                        marginLeft: 0
-                    })
+                    flexGrow: 1
                 }}
             >
                 <AppBody>

src/apps/dashboard/components/drawer/AppDrawer.tsx

@@ -1,5 +1,8 @@
+import ListItem from '@mui/material/ListItem';
+import List from '@mui/material/List';
 import React, { FC } from 'react';
 
+import DrawerHeaderLink from 'apps/experimental/components/drawers/DrawerHeaderLink';
 import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer';
 
 import ServerDrawerSection from './sections/ServerDrawerSection';
@@ -18,6 +21,11 @@ const AppDrawer: FC<ResponsiveDrawerProps> = ({
         onClose={onClose}
         onOpen={onOpen}
     >
+        <List disablePadding>
+            <ListItem disablePadding>
+                <DrawerHeaderLink />
+            </ListItem>
+        </List>
         <ServerDrawerSection />
         <DevicesDrawerSection />
         <LiveTvDrawerSection />