Redesign library navigation in experimental layout

src/components/toolbar/AppToolbar.tsx

@@ -16,8 +16,8 @@ interface AppToolbarProps {
     buttons?: ReactNode
     isDrawerAvailable: boolean
     isDrawerOpen: boolean
-    onDrawerButtonClick?: (event: React.MouseEvent<HTMLElement>) => void,
-    isFullscreen?: boolean,
+    onDrawerButtonClick?: (event: React.MouseEvent<HTMLElement>) => void
+    isBackButtonAvailable?: boolean
     isUserMenuAvailable?: boolean
 }
 
@@ -34,31 +34,21 @@ const AppToolbar: FC<PropsWithChildren<AppToolbarProps>> = ({
     isDrawerAvailable,
     isDrawerOpen,
     onDrawerButtonClick = () => { /* no-op */ },
-    isFullscreen = false,
+    isBackButtonAvailable = false,
     isUserMenuAvailable = true
 }) => {
     const { user } = useApi();
     const isUserLoggedIn = Boolean(user);
 
-    const isBackButtonAvailable = appRouter.canGoBack();
-
-    // Only use the left safe area padding when the drawer is not pinned or in a fullscreen view
-    const useSafeAreaLeft = isDrawerAvailable || isFullscreen;
-
     return (
         <Toolbar
             variant='dense'
             sx={{
-                flexWrap: {
-                    xs: 'wrap',
-                    lg: 'nowrap'
+                flexWrap: 'wrap',
+                pl: {
+                    xs: 'max(16px, env(safe-area-inset-left))',
+                    sm: 'max(24px, env(safe-area-inset-left))'
                 },
-                ...(useSafeAreaLeft && {
-                    pl: {
-                        xs: 'max(16px, env(safe-area-inset-left))',
-                        sm: 'max(24px, env(safe-area-inset-left))'
-                    }
-                }),
                 pr: {
                     xs: 'max(16px, env(safe-area-inset-left))',
                     sm: 'max(24px, env(safe-area-inset-left))'

src/components/toolbar/ServerButton.tsx

@@ -0,0 +1,37 @@
+import Button from '@mui/material/Button/Button';
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import { useSystemInfo } from 'hooks/useSystemInfo';
+
+const ServerButton: FC = () => {
+    const {
+        data: systemInfo,
+        isPending
+    } = useSystemInfo();
+
+    return (
+        <Button
+            variant='text'
+            size='large'
+            color='inherit'
+            startIcon={
+                <img
+                    src='assets/img/icon-transparent.png'
+                    alt=''
+                    aria-hidden
+                    style={{
+                        maxHeight: '1.25em',
+                        maxWidth: '1.25em'
+                    }}
+                />
+            }
+            component={Link}
+            to='/'
+        >
+            {isPending ? '' : (systemInfo?.ServerName || 'Jellyfin')}
+        </Button>
+    );
+};
+
+export default ServerButton;