diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
index 0b66e9694d2b..b80687f24f2c 100644
--- 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
index a2b91d8c0f0c..411baf5fd94f 100644
--- a/lib/ui/src/components/preview/tools/menu.tsx
+++ b/lib/ui/src/components/preview/tools/menu.tsx
@@ -5,7 +5,7 @@ import { Addon } from '@storybook/addons';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showNav,
-  toggle: api.toggleNav,
+  toggle: () => api.toggleNav(),
 });
 
 export const menuTool: Addon = {
@@ -13,24 +13,17 @@ export const menuTool: Addon = {
   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>
   ),
 };