lit / lit.dev

The Lit website
https://lit.dev
BSD 3-Clause "New" or "Revised" License
119 stars 186 forks source link

Update doc navigation to handle more content #731

Closed justinfagnani closed 2 years ago

justinfagnani commented 2 years ago

Our Documentation left-side navigation is getting a bit long and we have a desire to add more pages and sections which would make it even longer. We also only support one level of nesting (Section > Page) and new content might be better grouped with another level.

With the current design we chose not to made the sections collapsible because we wanted the nav to be easily scannable. This works will for the above-the-fold sections, but the nav is so long now that it requires a lot of scrolling to even see what the sections are.

One way of handling this would be to have section headers be clickable and collapsible, but with some nuance. Not all sections have to be collapsible, we have some space to play with on the headers: (collapsible, not collapsible) x (default open, default closed). We can set the default expanded state depending on the importance of the section. For instance we can keep Introduction, Components, and Templates expanded and default to collapsed for everything else. If we have multi-level nesting, we can also default to expanded for the top-level section and collapsed for sub-sections

▼ INTRODUCTION
    What is Lit?
    Getting Started

▼ COMPONENTS
    Overview
    Defining
    Rendering
    Reactive properties
    Styles
    Lifecycle
    Shadow DOM
    Events
    Decorators

▼ TEMPLATES
    Overview
    Expressions
    Conditionals
    Lists
    Built-in directives
    Custom directives

▶ COMPOSITION

▼ USE CASES
  ▶ STANDALONE COMPONENTS
  ▶ APPLICATIONS
  ▶ DESIGN SYSTEMS

▶ FRAMEWORK INTEGRATION

▶ TOOLS AND WORKFLOWS

One problem with collapsible sections is keeping the expanded/collapsed state across page navigations. We can remember this state in local storage or session storage, though that state leaks between tabs. It might be the best option. Another is to record state in the URL so that it's local to a tab, but this can effect cachability of the page if the state is in query parameters, or the simplicity of native fragment navigation if it's encoded in fragments.

For cold navigations to URLs within a collapsed section, we must open the section to show the user where they are in the content.

e111077 commented 2 years ago

Addressed in #944 and #945 w/ team feedback:

If navigating to first three sections, expand all three of those sections. Otherwise collapse the first three sections