Make components on mobile to only toggle the content

code/ui/manager/src/components/sidebar/Tree.tsx

@@ -36,6 +36,9 @@ import {
   getLink,
 } from '../../utils/tree';
 import { statusMapping, getHighestStatus, getGroupStatus } from '../../utils/status';
+import { useMediaQuery } from '../hooks/useMedia';
+import { BREAKPOINT_MIN_600 } from '../../constants';
+import { useMobileLayoutContext } from '../mobile/MobileLayoutProvider';
 
 export const Action = styled.button<{ height?: number; width?: number }>(
   ({ theme, height, width }) => ({
@@ -201,6 +204,9 @@ const Node = React.memo<NodeProps>(function Node({
   onSelectStoryId,
   api,
 }) {
+  const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
+  const { setMobileMenuOpen } = useMobileLayoutContext();
+
   if (!isDisplayed) {
     return null;
   }
@@ -231,6 +237,7 @@ const Node = React.memo<NodeProps>(function Node({
           onClick={(event) => {
             event.preventDefault();
             onSelectStoryId(item.id);
+            if (!isDesktop) setMobileMenuOpen(false);
           }}
           {...(item.type === 'docs' && { docsMode })}
         >
@@ -329,7 +336,7 @@ const Node = React.memo<NodeProps>(function Node({
         onClick={(event) => {
           event.preventDefault();
           setExpanded({ ids: [item.id], value: !isExpanded });
-          if (item.type === 'component' && !isExpanded) onSelectStoryId(item.id);
+          if (item.type === 'component' && !isExpanded && isDesktop) onSelectStoryId(item.id);
         }}
         onMouseEnter={() => {
           if (item.isComponent) {