Interactive right-hand toc

[azzaea]

Hello,

Thank you for providing this great theme- I'm using it to document a project, and have been getting positive responses.

One feature I like to ask about: is it possible to have the right side navigation (toc) responsive/interactive? I mean, for example, the font becomes bold (or changes color) when the user is reading/ scrolling to a certain section in the page?

I tried to add to the assests/scss/_sidebar-toc.scss file this content:

&.active {
          font-weight: $font-weight-bold; // Apply bold font weight to the active section
        }

(inspired by how the hover behavior seems programmed), but that did not work.

Any pointer for what to edit/add are highly appreciated.

Many thanks in advance, Azza

[fekete-robert]

The right-hand toc in docsy is static, so I don't think it ever becomes active, you'll need some javascript for that.

I have an open PR (it hasn't been merged yet) that generates the right-hand toc from javascript and marks the active element, you might want to check it out: https://github.com/google/docsy/pull/1049

[azzaea]

Thank you very much! Really appreciated the quick and guided response.

I will give it a try :)

[azzaea]

Hmmm...

I'm afraid I don't know how to make use of these file... I'm using docsy as a Hugo module, and my understanding is that I need to change where I like to customize. Consequently, I looked at the file affected by the #1049 , and copied them locally (except for the static/js/tocbot.min.js; as I put it in my assets/js/tocbot.min.js ). Once I created the main.scss file, the building failed with:

Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): SCSS processing failed: file "stdin", line 10, col 1: File to import not found or unreadable: support/bootstrap_vers_test. 
Built in 206 ms

I'm not sure how to work around this. Would you kindly advise?

Many thanks again, Azza

[fekete-robert]

Sorry for not getting back to you sooner.

I forgot that the PR has some differences compared to when you directly use the solution in a project.

You don't need to add the main.scss file to your project (because that would completely override the file from the theme), instead you can just add the @import "tocbot"; line to the assets/scss/_styles_project.scss file of your project (or create it if it doesn't exist, see https://www.docsy.dev/docs/adding-content/lookandfeel/#project-style-files). I hope this solves the issue, let me know if it doesn't.

[azzaea]

Many thanks, this actually works :)

PS: it is quite elegant too, appreciated :)

[fekete-robert]

Glad that you got it working :D