Session storage navigation toolbar hidden

[BartJanvanAssen]

I was working on a storybook implementation, and somehow the toolbar was hidden, no way i could find in the UI to enable the toolbar again.. So i created new storybook in an new folder.. and still it was hidden! I had no clue how to fix it, but in the end i found my session storage had these options:

Can we please add a toggle for the toolbar?

[anwalkers]

Would be a great enhancement to afford the user a way to show the sidebar again without having to search issues on github and find out the shortcut to reopen the sidebar is "S" :)

Could you use a "hamburger button" or add another icon to the header when the sidebar is closed that allows the user to reopen it?

[apapadopoulou]

Hello! Is anyone working on this?

[shilman]

@apapadopoulou it's all yours! 🚀

[apapadopoulou]

Hello!! I looked a bit into this and I was wandering where in the manager would be a good place to add the button. Some candidate places would be:

1. The toolbar-However, if the toolbar is disabled or hidden, this would result in the button to be hidden as well.
2. On the right side of the panel where addons are registered. This could, however, cause a problem, if a user has many addons registered or if the orientation is changed.
3. Above the addons panel-if the orientation changes, the button would be moved on top of the addon column as well.
4. On top of the main panel. I think this would be the best place, because it is independent of the addons that the user has configured and it this place, it would also be more discrete and occupy less space, compared to the other options. In this case, we could also add more toggles and buttons for other components, like the toolbar or the addons panel in the future.

I could design some mockups for any of the above cases before implementing them.

Also, as for the button/toggle, I was thinking to design some variants and see what looks better.

[yannbf]

@domyen would you mind giving your input on this? ☝️
Happy to see more contributions from you @apapadopoulou!

[domyen]

Thanks @apapadopoulou, I'm stoked that you're picking this up.

Strawman UX:

1. Menu: Add a link in the dropdown tooltip that shows the state of the Toolbar visibility
2. Toolbar: When the sidebar is collapsed there's no way to see the menu to then show the Toolbar. Add the menu icon to the left hand side of the toolbar when the sidebar is collapsed. (see below)

What we're intentionally not designing for
The case when you close the sidebar && hide the toolbar. Getting into this state is so specific that I'd lean toward a UX where the developer is intelligently adjusting the UI to their liking (it's intentional vs accidental).

[yannbf]

Hey @domyen do I understand correctly that if the user is in full screen mode, the sidebar toggle icon should be present?
Then both the "exit fullscreen" mode and "toggle sidebar" would be present, right?

After #15369 was merged, that's not always the case. I'm wondering about the actual scenarios in combination with the toggle + fullscreen mode. Shall we define what flows make sense and maybe write a few tests to make sure we get it all right?

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.10 containing PR #15369 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[domyen]

Update: Created a new issue for this and more #15560

@yannbf thanks for following up.

Strawman

• Remove the full screen mode & its shortcuts in the menu and toolbar
• When the addon panel is hidden, show these icon buttons to open it.
  • Display icon in the toolbar and swap which one is shown depending on orientation.
  • 
  • 
• Change icon that toggles the sidebar
  • From
  • To

Background
Currently, fullscreen mode adds an extra layer of complexity that we keep running into whenever we make changes to the UI.

Fullscreen mode is just a shortcut for hiding sidebar && hiding addons. It saves you one click when you'd have to do two. The idea behind it is to help developers focus on building the UI without the extra Storybook chrome.

But the use case for full screen mode and "open canvas in new tab" mode is identical. In many ways, opening the canvas iframe is superior because it eliminates the Storybook DOM entirely.