SingleTopNav: Add chevron and tooltip to menu trigger (#94199)

add chevron and tooltip to menu trigger
This commit is contained in:
Ashley Harrison 2024-10-03 13:20:32 +01:00 committed by GitHub
parent eb60773073
commit 87fd36aecf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 10 additions and 4 deletions

View File

@ -24,7 +24,7 @@ export function MegaMenuHeader({ handleMegaMenu, handleDockedMenu, onClose }: Pr
return ( return (
<div className={styles.header}> <div className={styles.header}>
<Stack alignItems="center" minWidth={0} gap={0.25}> <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} /> <Branding.MenuLogo className={styles.img} />
</ToolbarButton> </ToolbarButton>
<OrganizationSwitcher /> <OrganizationSwitcher />

View File

@ -3,10 +3,11 @@ import { cloneDeep } from 'lodash';
import { memo } from 'react'; import { memo } from 'react';
import { GrafanaTheme2, NavModelItem } from '@grafana/data'; 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 { config } from 'app/core/config';
import { useGrafana } from 'app/core/context/GrafanaContext'; import { useGrafana } from 'app/core/context/GrafanaContext';
import { contextSrv } from 'app/core/core'; import { contextSrv } from 'app/core/core';
import { t } from 'app/core/internationalization';
import { HOME_NAV_ID } from 'app/core/reducers/navModel'; import { HOME_NAV_ID } from 'app/core/reducers/navModel';
import { ScopesSelector } from 'app/features/scopes'; import { ScopesSelector } from 'app/features/scopes';
import { useSelector } from 'app/types'; import { useSelector } from 'app/types';
@ -53,8 +54,11 @@ export const SingleTopBar = memo(function SingleTopBar({
<div className={styles.layout}> <div className={styles.layout}>
<TopSearchBarSection> <TopSearchBarSection>
{!menuDockedAndOpen && ( {!menuDockedAndOpen && (
<ToolbarButton narrow onClick={onToggleMegaMenu}> <ToolbarButton narrow onClick={onToggleMegaMenu} tooltip={t('navigation.megamenu.open', 'Open menu')}>
<Branding.MenuLogo className={styles.img} /> <Stack gap={0} alignItems="center">
<Branding.MenuLogo className={styles.img} />
<Icon size="sm" name="angle-down" />
</Stack>
</ToolbarButton> </ToolbarButton>
)} )}
<Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} /> <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} />

View File

@ -1855,6 +1855,7 @@
"close": "Close menu", "close": "Close menu",
"dock": "Dock menu", "dock": "Dock menu",
"list-label": "Navigation", "list-label": "Navigation",
"open": "Open menu",
"undock": "Undock menu" "undock": "Undock menu"
}, },
"toolbar": { "toolbar": {

View File

@ -1855,6 +1855,7 @@
"close": "Cľőşę męʼnū", "close": "Cľőşę męʼnū",
"dock": "Đőčĸ męʼnū", "dock": "Đőčĸ męʼnū",
"list-label": "Ńävįģäŧįőʼn", "list-label": "Ńävįģäŧįőʼn",
"open": "Øpęʼn męʼnū",
"undock": "Ůʼnđőčĸ męʼnū" "undock": "Ůʼnđőčĸ męʼnū"
}, },
"toolbar": { "toolbar": {