UI: Keep mobile drawer open on component selection

code/ui/manager/src/App.tsx

@@ -11,7 +11,7 @@ import Preview from './container/Preview';
 import Panel from './container/Panel';
 
 import { Layout } from './components/layout/Layout';
-import { useMobileLayoutContext } from './components/mobile/MobileLayoutProvider';
+import { useLayout } from './components/layout/LayoutProvider';
 
 type Props = {
   managerLayoutState: ComponentProps<typeof Layout>['managerLayoutState'];
@@ -20,7 +20,7 @@ type Props = {
 };
 
 export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) => {
-  const { setMobileAboutOpen } = useMobileLayoutContext();
+  const { setMobileAboutOpen } = useLayout();
 
   return (
     <>

code/ui/manager/src/components/layout/Layout.stories.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { styled } from '@storybook/theming';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
-import { MobileLayoutProvider } from '../mobile/MobileLayoutProvider';
+import { LayoutProvider } from './LayoutProvider';
 import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories';
 
 const PlaceholderBlock = styled.div({
@@ -65,7 +65,7 @@ const meta = {
   },
   decorators: [
     MobileNavigationStoriesMeta.decorators[0] as any,
-    (storyFn) => <MobileLayoutProvider>{storyFn()}</MobileLayoutProvider>,
+    (storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>,
   ],
   render: (args) => {
     const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState);

code/ui/manager/src/components/layout/Layout.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { styled } from '@storybook/theming';
 import type { API_Layout, API_ViewMode } from '@storybook/types';
 import { useDragging } from './useDragging';
-import { useMediaQuery } from '../hooks/useMedia';
 import { MobileNavigation } from '../mobile/navigation/MobileNavigation';
-import { BREAKPOINT_MIN_600 } from '../../constants';
+import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+import { useLayout } from './LayoutProvider';
 
 interface InternalLayoutState {
   isDragging: boolean;
@@ -119,8 +119,7 @@ const useLayoutSyncingState = ({
 };
 
 export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: Props) => {
-  const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
-  const isMobile = !isDesktop;
+  const { isDesktop, isMobile } = useLayout();
 
   const {
     navSize,
@@ -179,7 +178,7 @@ const LayoutContainer = styled.div<LayoutState>(
       display: 'flex',
       flexDirection: 'column',
 
-      [`@media ${BREAKPOINT_MIN_600}`]: {
+      [MEDIA_DESKTOP_BREAKPOINT]: {
         display: 'grid',
         gap: 0,
         gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`,
@@ -215,7 +214,7 @@ const ContentContainer = styled.div(({ theme }) => ({
   backgroundColor: theme.background.content,
   display: 'grid', // This is needed to make the content container fill the available space
 
-  [`@media ${BREAKPOINT_MIN_600}`]: {
+  [MEDIA_DESKTOP_BREAKPOINT]: {
     flex: 'auto',
     gridArea: 'content',
   },

code/ui/manager/src/components/layout/LayoutProvider.tsx

@@ -0,0 +1,53 @@
+import type { FC } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+import { useMediaQuery } from '../hooks/useMedia';
+import { BREAKPOINT } from '../../constants';
+
+type LayoutContextType = {
+  isMobileMenuOpen: boolean;
+  setMobileMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isMobileAboutOpen: boolean;
+  setMobileAboutOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isMobilePanelOpen: boolean;
+  setMobilePanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isDesktop: boolean;
+  isMobile: boolean;
+};
+
+const LayoutContext = createContext<LayoutContextType>({
+  isMobileMenuOpen: false,
+  setMobileMenuOpen: () => {},
+  isMobileAboutOpen: false,
+  setMobileAboutOpen: () => {},
+  isMobilePanelOpen: false,
+  setMobilePanelOpen: () => {},
+  isDesktop: false,
+  isMobile: false,
+});
+
+export const LayoutProvider: FC = ({ children }) => {
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [isMobileAboutOpen, setMobileAboutOpen] = useState(false);
+  const [isMobilePanelOpen, setMobilePanelOpen] = useState(false);
+  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINT}px)`);
+  const isMobile = !isDesktop;
+
+  return (
+    <LayoutContext.Provider
+      value={{
+        isMobileMenuOpen,
+        setMobileMenuOpen,
+        isMobileAboutOpen,
+        setMobileAboutOpen,
+        isMobilePanelOpen,
+        setMobilePanelOpen,
+        isDesktop,
+        isMobile,
+      }}
+    >
+      {children}
+    </LayoutContext.Provider>
+  );
+};
+
+export const useLayout = () => useContext(LayoutContext);

code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx

@@ -3,13 +3,13 @@ import { ManagerContext } from '@storybook/manager-api';
 import React, { useEffect } from 'react';
 import { within } from '@storybook/testing-library';
 import { MobileAbout } from './MobileAbout';
-import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider';
+import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
 
 /**
  * A helper component to open the about page via the MobileLayoutContext
  */
 const OpenAboutHelper = ({ children }: { children: any }) => {
-  const { setMobileAboutOpen } = useMobileLayoutContext();
+  const { setMobileAboutOpen } = useLayout();
   useEffect(() => {
     setMobileAboutOpen(true);
   }, [setMobileAboutOpen]);
@@ -41,9 +41,9 @@ const meta = {
             } as any
           }
         >
-          <MobileLayoutProvider>
+          <LayoutProvider>
             <OpenAboutHelper>{storyFn()}</OpenAboutHelper>
-          </MobileLayoutProvider>
+          </LayoutProvider>
         </ManagerContext.Provider>
       );
     },

code/ui/manager/src/components/mobile/about/MobileAbout.tsx

@@ -5,10 +5,10 @@ import { styled } from '@storybook/theming';
 import { Icons, Link } from '@storybook/components';
 import { UpgradeBlock } from '../../upgrade/UpgradeBlock';
 import { MOBILE_TRANSITION_DURATION } from '../../../constants';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 export const MobileAbout: FC = () => {
-  const { isMobileAboutOpen, setMobileAboutOpen } = useMobileLayoutContext();
+  const { isMobileAboutOpen, setMobileAboutOpen } = useLayout();
   const aboutRef = useRef(null);
 
   return (
@@ -72,7 +72,7 @@ const Container = styled.div<{ state: TransitionStatus; transitionDuration: numb
     zIndex: 11,
     transition: `all ${transitionDuration}ms ease-in-out`,
     overflow: 'scroll',
-    padding: '20px',
+    padding: '25px 10px 10px',
     color: theme.color.defaultText,
     background: theme.background.content,
     opacity: `${(() => {

code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { styled } from '@storybook/theming';
 import { Transition } from 'react-transition-group';
 import type { TransitionStatus } from 'react-transition-group/Transition';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileAddonsDrawerProps {
   children: ReactNode;
@@ -38,7 +38,7 @@ const Container = styled.div<{ state: TransitionStatus }>(({ theme, state }) =>
 }));
 
 export const MobileAddonsDrawer: FC<MobileAddonsDrawerProps> = ({ children }) => {
-  const { isMobilePanelOpen } = useMobileLayoutContext();
+  const { isMobilePanelOpen } = useLayout();
   const containerRef = useRef(null);
 
   return (

code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx

@@ -5,39 +5,36 @@ import { Transition } from 'react-transition-group';
 import type { TransitionStatus } from 'react-transition-group/Transition';
 import { MobileAbout } from '../about/MobileAbout';
 import { MOBILE_TRANSITION_DURATION } from '../../../constants';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileMenuDrawerProps {
-  isMenuOpen: boolean;
-  isAboutOpen: boolean;
-  setAboutOpen: (open: boolean) => void;
-  closeMenu: () => void;
   children?: React.ReactNode;
 }
 
-export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({
-  isMenuOpen,
-  isAboutOpen,
-  setAboutOpen,
-  closeMenu,
-  children,
-}) => {
+export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({ children }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const sidebarRef = useRef<HTMLDivElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
+  const { isMobileMenuOpen, setMobileMenuOpen, isMobileAboutOpen, setMobileAboutOpen } =
+    useLayout();
 
   return (
     <>
       <Transition
         nodeRef={containerRef}
-        in={isMenuOpen}
+        in={isMobileMenuOpen}
         timeout={MOBILE_TRANSITION_DURATION}
         mountOnEnter
         unmountOnExit
-        onExited={() => setAboutOpen(false)}
+        onExited={() => setMobileAboutOpen(false)}
       >
         {(state) => (
           <Container ref={containerRef} state={state}>
-            <Transition nodeRef={sidebarRef} in={!isAboutOpen} timeout={MOBILE_TRANSITION_DURATION}>
+            <Transition
+              nodeRef={sidebarRef}
+              in={!isMobileAboutOpen}
+              timeout={MOBILE_TRANSITION_DURATION}
+            >
               {(sidebarState) => (
                 <SidebarContainer ref={sidebarRef} state={sidebarState}>
                   {children}
@@ -50,7 +47,7 @@ export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({
       </Transition>
       <Transition
         nodeRef={overlayRef}
-        in={isMenuOpen}
+        in={isMobileMenuOpen}
         timeout={MOBILE_TRANSITION_DURATION}
         mountOnEnter
         unmountOnExit
@@ -59,7 +56,7 @@ export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({
           <Overlay
             ref={overlayRef}
             state={state}
-            onClick={closeMenu}
+            onClick={() => setMobileMenuOpen(false)}
             aria-label="Close navigation menu"
           />
         )}

code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx

@@ -4,10 +4,10 @@ import { ManagerContext } from '@storybook/manager-api';
 import { within } from '@storybook/testing-library';
 import { startCase } from 'lodash';
 import { MobileNavigation } from './MobileNavigation';
-import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider';
+import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
 
 const MockPanel = () => {
-  const { setMobilePanelOpen } = useMobileLayoutContext();
+  const { setMobilePanelOpen } = useLayout();
   return (
     <div>
       panel
@@ -67,12 +67,12 @@ const meta = {
   decorators: [
     (storyFn) => (
       <ManagerContext.Provider value={mockManagerStore}>
-        <MobileLayoutProvider>
+        <LayoutProvider>
           <div style={{ display: 'flex', flexDirection: 'column', height: '100svh' }}>
             <div style={{ flex: 1 }} />
             {storyFn()}
           </div>
-        </MobileLayoutProvider>
+        </LayoutProvider>
       </ManagerContext.Provider>
     ),
   ],

code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
 import { IconButton, Icons } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { MobileMenuDrawer } from './MobileMenuDrawer';
 import { MobileAddonsDrawer } from './MobileAddonsDrawer';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileNavigationProps {
   menu?: React.ReactNode;
@@ -24,33 +24,26 @@ const useFullStoryName = () => {
     return '';
   }
 
-  let fullStoryName = currentStory.renderLabel(currentStory);
+  let fullStoryName = currentStory.renderLabel?.(currentStory) || currentStory.name;
   let node = index[currentStory.id];
 
   while ('parent' in node && node.parent && index[node.parent]) {
     node = index[node.parent];
-    fullStoryName = `${node.renderLabel(node)}/${fullStoryName}`;
+    const parentName = node.renderLabel?.(node) || node.name;
+    fullStoryName = `${parentName}/${fullStoryName}`;
   }
   return fullStoryName;
 };
 
 export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showPanel }) => {
-  const [isMenuOpen, setMenuOpen] = useState(false);
-  const { isMobileAboutOpen, setMobileAboutOpen, setMobilePanelOpen } = useMobileLayoutContext();
+  const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout();
   const fullStoryName = useFullStoryName();
 
   return (
     <Container>
-      <MobileMenuDrawer
-        isMenuOpen={isMenuOpen}
-        isAboutOpen={isMobileAboutOpen}
-        setAboutOpen={setMobileAboutOpen}
-        closeMenu={() => setMenuOpen(false)}
-      >
-        {menu}
-      </MobileMenuDrawer>
+      <MobileMenuDrawer>{menu}</MobileMenuDrawer>
       <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
-      <Button onClick={() => setMenuOpen(!isMenuOpen)} title="Open navigation menu">
+      <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
         <Icons icon="menu" />
         {fullStoryName}
       </Button>