Skip to content

docs: mobile reference nav menu does not set current page as active #9081

@zowiebeha

Description

@zowiebeha

Description

In the documentation, there is a sidebar to the left of the page that contains navigation to api references.
On mobile, this section is hidden, and can be toggled via a hamburger button in the bottom right of the viewport.
In the sidebar, each navigation anchor link is contained within a

that has the .sidebar-section-children class.
The navigation link that matches the current page will also have the .active class added to its
parent.

In the mobile view, however, this .active class is not added to the parent.

Current mobile behavior (lack of .active class):

chrome_6QToq9eVPt.mp4

Desktop behavior (adds .active class to the current page reference link):

chrome_QobIyKH2j8.mp4

Reduced test case

https://docs.videojs.com/

Steps to reproduce

  1. Resize the browser until the hamburger button appears
  2. Click to open the API reference navigation menu
  3. Open an API group drop-down, and select a reference page link
  4. When the page for the correct reference page loads, return to the navigation menu and observe the styling for the same reference page link

Errors

No response

What version of Video.js are you using?

Latest

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

All

What OS(es) and version(s) does this occur with?

All

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: triageThis issue needs to be reviewed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions