frontend: Improve top bar menu on mobile

This change addresses issues with the top bar on mobile devices, both in the home view and in-cluster. Fixes: #2066 Signed-off-by: Evangelos Skopelitis <[email protected]>
headlamp-k8s · Nov 22, 2024 · 1ea6be5 · 1ea6be5
1 parent 8ff79cf
commit 1ea6be5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/frontend/src/components/App/TopBar.tsx b/frontend/src/components/App/TopBar.tsx
@@ -141,7 +141,12 @@ function AppBarActionsMenu({
         if (React.isValidElement(Action)) {
           return (
             <ErrorBoundary>
-              <MenuItem>{Action}</MenuItem>
+              <MenuItem
+                onClick={(action as AppBarAction)?.onClick || undefined}
+                sx={{ justifyContent: 'center' }}
+              >
+                {Action}
+              </MenuItem>
             </ErrorBoundary>
           );
         } else if (Action === null) {
@@ -150,7 +155,10 @@ function AppBarActionsMenu({
           const ActionComponent = Action as React.FC;
           return (
             <ErrorBoundary>
-              <MenuItem>
+              <MenuItem
+                onClick={(action as AppBarAction)?.onClick || undefined}
+                sx={{ justifyContent: 'center' }}
+              >
                 <ActionComponent />
               </MenuItem>
             </ErrorBoundary>
@@ -308,33 +316,39 @@ export function PureTopBar({
       id: DefaultAppBarAction.NOTIFICATION,
       action: null,
     },
-    {
-      id: DefaultAppBarAction.SETTINGS,
-      action: (
-        <MenuItem>
-          <SettingsButton onClickExtra={handleMenuClose} />
-        </MenuItem>
-      ),
-    },
+    ...(isClusterContext
+      ? [
+          {
+            id: DefaultAppBarAction.SETTINGS,
+            action: <SettingsButton onClickExtra={handleMenuClose} />,
+            onClick: () => {
+              handleMenuClose();
+              history.push(createRouteURL('settingsCluster', { cluster }));
+            },
+          },
+        ]
+      : []),
     {
       id: DefaultAppBarAction.USER,
       action: !!isClusterContext && (
-        <MenuItem>
-          <IconButton
-            aria-label={t('Account of current user')}
-            aria-controls={userMenuId}
-            aria-haspopup="true"
-            color="inherit"
-            onClick={event => {
-              handleMenuClose();
-              handleProfileMenuOpen(event);
-            }}
-            size="medium"
-          >
-            <Icon icon="mdi:account" />
-          </IconButton>
-        </MenuItem>
+        <IconButton
+          aria-label={t('Account of current user')}
+          aria-controls={userMenuId}
+          aria-haspopup="true"
+          color="inherit"
+          onClick={event => {
+            handleMenuClose();
+            handleProfileMenuOpen(event);
+          }}
+          size="medium"
+        >
+          <Icon icon="mdi:account" />
+        </IconButton>
       ),
+      onClick: (event: React.MouseEvent<HTMLElement>) => {
+        handleMenuClose();
+        handleProfileMenuOpen(event);
+      },
     },
   ];
   const renderMobileMenu = (

diff --git a/frontend/src/redux/actionButtonsSlice.ts b/frontend/src/redux/actionButtonsSlice.ts
@@ -22,6 +22,7 @@ export type RowAction = {
 export type AppBarAction = {
   id: string;
   action?: AppBarActionType;
+  onClick?: (args: any[] | any) => void;
 };
 
 export enum DefaultHeaderAction {