[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

docfx/templates/modern/src/nav.ts

Lines 136 to 161 in 81790ce

	function findActiveItem(items: (NavItem | NavItemContainer)[]): NavItem {
	const url = new URL(window.location.href)
	let activeItem: NavItem
	let maxPrefix = 0
	for (const item of items.map(i => 'items' in i ? i.items : i).flat()) {
	if (isExternalHref(item.href)) {
	continue
	}
	const prefix = commonUrlPrefix(url, item.href)
	if (prefix > maxPrefix) {
	maxPrefix = prefix
	activeItem = item
	}
	}
	return activeItem
	}
	function commonUrlPrefix(url: URL, base: URL): number {
	const urlSegments = url.pathname.split('/')
	const baseSegments = base.pathname.split('/')
	let i = 0
	while (i < urlSegments.length && i < baseSegments.length && urlSegments[i] === baseSegments[i]) {
	i++
	}
	return i
	}

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.