Navigation: Hide docked menu and dock button on mobile (#76334)

* hide docked menu and dock button on mobile

* add logic to handle hamburger menu button on mobile

Author: ashharrison90

public/app/core/components/AppChrome/AppChrome.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 
 import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
-import { useStyles2, LinkButton } from '@grafana/ui';
+import { useStyles2, LinkButton, useTheme2 } from '@grafana/ui';
 import config from 'app/core/config';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { CommandPalette } from 'app/features/commandPalette/CommandPalette';
@@ -23,6 +23,7 @@ export function AppChrome({ children }: Props) {
   const { chrome } = useGrafana();
   const state = chrome.useState();
   const searchBarHidden = state.searchBarHidden || state.kioskMode === KioskMode.TV;
+  const theme = useTheme2();
   const styles = useStyles2(getStyles);
 
   const contentClass = cx({
@@ -31,6 +32,23 @@ export function AppChrome({ children }: Props) {
     [styles.contentChromeless]: state.chromeless,
   });
 
+  const handleMegaMenu = () => {
+    switch (state.megaMenu) {
+      case 'closed':
+        chrome.setMegaMenu('open');
+        break;
+      case 'open':
+        chrome.setMegaMenu('closed');
+        break;
+      case 'docked':
+        // on desktop, clicking the button when the menu is docked should close the menu
+        // on mobile, the docked menu is hidden, so clicking the button should open the menu
+        const isDesktop = window.innerWidth > theme.breakpoints.values.md;
+        isDesktop ? chrome.setMegaMenu('closed') : chrome.setMegaMenu('open');
+        break;
+    }
+  };
+
   // Chromeless routes are without topNav, mega menu, search & command palette
   // We check chromeless twice here instead of having a separate path so {children}
   // doesn't get re-mounted when chromeless goes from true to false.
@@ -54,7 +72,7 @@ export function AppChrome({ children }: Props) {
               pageNav={state.pageNav}
               actions={state.actions}
               onToggleSearchBar={chrome.onToggleSearchBar}
-              onToggleMegaMenu={() => chrome.setMegaMenu(state.megaMenu === 'closed' ? 'open' : 'closed')}
+              onToggleMegaMenu={handleMegaMenu}
               onToggleKioskMode={chrome.onToggleKioskMode}
             />
           </div>
@@ -110,7 +128,12 @@ const getStyles = (theme: GrafanaTheme2) => {
       background: theme.colors.background.primary,
       borderRight: `1px solid ${theme.colors.border.weak}`,
       borderTop: `1px solid ${theme.colors.border.weak}`,
+      display: 'none',
       zIndex: theme.zIndex.navbarFixed,
+
+      [theme.breakpoints.up('md')]: {
+        display: 'block',
+      },
     }),
     topNav: css({
       display: 'flex',

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx

@@ -116,6 +116,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   dockMenuButton: css({
+    display: 'none',
     marginRight: theme.spacing(2),
+
+    [theme.breakpoints.up('md')]: {
+      display: 'inline-flex',
+    },
   }),
 });