Project: Zoom+Focus Navigation


The app navigation+sidebar UX is simultaneously confusing and limited with the current rigidity. There are three levels of sidebar navigation: home, group, and account. This means that groups and accounts auto-focus the sidebar, but there is no way to focus on documents, or navigate to a group/account without automatically focusing in on the sidebar.


We should support "Expand+Collapse" and "Focus" for all entities.


When you click on any entity in the sidebar, the content will expand inline in the sidebar.
You can also expand items in the sidebar without opening them, which will show the children. This can be done by clicking the chevron on the left side of the sidebar item. When hovering, the item's left icon will be replaced with a chevron to expand or collapse.
The active item is shown in blue, and if the active item is within a collapsed item, the collapsed item is blue. Nice-to-have: when scrolling down on a document, highlight the currently visible sections/blocks in blue. (or when hovering over those blocks with the cursor)
All expanded+collapsed items will be saved on the middle end so the sidebar remains consistent when the app re-opens or when the user re-opens the same sidebar later.


On the right side of every sidebar entity, there is a button to "Focus" on that content.
Currently the right side of every item has a "Pin" button, which will be removed. The "pin" functionality will be migrated to "favorites" in a different project
When clicking the focus button, the entity opens in the main view and the sidebar "zooms" or "focuses" in to that content as well. At the top of the focused sidebar, there is a back button that takes the sidebar back up to the next level, until the main sidebar is open and there is no more back button.
There is a focus button for:
Groups, shows the group sidebar. Main view shows the group front document
Accounts, shows the account sidebar. Main view shows the profile document
Documents, shows only the document outline in the sidebar. Main view shows the whole document
Blocks with children, shows only the outline within that block. Main view shows the partial doc
The sidebar back buttons may behave something like breadcrumbs, which would show the full context of the focus and allow you to jump all the way back to the top if the user wants to


1-2 weeks, depending on Rabbit Holes and design questions. Frontend only

Rabbit Holes

When following a link, what happens to the sidebar? Is the whole context lost or are you focusing deeper on this linked document?
Where is the sidebar state saved? Is this in memory only, persisted in the route, or saved in some other navigation structure?
Related question: what is the expectation of sidebar movement when going forward and back?

No Goes