[Bug] Modern template always sets the first navbar element as active

[MiTschMR]

Describe the bug The modern template sets the first navbar element always as active. It seems to disregard parts of the path in the url to fully check if the path matches and only then set it active.

To Reproduce Steps to reproduce the behavior:

1. Add an index.md in the root directory and reference it
2. Add subfolders with elements
3. Add a toc.yml in the root directory only referencing the subfolder toc's

Expected behavior The first element in the navbar (meaning a subfolder) should not be set to active.

Context (please complete the following information):

• OS: Windows 11
• Docfx version: 2.76.0

Additional context The default theme does not have this issue.

docfx.json:

{
  "build": {
    "globalMetadata": {
      "_appFooter": "<span>Copyright © 2024 MiTschMR Studios<br>Generated by <strong>DocFX</strong></span>"
    },
    "content": [
      {
        "files": [
          "toc.yml",
          "index.md",
          "releases.md"
        ]
      },
      {
        "src": "authentication",
        "files": [
          "toc.yml",
          "*.md",
          "**/*.md"
        ],
        "dest": "authentication"
      },
      {
        "src": "polls",
        "files": [
          "toc.yml",
          "*.md",
          "**/*.md"
        ],
        "dest": "polls"
      },
      {
        "src": "rewards",
        "files": [
          "toc.yml",
          "*.md",
          "**/*.md"
        ],
        "dest": "rewards"
      },
      {
        "src": "streams",
        "files": [
          "toc.yml",
          "*.md",
          "**/*.md"
        ],
        "dest": "streams"
      },
      {
        "src": "users",
        "files": [
          "toc.yml",
          "*.md",
          "**/*.md"
        ],
        "dest": "users"
      }
    ],
    "resource": [
      {
        "files": [
          "resources/**/*",
          "logo.svg",
          "favicon.ico",
          "versions.json"
        ]
      }
    ],
    "template": [ "default", "modern", "templates/material" ],
    "dest": "_site"
  }
}

toc.yml (root):

- name: Authentication
  href: authentication/
- name: Rewards
  href: rewards/
- name: Streams
  href: streams/
- name: Users
  href: users/
- name: Releases
  href: ./releases.md

Website with modern template:

Website with default template (built with version 2.66.0): https://mitschmr-studios.io/documentation/twitch/

[filzrev]

Reported issue seems to be caused by following functions.

• findActiveItem
• commonUrlPrefix

https://github.com/dotnet/docfx/blob/81790ce66fb18686af93707f83b0e2bd218478e4/templates/modern/src/nav.ts#L136-L161

pathname.split('/') generate string array with heading element is empty string. So currently commonUrlPrefix always return value >=1. And first element is selected as active item.

To resolve this issue. It need to exclude empty string from comparison. And It might need following additional logics.

• Support root (/) navigation item.
• Support default active item to maintain compatibility with current behavior. (e.g. https://dotnet.github.io/docfx display Docs as active item when opening /index.html)

[MiTschMR]

Any news on this? I would love to update to the modern template, but this bug prevents me from doing so.