From 87fd36aecf8c2067c88d3369a61fa78fc67c86c5 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 3 Oct 2024 13:20:32 +0100
Subject: [PATCH] SingleTopNav: Add chevron and tooltip to menu trigger
 (#94199)

add chevron and tooltip to menu trigger
---
 .../components/AppChrome/MegaMenu/MegaMenuHeader.tsx   |  2 +-
 .../core/components/AppChrome/TopBar/SingleTopBar.tsx  | 10 +++++++---
 public/locales/en-US/grafana.json                      |  1 +
 public/locales/pseudo-LOCALE/grafana.json              |  1 +
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx
index 8d60cb8c904..3fb7d247226 100644
--- a/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx
+++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx
@@ -24,7 +24,7 @@ export function MegaMenuHeader({ handleMegaMenu, handleDockedMenu, onClose }: Pr
   return (
     <div className={styles.header}>
       <Stack alignItems="center" minWidth={0} gap={0.25}>
-        <ToolbarButton narrow onClick={handleMegaMenu}>
+        <ToolbarButton narrow onClick={handleMegaMenu} tooltip={t('navigation.megamenu.close', 'Close menu')}>
           <Branding.MenuLogo className={styles.img} />
         </ToolbarButton>
         <OrganizationSwitcher />
diff --git a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
index de93562e32e..4d8a8aa6b73 100644
--- a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
+++ b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
@@ -3,10 +3,11 @@ import { cloneDeep } from 'lodash';
 import { memo } from 'react';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
-import { Dropdown, Icon, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Dropdown, Icon, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { contextSrv } from 'app/core/core';
+import { t } from 'app/core/internationalization';
 import { HOME_NAV_ID } from 'app/core/reducers/navModel';
 import { ScopesSelector } from 'app/features/scopes';
 import { useSelector } from 'app/types';
@@ -53,8 +54,11 @@ export const SingleTopBar = memo(function SingleTopBar({
     <div className={styles.layout}>
       <TopSearchBarSection>
         {!menuDockedAndOpen && (
-          <ToolbarButton narrow onClick={onToggleMegaMenu}>
-            <Branding.MenuLogo className={styles.img} />
+          <ToolbarButton narrow onClick={onToggleMegaMenu} tooltip={t('navigation.megamenu.open', 'Open menu')}>
+            <Stack gap={0} alignItems="center">
+              <Branding.MenuLogo className={styles.img} />
+              <Icon size="sm" name="angle-down" />
+            </Stack>
           </ToolbarButton>
         )}
         <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} />
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 0af7c565435..54c75bc0f9e 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1855,6 +1855,7 @@
       "close": "Close menu",
       "dock": "Dock menu",
       "list-label": "Navigation",
+      "open": "Open menu",
       "undock": "Undock menu"
     },
     "toolbar": {
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index c94ce576c4b..10e72721f09 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -1855,6 +1855,7 @@
       "close": "Cľőşę męʼnū",
       "dock": "Đőčĸ męʼnū",
       "list-label": "Ńävįģäŧįőʼn",
+      "open": "Øpęʼn męʼnū",
       "undock": "Ůʼnđőčĸ męʼnū"
     },
     "toolbar": {