Right sidebar: navigation concept

[exalate-issue-sync]

Userstory

As a user i want to have a reliable way of "going back" in the right sidebar to have full control over my actions.

As a user i dont want to be distracted by unrelated information so that I can focus on my current task.

Figma: https://www.figma.com/proto/kFUQ3hH2Fgb1WozhfR3Mpx/Right-sidebar-Navigation-Concept?node-id=54%3A8&scaling=contain&page-id=0%3A1&starting-point-node-id=54%3A8

Acceptance Criteria:

• no accordions any more
• Initial view: Details and headers of subsections (actions, sharing, versions)
• on click: replace right sidebar content with panel of subsection (c.f. ios systems settings, win 11 system settings )
• header cointains:
  • navigate back to parent panel (exeption: initial view)
  • title of the current panel (panel title)
  • close-x (closes whole sidebar)
• fancy x-axis animation (some cool standard vue transition, something like in the ios-settings could be pleasant )
• file/folder icon, name, last changed and size is always visible in the header-section of the sidebar (gives always context/orientation)
• panels are stateless
• its possible to jump from the quickaction "share" directly to the share-subpanel

[rpocklin]

I don't think the mobile-style page overlay works well here, feels wrong on a web interface and it's not used anywhere else in the app. The back navigation doesn't seem intuitive - I think originally this had a few tabs up the top which worked well. The problem with accordion is that the current expanded one is not at the top, so you may have to scroll up or down to access it which is annoying on small screens.

[tbsbdr]

Hey Robert, thanks again for your feedback!

The problem with accordion is that the current expanded one is not at the top, so you may have to scroll up or down to access it which is annoying on small screens.

yep, fully agree.

regarding the tabs: I would have sticked to the tabs as they are a well known pattern, but if I want to have the tab-titles visible, they limit us to a certain width / number of tabs (I guess thats why you said "few tabs"). thats why we are looking for another solution.

[exalate-issue-sync]

Florian Schade commented: @tbader we used to have some icons on the accordion titles, they are now gone. Is this intended?

[exalate-issue-sync]

Florian Schade commented: regarding a11y, the technical behavior has changed. With the accordions we were able to use the mounted hook for initialization on open (it was mounted) or destroy hook on close (it got destroyed).... simple!

Now we have the 'sliding panels' where its posible that 3 panels (aka accordions) are visible at the same time (default -> background, closed -> slide out, newly opened -> slide in).

Thats why we are not able to show (mount) or hide (destroy) the panels anymore, else it would look strange if an empty panel slides in while a empty panel slides out.

We need to define what element in a subPanel gets focused AFTER it's fully visible. The technical part could be done by using Intersection Observer and threshold.

Needs to be discussed before finalizing e2e tests.

cC.: [~bkulmann], [~tbaader]

[tbsbdr]

Florian Schade commented: @tbader we used to have some icons on the accordion titles, they are now gone. Is this intended?

I would have said: yes, no icons, because it looks cleaner to me. but as most of the web team like the icon: lets keep the icons.