Skip to content

Tab dropdowns to navigate to specific years, charts and info sections #29

@lhelwerd

Description

@lhelwerd

Combine tabs with dropdowns to allow the tabs to remain uncluttered while making it easier to navigate to earlier years, specific charts and information sections (if possible to extract from the markdown-loaded h2's).

This should work both on desktop (hoverable dropdowns) and on touch devices with limited space (press icon to expand dropdown). The tab item itself should also appear at the top of the dropdown (or only on touch devices) to make selecting it easier.

The dropdown DOM structure should weave into the existing tabs structure by using a elements instead of button elements, wrapping everything inside it and adding handlers to the icons for opening the dropdown (touch devices). The CSS needs to be adjusted to allow vertical overflow in the head container and tabs while still ensuring horizontal scroll, and to display the dropdown over the table/thead elements by changing z-index of the head container.

Because the tabs get rebuilt during year switches, we should not have any "fixed" behavior of the dropdown remaining active when clicking on e.g. the icon on desktop and just navigate to the year when clicking anywhere on the tab/trigger.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions