Fix: Make sidebar bullet markers clickable

[SouparnaChatterjee]

Fixes #667

Changes done:

• Copied components/nav.html from the just-the-docs gem into _includes/components/nav.html to override the theme's default nav template.
• Wrapped a <span class="nav-bullet"> inside each nav-list-link anchor tag at all three levels (first, second, third) so the bullet is part of the clickable <a> element.
• Updated _sass/custom/custom.scss to remove the CSS list-style SVG bullets (replaced with list-style: none) and styled the new inline .nav-bullet spans instead.

Screenshots

Before: Bullet markers were decorative CSS list-style elements — not part of the link, not clickable.

Screen.Recording.2026-05-30.192123.mp4

After: Bullet markers are inside the <a> tag and fully clickable, navigating to the respective page.

Screen.Recording.2026-05-30.192158.mp4

✅️ By submitting this PR, I have verified the following

• Checked to see if a similar PR has already been opened 🤔️
• Reviewed the contributing guidelines 🔍️
• Sample preview link added (add after checks complete)
• Tried Squashing the commits into one

Summary by CodeRabbit

• New Features

  • Added a hierarchical, expandable sidebar navigation and client-side behavior so bullets/markers act like links.

• Style

  • Replaced SVG/marker-based bullets with custom bullet styling and pointer cursor for sidebar items.
  • Removed previous sticky header styling and tidied comment formatting.

• Chores

  • Added a deferred head script to enable the clickable-bullet behavior.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

This PR adds a hierarchical Jekyll include that renders first/second/third-level sidebar navigation, inserts a head script include for a new nav-bullets-clickable.js, adds that script which forwards clicks on .nav-list-item to the nested .nav-list-link, and includes a small stylesheet override setting .nav-list-item { cursor: pointer } (plus a minor progress-bar comment reformat).

Possibly related PRs

• CircuitVerse/Interactive-Book#787: Overlaps with this PR by modifying .main-header sticky/positioning rules in _sass/custom/custom.scss.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: making sidebar bullet markers clickable, which is the primary objective of this pull request.
Linked Issues check	✅ Passed	The PR comprehensively addresses Issue #667 by making sidebar bullets clickable through CSS updates, template overrides, and JavaScript click delegation.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing sidebar bullet clickability; removal of sticky header CSS appears to be cleanup of unrelated code rather than new scope addition.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

assets/js/nav-bullets-clickable.js (1)

10-10: 💤 Low value

Consider moving cursor styling to CSS.

The cursor: pointer style is currently set via inline JavaScript. This could be defined in the stylesheet instead for better separation of concerns and maintainability.

♻️ Optional: move cursor style to CSS

In _sass/custom/custom.scss, add:

.nav-list-item {
  cursor: pointer;
}

Then remove line 10 from this script:

     });
-    item.style.cursor = "pointer";
   });

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 069d66ca-1908-4d85-8b0e-925a3faf0ddc

📥 Commits

Reviewing files that changed from the base of the PR and between fa390f1 and 106db8f.

📒 Files selected for processing (4)

• _includes/components/nav.html
• _includes/head_custom.html
• _sass/custom/custom.scss
• assets/js/nav-bullets-clickable.js

✅ Files skipped from review due to trivial changes (1)

• _sass/custom/custom.scss

[SouparnaChatterjee]

the final commit makes UI similar to what was earlier

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

_includes/head_custom.html (1)

7-7: ⚡ Quick win

Add defer attribute for non-blocking script loading.

The new script doesn't have a defer attribute, unlike the Font Awesome scripts on lines 1-2. This blocks HTML parsing and delays page rendering.

⚡ Proposed fix to add defer

-<script src="/assets/js/nav-bullets-clickable.js"></script>
+<script defer src="/assets/js/nav-bullets-clickable.js"></script>

_sass/custom/custom.scss (2)

206-208: ⚡ Quick win

Remove duplicate list-style: none declaration.

Both selectors compile to the same CSS rule (.nav-list .nav-list-item.active { list-style: none; }). The declaration on lines 216-218 is redundant.

♻️ Proposed fix to remove duplication

   .nav-list-item.active {
-    list-style: none;
   }

Also applies to: 216-218

---

320-320: ⚡ Quick win

Add empty line before comment.

Stylelint rule scss/double-slash-comment-empty-line-before requires an empty line before comments for consistency.

📝 Proposed fix

 }
+
 // Fix: make sidebar bullet markers clickable (Issue `#667`)
 .nav-list-item {

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a2cdfae5-b45a-4451-9c6f-e1d20bfb9918

📥 Commits

Reviewing files that changed from the base of the PR and between 132417f and 9998107.

📒 Files selected for processing (4)

• _includes/components/nav.html
• _includes/head_custom.html
• _sass/custom/custom.scss
• assets/js/nav-bullets-clickable.js

🚧 Files skipped from review as they are similar to previous changes (1)

• assets/js/nav-bullets-clickable.js

[SouparnaChatterjee]

🧹 Nitpick comments (1)

assets/js/nav-bullets-clickable.js (1)> 10-10: 💤 Low value

Consider moving cursor styling to CSS.
The cursor: pointer style is currently set via inline JavaScript. This could be defined in the stylesheet instead for better separation of concerns and maintainability.

♻️ Optional: move cursor style to CSS
In _sass/custom/custom.scss, add:

.nav-list-item {
  cursor: pointer;
}

Then remove line 10 from this script:

     });
-    item.style.cursor = "pointer";
   });

ℹ️ Review info

cursor: pointer is already handled via .nav-list-item { cursor: pointer } in _sass/custom/custom.scss. No JS cursor styling is present in nav-bullets-clickable.js.

[Me-Priyank]

@Nihal4777 LGTM

[Me-Priyank]

should be removed