frontend: TopBar: Hide menu on mobile when empty

This change hides the top bar menu on mobile when there are no actions to display. Fixes: #2066 Signed-off-by: Evangelos Skopelitis <[email protected]>
headlamp-k8s · Dec 16, 2024 · 498b696 · 498b696
1 parent c97a07c
commit 498b696
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/frontend/src/components/App/TopBar.tsx b/frontend/src/components/App/TopBar.tsx
@@ -399,6 +399,12 @@ export const PureTopBar = memo(
         ),
       },
     ];
+
+    const visibleMobileActions = processAppBarActions(
+      allAppBarActionsMobile,
+      appBarActionsProcessors
+    ).filter(action => React.isValidElement(action.action) || typeof action === 'function');
+
     return (
       <>
         <AppBar
@@ -429,16 +435,18 @@ export const PureTopBar = memo(
                 <HeadlampButton open={openSideBar} onToggleOpen={onToggleOpen} />
                 <Box sx={{ flexGrow: 1 }} />
                 <GlobalSearch isIconButton />
-                <IconButton
-                  aria-label={t('show more')}
-                  aria-controls={mobileMenuId}
-                  aria-haspopup="true"
-                  onClick={handleMobileMenuOpen}
-                  color="inherit"
-                  size="medium"
-                >
-                  <Icon icon="mdi:more-vert" />
-                </IconButton>
+                {visibleMobileActions.length > 0 && (
+                  <IconButton
+                    aria-label={t('show more')}
+                    aria-controls={mobileMenuId}
+                    aria-haspopup="true"
+                    onClick={handleMobileMenuOpen}
+                    color="inherit"
+                    size="medium"
+                  >
+                    <Icon icon="mdi:more-vert" />
+                  </IconButton>
+                )}
               </>
             ) : (
               <>