Spec:
The ToC bar becomes a combined Search/ToC bar.
The default state:
When the Search area gets the input focus (e.g., the user clicking on it or switching to it using the tab key), the ToC area reduces to an icon:
When the user clicks on the ToC, "Browse topics" is highlighted, and the topics list opens underneath:
When the user scrolls, the bar becomes sticky (fixed to the top of the page), the ToC part takes most of the space showing the current topic title (search becomes an icon), and the ToC is scrolled so that the visible topics in the list are the ones next. Note that the expansion of the ToC part on scroll will not occur if the input focus is on search (or there is an active search).
Design notes
- When the different parts of the Search/ToC bar expand/contract, a quick transition should be used to avoid the change to feel jarring.
- Keeping the access to sorting options. Until the advanced search panel is available (were sorting options may go in the future) we want to provide access to sort options in the following way:
- In the ToC, show a footer with the drop-down to select between the two sorting options.
- When the text focus is on the search bar, show the same component below the search bar to suggest the options to sort.
