Blog sidebar active item is not highlighted

[zmogas]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

Blog section, left sidebar menu. On hover it highlights items, when clicked (blog page opened), highlight disappears.

Highlight still works in 2.0.0-beta.0 version, but all later versions - no.
We use latest docusaurus version: 2.0.0-beta.6. Using default preset-classic theme and double blog sections.

Have you read the Contributing Guidelines on issues?

Yes.

Steps to reproduce

(Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

Tried adding second blog section there. But failed. Copying my docusaurus configuration did not help. Sandbox configuration complained.)

Downgraded my used version to 2.0.0-beta.0, left sidebar highlight started working. Upgraded to 2.0.0-beta.6 - styles adjusted and active item highlight does not work.

Expected behavior

When clicking on blog item, it should remain active.

Actual behavior

Sidebar items highlight only on hover.

If I run docusaurus in local environment, highlight works. When I build and serve - highlight does not work. docusaurus site blog shows everything correctly.

I see problem in CSS declaration. Primary (highlighted) color is override with color-base. Order is important. Or active class value should include !important, then later declaration will not override.
Active item link has two classes: item-link and item-link-active. Both styles are merged. And both declare color. Later overrides first declaration.

See screenshot with active item selected:

https://docusaurus.io/blog/ in final css file first is declared sidebarItemLink, then sidebarItemLinkActive. The same order is when I run local development version. When I build, css classes are renamed and swapped places.

Your environment

• Public source code: -
• Public site URL: https://sdwc.dev.peplink.com/docs/changelog/2021/06/30/monthly-updates
• Docusaurus version used: 2.0.0-beta.6
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome 93.0.4577.63, Node.js v14.17.6
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Ubuntu 18.04.5 LTS

One blog is configured via presets:

  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          routeBasePath: '/',
          path: 'docs',
          sidebarPath: require.resolve('./sidebars.js')
        },
        blog: {
          showReadingTime: true,
          blogDescription: `${envConfig.title} Blog`,
          blogTitle: 'Blog',
          blogSidebarCount: 'ALL',
          feedOptions: {
            type: 'all'
          }
        },

another blog is configured via plugins:

  plugins: [
    [
      '@docusaurus/plugin-content-blog',
      {
        id: 'changelog',
        routeBasePath: 'changelog',
        path: './changelog',
        showReadingTime: false,
        blogDescription: `${envConfig.title} Changelog`,
        blogTitle: 'Changelog',
        blogSidebarCount: 'ALL',
        blogSidebarTitle: 'All changelogs',
        feedOptions: {
          type: 'all',
          title: `${envConfig.title} Changelog`,
          description: `${envConfig.title} Changelog`
        }
      }
    ],

I did not install separate blog plugin, just reusing built-in from @docusaurus/preset-classic.

[lex111]

@zmogas thanks for the bug report, will be fixed in the PR #5571.