Update mui based layout ui

src/apps/experimental/components/AppToolbar/index.tsx

@@ -8,22 +8,22 @@ import AppToolbar from 'components/toolbar/AppToolbar';
 import globalize from 'scripts/globalize';
 
 import AppTabs from '../tabs/AppTabs';
-import { isDrawerPath } from '../drawers/AppDrawer';
 import RemotePlayButton from './RemotePlayButton';
 import SyncPlayButton from './SyncPlayButton';
 import { isTabPath } from '../tabs/tabRoutes';
 
 interface AppToolbarProps {
+    isDrawerAvailable: boolean
     isDrawerOpen: boolean
     onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
 }
 
 const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
+    isDrawerAvailable,
     isDrawerOpen,
     onDrawerButtonClick
 }) => {
     const location = useLocation();
-    const isDrawerAvailable = isDrawerPath(location.pathname);
     const isTabsAvailable = isTabPath(location.pathname);
 
     return (

src/apps/experimental/components/drawers/AppDrawer.tsx

@@ -1,11 +1,9 @@
 import React, { FC } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer';
 
 import { ASYNC_USER_ROUTES } from '../../routes/asyncRoutes';
 import { LEGACY_USER_ROUTES } from '../../routes/legacyRoutes';
-import { isTabPath } from '../tabs/tabRoutes';
 
 import MainDrawerContent from './MainDrawerContent';
 
@@ -27,20 +25,14 @@ const AppDrawer: FC<ResponsiveDrawerProps> = ({
     open = false,
     onClose,
     onOpen
-}) => {
-    const location = useLocation();
-    const hasSecondaryToolBar = isTabPath(location.pathname);
-
-    return (
-        <ResponsiveDrawer
-            hasSecondaryToolBar={hasSecondaryToolBar}
-            open={open}
-            onClose={onClose}
-            onOpen={onOpen}
-        >
-            <MainDrawerContent />
-        </ResponsiveDrawer>
-    );
-};
+}) => (
+    <ResponsiveDrawer
+        open={open}
+        onClose={onClose}
+        onOpen={onOpen}
+    >
+        <MainDrawerContent />
+    </ResponsiveDrawer>
+);
 
 export default AppDrawer;

src/apps/experimental/components/drawers/DrawerHeaderLink.tsx

@@ -0,0 +1,33 @@
+import Box from '@mui/material/Box';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import React from 'react';
+
+import { useApi } from 'hooks/useApi';
+import { useSystemInfo } from 'hooks/useSystemInfo';
+import ListItemLink from 'components/ListItemLink';
+
+import appIcon from 'assets/img/icon-transparent.png';
+
+const DrawerHeaderLink = () => {
+    const { api } = useApi();
+    const { data: systemInfo } = useSystemInfo(api);
+
+    return (
+        <ListItemLink to='/'>
+            <ListItemIcon sx={{ minWidth: 56 }}>
+                <Box
+                    component='img'
+                    src={appIcon}
+                    sx={{ height: '2.5rem' }}
+                />
+            </ListItemIcon>
+            <ListItemText
+                primary={systemInfo?.ServerName || 'Jellyfin'}
+                primaryTypographyProps={{ variant: 'h6' }}
+                secondary={systemInfo?.Version}
+            />
+        </ListItemLink>);
+};
+
+export default DrawerHeaderLink;

src/apps/experimental/components/drawers/MainDrawerContent.tsx

@@ -1,7 +1,5 @@
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
-import type { SystemInfo } from '@jellyfin/sdk/lib/generated-client/models/system-info';
 import { getUserViewsApi } from '@jellyfin/sdk/lib/utils/api/user-views-api';
-import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import Dashboard from '@mui/icons-material/Dashboard';
 import Edit from '@mui/icons-material/Edit';
 import Favorite from '@mui/icons-material/Favorite';
@@ -24,11 +22,11 @@ import { useWebConfig } from 'hooks/useWebConfig';
 import globalize from 'scripts/globalize';
 
 import LibraryIcon from '../LibraryIcon';
+import DrawerHeaderLink from './DrawerHeaderLink';
 
 const MainDrawerContent = () => {
     const { api, user } = useApi();
     const location = useLocation();
-    const [ systemInfo, setSystemInfo ] = useState<SystemInfo>();
     const [ userViews, setUserViews ] = useState<BaseItemDto[]>([]);
     const webConfig = useWebConfig();
 
@@ -45,15 +43,6 @@ const MainDrawerContent = () => {
                     console.warn('[MainDrawer] failed to fetch user views', err);
                     setUserViews([]);
                 });
-
-            getSystemApi(api)
-                .getSystemInfo()
-                .then(({ data }) => {
-                    setSystemInfo(data);
-                })
-                .catch(err => {
-                    console.warn('[MainDrawer] failed to fetch system info', err);
-                });
         } else {
             setUserViews([]);
         }
@@ -62,7 +51,10 @@ const MainDrawerContent = () => {
     return (
         <>
             {/* MAIN LINKS */}
-            <List>
+            <List sx={{ paddingTop: 0 }}>
+                <ListItem disablePadding>
+                    <DrawerHeaderLink />
+                </ListItem>
                 <ListItem disablePadding>
                     <ListItemLink to='/home.html' selected={isHomeSelected}>
                         <ListItemIcon>
@@ -168,17 +160,6 @@ const MainDrawerContent = () => {
                     </List>
                 </>
             )}
-
-            {/* FOOTER */}
-            <Divider style={{ marginTop: 'auto' }} />
-            <List>
-                <ListItem>
-                    <ListItemText
-                        primary={systemInfo?.ServerName ? systemInfo.ServerName : 'Jellyfin'}
-                        secondary={systemInfo?.Version ? `v${systemInfo.Version}` : ''}
-                    />
-                </ListItem>
-            </List>
         </>
     );
 };