Fix drawer showing on all pages and item details padding

src/apps/dashboard/AppLayout.tsx

@@ -27,9 +27,9 @@ const AppLayout: FC<AppLayoutProps> = ({
     const { user } = useApi();
 
     const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm'));
-    const isDrawerAvailable = !isSmallScreen
+    const isDrawerAvailable = Boolean(user)
         && !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
-    const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
+    const isDrawerOpen = isDrawerActive && isDrawerAvailable;
 
     const onToggleDrawer = useCallback(() => {
         setIsDrawerActive(!isDrawerActive);
@@ -52,18 +52,22 @@ const AppLayout: FC<AppLayoutProps> = ({
                     }}
                 >
                     <AppToolbar
-                        isDrawerAvailable={isDrawerAvailable}
+                        isDrawerAvailable={!isSmallScreen && isDrawerAvailable}
                         isDrawerOpen={isDrawerOpen}
                         onDrawerButtonClick={onToggleDrawer}
                     />
                 </AppBar>
             </ElevationScroll>
 
-            <AppDrawer
-                open={isDrawerOpen}
-                onClose={onToggleDrawer}
-                onOpen={onToggleDrawer}
-            />
+            {
+                isDrawerAvailable && (
+                    <AppDrawer
+                        open={isDrawerOpen}
+                        onClose={onToggleDrawer}
+                        onOpen={onToggleDrawer}
+                    />
+                )
+            }
 
             <Box
                 component='main'

src/apps/experimental/AppLayout.tsx

@@ -53,7 +53,7 @@ const AppLayout = () => {
             </ElevationScroll>
 
             {
-                user && (
+                isDrawerAvailable && (
                     <AppDrawer
                         open={isDrawerOpen}
                         onClose={onToggleDrawer}

src/apps/experimental/AppOverrides.scss

@@ -21,10 +21,14 @@ $mui-bp-xl: 1536px;
 
 // Fix the padding of some pages
 .homePage.libraryPage.withTabs, // Home page
-.libraryPage:not(.withTabs) { // Tabless library pages
+// Library pages excluding the item details page and tabbed pages
+.libraryPage:not(
+    .itemDetailPage,
+    .withTabs
+) {
     padding-top: 3.25rem !important;
 }
-
+// Tabbed library pages
 .libraryPage.withTabs {
     padding-top: 6.5rem !important;