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

[apapadopoulou]

Issue: #13799

What I did

I added a new ToolbarMenu type in the Menu.tsx file and created a new menu tool, then added the tool in the left side of the toolbar. I also added a new story in the Menu.stories.tsx file and fixed two stories that had some errors. However, there are some problems, which I list below and this is the reason why I created a draft pull request initially.

• The display of the icon is only successful whenever you load a preview story with the sidebar collapsed. Then, using the shortcut S you can make the sidebar appear again and the icon disappears and appears again when you use the shortcut. Navigation from the menu is not successful. To make the menu icon appear, I used the state.layout.showNav property, but maybe this is not the right way and this is the cause of the above problems. However, I noticed that the above bugs only occurred in my instance of storybook, whereas the icon is displayed as intended in the deploy preview.
• I also planned to add a new preview story where the icon is visible, however there were some changes in the preview.tsx file in the components module and I think that now all of the preview stories should be modified.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
  I added new menu stories, which are visible in the official-example app.
• Does this need an update to the documentation?
  I am not sure but I can update the documentation if needed.

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 730ff9f. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[shilman]

This is awesome @apapadopoulou. I made an animated GIF for people to check out more easily:

[darleendenno]

Hey @apapadopoulou! Thank you for taking the time to improve Storybook! I really like this change -- it makes the sidebar much easier to find when collapsed 😄 I have a couple of non-blocking suggestions to make your code even better and more accessible. Great work! ❤️

[MichaelArestad]

This is pretty cool. I like that you're adding a way to prevent folks from losing the sidebar.

One thing that struck me as I was trying this out was that I expected the icon to reopen the sidebar instead of opening the menu. This would save users a step if they are trying to reopen the sidebar. What do you think about trying that route?

[apapadopoulou]

This is pretty cool. I like that you're adding a way to prevent folks from losing the sidebar.

One thing that struck me as I was trying this out was that I expected the icon to reopen the sidebar instead of opening the menu. This would save users a step if they are trying to reopen the sidebar. What do you think about trying that route?

Thank you for the feedback! I made it that way to help the user quickly access the shortcuts menu, as pointed out by @domyen on issue #13799. I could change it to show the sidebar again after clicking, but then the access to the menu would not be that instant.

[apapadopoulou]

Hey @apapadopoulou! Thank you for taking the time to improve Storybook! I really like this change -- it makes the sidebar much easier to find when collapsed 😄 I have a couple of non-blocking suggestions to make your code even better and more accessible. Great work! ❤️

Thank you!! I will look into the suggestions one by one.

[domyen]

Nice PR!

re:sidebar toggle, The intent of revealing the icon when the sidebar was collapsed was to give folks an easy way to show the sidebar again. The default state of Storybook is to show the sidebar so we want to provide a one click way to get back to that state.

[apapadopoulou]

Nice PR!

re:sidebar toggle, The intent of revealing the icon when the sidebar was collapsed was to give folks an easy way to show the sidebar again. The default state of Storybook is to show the sidebar so we want to provide a one click way to get back to that state.

Okay, should I change it to display the sidebar when clicked?

[domyen]

Okay, should I change it to display the sidebar when clicked?

Yes please 🙇‍♂️

[darleendenno]

This is looking so good! A few alterations and this should be good! 🎉

[darleendenno]

🎉 🎉 🎉 thank you! 🎉 🎉 🎉

this is a wonderful experience:

[shilman]

This is great @apapadopoulou -- love how it turned out! 😻

[MichaelArestad]

Nice work!

[domyen]

Thanks @apapadopoulou! 👏