Project: Zoom+Focus Navigation

Problem

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.

Solution

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

Expand+Collapse

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.

Focus+Back

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