Merge pull request #15369 from apapadopoulou/ap/sidebar-toggle

UI: Display menu icon on the toolbar when the sidebar is collapsed

lib/ui/src/components/preview/toolbar.tsx

@@ -15,6 +15,7 @@ import * as S from './utils/components';
 import { PreviewProps } from './utils/types';
 import { copyTool } from './tools/copy';
 import { ejectTool } from './tools/eject';
+import { menuTool } from './tools/menu';
 
 export const getTools = (getFn: API['getElements']) => Object.values(getFn<Addon>(types.TOOL));
 
@@ -193,7 +194,11 @@ export function filterTools(
     path: State['path'];
   }
 ) {
-  const toolsLeft = [tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs), ...tools];
+  const toolsLeft = [
+    menuTool,
+    tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs),
+    ...tools,
+  ];
   const toolsRight = [...toolsExtra];
 
   const filter = (item: Partial<Addon>) =>

lib/ui/src/components/preview/tools/menu.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { IconButton, Icons, Separator } from '@storybook/components';
+import { Consumer, Combo } from '@storybook/api';
+import { Addon } from '@storybook/addons';
+
+const menuMapper = ({ api, state }: Combo) => ({
+  isVisible: state.layout.showNav,
+  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>
+    </>
+  ),
+};

lib/ui/src/components/sidebar/Menu.stories.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent } from 'react';
 
 import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { MenuItemIcon, SidebarMenu, MenuButton, SidebarMenuList } from './Menu';
+import { MenuItemIcon, SidebarMenu, ToolbarMenu, MenuButton, SidebarMenuList } from './Menu';
 import { useMenu } from '../../containers/menu';
 
 export default {
@@ -31,6 +31,8 @@ export const Items = () => <TooltipLinkList links={fakemenu} />;
 
 export const Real = () => <SidebarMenu menu={fakemenu} isHighlighted />;
 
+export const Toolbar = () => <ToolbarMenu menu={fakemenu} />;
+
 const DoubleThemeRenderingHack = styled.div({
   '#root > [data-side="left"] > &': {
     textAlign: 'right',
@@ -40,7 +42,7 @@ const DoubleThemeRenderingHack = styled.div({
 const ExpandedMenu: FunctionComponent<{ menu: any }> = ({ menu }) => (
   <DoubleThemeRenderingHack>
     <WithTooltip
-      placement="top"
+      placement="bottom"
       trigger="click"
       closeOnClick
       startOpen
@@ -65,6 +67,7 @@ export const Expanded = () => {
     false,
     false,
     false,
+    false,
     false
   );
   return <ExpandedMenu menu={menu} />;
@@ -82,6 +85,7 @@ export const ExpandedWithoutReleaseNotes = () => {
     false,
     false,
     false,
+    false,
     false
   );
   return <ExpandedMenu menu={menu} />;

lib/ui/src/components/sidebar/Menu.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useMemo, ComponentProps } from 'react';
 
 import { styled } from '@storybook/theming';
-import { WithTooltip, TooltipLinkList, Button, Icons } from '@storybook/components';
+import { WithTooltip, TooltipLinkList, Button, Icons, IconButton } from '@storybook/components';
 
 export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
 
@@ -113,3 +113,20 @@ export const SidebarMenu: FunctionComponent<{
     </WithTooltip>
   );
 };
+
+export const ToolbarMenu: FunctionComponent<{
+  menu: MenuList;
+}> = ({ menu }) => {
+  return (
+    <WithTooltip
+      placement="bottom"
+      trigger="click"
+      closeOnClick
+      tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
+    >
+      <IconButton title="Shortcuts" aria-label="Shortcuts">
+        <Icons icon="menu" />
+      </IconButton>
+    </WithTooltip>
+  );
+};