jooy2 / vitepress-sidebar

🔌 VitePress Sidebar is a plugin for VitePress that automatically configures and manages the sidebar of your page with simple settings.
https://vitepress-sidebar.cdget.com
MIT License
144 stars 7 forks source link

`convertSameNameSubFileToGroupIndexPage` does not get `is-active` class #147

Closed JurreBrandsenInfoSupport closed 1 month ago

JurreBrandsenInfoSupport commented 4 months ago

Describe the bug When using the convertSameNameSubFileToGroupIndexPage option, clicking a nav item with that name is not given an active class.

image

To Reproduce Steps to reproduce the behavior:

const config = {
    useTitleFromFileHeading: true,
    hyphenToSpace: true,
    documentRootPath: "docs",
    collapsed: true,
    collapseDepth: 2,
    capitalizeFirst: true,
    sortMenusByFrontmatterOrder: true,
    includeFolderIndexFile: true,
    debugPrint: true,
    convertSameNameSubFileToGroupIndexPage: true,
};

Expected behavior A clear and concise description of what you expected to happen.

I would expect the is-active has-active class to be injected when I click on the nav link

image

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

JurreBrandsenInfoSupport commented 4 months ago

Here is a minimal workaround that I found. This is done by removing the index from the link

import { generateSidebar } from "vitepress-sidebar";

interface Sidebar {
  text: string;
  items?: Sidebar[];
  collapsed?: boolean;
  link?: string;
}

const vitepressSidebarOptions = {
  documentRootPath: "docs",
  includeFolderIndexFile: true,
};

const sidebar = generateSidebar(vitepressSidebarOptions);

function removeIndexFromIndexFile(obj: Sidebar) {
  if (obj.hasOwnProperty("items")) {
    obj["items"]?.forEach((item: Sidebar) => {
      if (item.link?.includes("index")) {
        // remove the index.html from the link
        item.link = item.link.replace("index", "");
      }
      removeIndexFromIndexFile(item);
    });
  }
}

for (let item of sidebar as Iterable<Sidebar>) {
  removeIndexFromIndexFile(item);
}

export default sidebar;

This causes the sidebar to go from

[
  {
    "text": "01 test folder",
    "items": [
      {
        "text": "Api examples",
        "link": "/01-test-folder/api-examples"
      },
      {
        "text": "Index",
        "link": "/01-test-folder/index"
      },
      {
        "text": "Markdown examples",
        "link": "/01-test-folder/markdown-examples"
      }
    ]
  },
  {
    "text": "02 test folder",
    "items": [
      {
        "text": "Api examples",
        "link": "/02-test-folder/api-examples"
      },
      {
        "text": "Index",
        "link": "/02-test-folder/index"
      },
      {
        "text": "Markdown examples",
        "link": "/02-test-folder/markdown-examples"
      }
    ]
  },
  {
    "text": "Api examples",
    "link": "/api-examples"
  },
  {
    "text": "Markdown examples",
    "link": "/markdown-examples"
  }
]
==================================================

to

[
  {
    "text": "01 test folder",
    "items": [
      {
        "text": "Api examples",
        "link": "/01-test-folder/api-examples"
      },
      {
        "text": "Index",
        "link": "/01-test-folder/"
      },
      {
        "text": "Markdown examples",
        "link": "/01-test-folder/markdown-examples"
      }
    ]
  },
  {
    "text": "02 test folder",
    "items": [
      {
        "text": "Api examples",
        "link": "/02-test-folder/api-examples"
      },
      {
        "text": "Index",
        "link": "/02-test-folder/"
      },
      {
        "text": "Markdown examples",
        "link": "/02-test-folder/markdown-examples"
      }
    ]
  },
  {
    "text": "Api examples",
    "link": "/api-examples"
  },
  {
    "text": "Markdown examples",
    "link": "/markdown-examples"
  }
]
==================================================

image

As shown in the screenshot, the index now correctly gets the is-active class.

jooy2 commented 1 month ago

Hello! Thank you for your long patience.

I fixed a link inconsistency in index.md in the new version 1.24.1. This should fix the issue without writing any additional behavior. If you continue to see the issue, please open a new issue.

Thank you!