diff --git a/packages/docusaurus-theme/changelogs/upcoming/9924.md b/packages/docusaurus-theme/changelogs/upcoming/9924.md deleted file mode 100644 index 4bd896eafeae..000000000000 --- a/packages/docusaurus-theme/changelogs/upcoming/9924.md +++ /dev/null @@ -1 +0,0 @@ -- Added a hover animation to the EUI mark in the documentation navbar. diff --git a/packages/docusaurus-theme/changelogs/upcoming/9937.md b/packages/docusaurus-theme/changelogs/upcoming/9937.md new file mode 100644 index 000000000000..f1ae1ec567f3 --- /dev/null +++ b/packages/docusaurus-theme/changelogs/upcoming/9937.md @@ -0,0 +1 @@ +- Added a context menu on the EUI mark in the documentation navbar with links to Elastic and Brand Guide. diff --git a/packages/docusaurus-theme/src/theme/Logo/index.tsx b/packages/docusaurus-theme/src/theme/Logo/index.tsx index 05462e0c1ab0..4c42f4f062a7 100644 --- a/packages/docusaurus-theme/src/theme/Logo/index.tsx +++ b/packages/docusaurus-theme/src/theme/Logo/index.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { useContext, type CSSProperties, type JSX } from 'react'; +import { useContext, useState, type CSSProperties, type JSX, type MouseEvent } from 'react'; import { css } from '@emotion/react'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; @@ -14,7 +14,11 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { useThemeConfig, type NavbarLogo } from '@docusaurus/theme-common'; import type { Props } from '@theme-original/Logo'; import { + EuiContextMenuItem, + EuiContextMenuPanel, + EuiIcon, EuiImage, + EuiPopover, euiCanAnimate, euiTextTruncate, useEuiMemoizedStyles, @@ -25,6 +29,8 @@ import { AppThemeContext } from '../../components/theme_context'; const EUI_LOGO = 'eui_logo.svg'; const LOGO_DISTANCE = '5px'; +const ELASTIC_HOME_URL = 'https://www.elastic.co'; +const ELASTIC_BRAND_URL = 'https://brand.elastic.co'; const getStyles = ({ euiTheme }: UseEuiTheme) => ({ wrapper: css` @@ -49,6 +55,11 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => ({ .navbar__logo { overflow: visible; height: auto; + + .euiPopover { + display: block; + line-height: 0; + } } .navbar__title { @@ -119,8 +130,24 @@ function EuiNavbarLogo({ }) { const styles = useEuiMemoizedStyles(getStyles); const isDecorative = alt === ''; + const [isPopoverOpen, setIsPopoverOpen] = useState(false); - return ( + const closePopover = () => setIsPopoverOpen(false); + + const openLink = (url: string) => (event: MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + window.open(url, '_blank', 'noopener,noreferrer'); + closePopover(); + }; + + const handleContextMenu = (event: MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + setIsPopoverOpen(true); + }; + + const logo = ( ); + + return ( + + + Elastic + , + } + href={ELASTIC_BRAND_URL} + target="_blank" + external={false} + onClick={openLink(ELASTIC_BRAND_URL)} + > + Brand Guide + , + ]} + /> + + ); } function LogoThemedImage({