Hide panel opener icon on mobile

elastic · Oct 19, 2023 · a743f7c · a743f7c
1 parent 1f15fee
commit a743f7c
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx
@@ -19,6 +19,7 @@ import {
   type EuiThemeComputed,
   useEuiTheme,
   transparentize,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import type { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser';
 import type { NavigateToUrlFn } from '../../../types/internal';
@@ -53,6 +54,8 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl }: Prop
   const { title, deepLink, isActive, children } = item;
   const id = nodePathToString(item);
   const href = deepLink?.url ?? item.href;
+  const isNotMobile = useIsWithinMinBreakpoint('s');
+  const isIconVisible = isNotMobile && !!children && children.length > 0;
 
   const itemClassNames = classNames(
     'sideNavItem',
@@ -82,7 +85,7 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl }: Prop
 
   return (
     <EuiFlexGroup alignItems="center" gutterSize="xs">
-      <EuiFlexItem>
+      <EuiFlexItem style={{ flexBasis: isIconVisible ? '80%' : '100%' }}>
         <EuiListGroup gutterSize="none">
           <EuiListGroupItem
             label={title}
@@ -96,8 +99,8 @@ export const NavigationItemOpenPanel: FC<Props> = ({ item, navigateToUrl }: Prop
           />
         </EuiListGroup>
       </EuiFlexItem>
-      {!!children && children.length > 0 && (
-        <EuiFlexItem grow={0}>
+      {isIconVisible && (
+        <EuiFlexItem grow={0} style={{ flexBasis: '15%' }}>
           <EuiButtonIcon
             display={nodePathToString(selectedNode) === id ? 'base' : 'empty'}
             size="s"