Merge pull request storybookjs#15459 from storybookjs/fix/sidebar-tog…

…gle-fullscreen UI: Fix sidebar toggle in fullscreen mode
abue9 · Jul 2, 2021 · f929ef5 · f929ef5
2 parents 79d10cd + 7c0170a
commit f929ef5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 24 deletions.
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
@@ -156,14 +156,14 @@ export const init: ModuleFn = ({ store, provider, singleStory }) => {
           if (singleStory) return { layout: state.layout };
 
           const { showPanel, isFullscreen } = state.layout;
-          const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
-          const shouldToggleFullScreen = showPanel === false && value === false;
+          const showNav = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
+          const shouldToggleFullScreen = showPanel === false && showNav === false;
 
           return {
             layout: {
               ...state.layout,
-              showNav: value,
-              isFullscreen: shouldToggleFullScreen ? true : isFullscreen,
+              showNav,
+              isFullscreen: shouldToggleFullScreen ? true : !showNav && isFullscreen,
             },
           };
         },

diff --git a/lib/ui/src/components/preview/tools/menu.tsx b/lib/ui/src/components/preview/tools/menu.tsx
@@ -5,32 +5,25 @@ import { Addon } from '@storybook/addons';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showNav,
-  toggle: api.toggleNav,
+  toggle: () => api.toggleNav(),
 });
 
 export const menuTool: Addon = {
   title: 'menu',
   id: 'menu',
   match: ({ viewMode }) => viewMode === 'story',
   render: () => (
-    <>
-      <Consumer filter={menuMapper}>
-        {({ isVisible, toggle }) =>
-          !isVisible && (
-            <>
-              <IconButton
-                aria-label="Show sidebar"
-                key="menu"
-                onClick={toggle as any}
-                title="Show sidebar"
-              >
-                <Icons icon="menu" />
-              </IconButton>
-              <Separator />
-            </>
-          )
-        }
-      </Consumer>
-    </>
+    <Consumer filter={menuMapper}>
+      {({ isVisible, toggle }) =>
+        !isVisible && (
+          <>
+            <IconButton aria-label="Show sidebar" key="menu" onClick={toggle} title="Show sidebar">
+              <Icons icon="menu" />
+            </IconButton>
+            <Separator />
+          </>
+        )
+      }
+    </Consumer>
   ),
 };