docsify-themeable
docsify-themeable copied to clipboard
expand/collapse icons in the sidebar not working when external link present
We want to use a sidebar like https://github.com/GoogleContainerTools/kpt-functions-catalog/pull/605/files#diff-b8dd38f16c2e1d175b940404cbb1e048a3dfb79e423890a2aa94dd188ae4647b which is generated from https://raw.githubusercontent.com/GoogleContainerTools/kpt/main/site/sidebar.md.
The issue is when external links present, the expand/collapse icons won't show and the inactive part are not collapsed due to misting class=inactive
.
Please let me know if you need more information. I'm not an expert in front-end stuff, if I misunderstood something, please let me know. Thanks!
Hi @mengqiy.
Happy to help. There are three important things to consider:
- The HTML structure and class name assignments are handled by docsify, not docsify-themeable. Docsify-themeable does include a few fixes via plugins (see here) that modify the HTML structure generated by docsify, but ideally this wouldn't be necessary since docsify-themeable is intended to be a theme and not a way to alter docsify's output.
- There needs to be a way to programmatically determine which external links should display an expand/collapse toggle. Is it all links in the sidebar, only the links that reference
https://kpt.dev/
, or some other pattern? Are there exceptions to consider? - The good news is that there are many ways to address your issue. If we determine a fix that may be helpful for other docsify/docsify-themeable users, we can add the fix to a new version. If your needs are unique, we can explore writing a plugin (it's easy), adding custom CSS, or discuss modifying your sidebar auto-generating script to output HTML instead of markdown as a last resort. Point is, we'll figure it out. :)
Sorry for the late reply.
The behavior I expect: Whenever an item in the sidebar hierarchy has children items, it should display an expand/collapse toggle. It should NOT treat it differently depending on if it links to a local path or a external link.
# for kpt.dev
- [foo](foo/) # <========= should display an expand/collapse toggle here
- [foo child](foo/child/)
- [bar](https://catalog.kpt.dev/bar/ ":target=_self") # <========= should display an expand/collapse toggle here
- [bar child](https://catalog.kpt.dev/bar/child/ ":target=_self")
- [baz](baz/)
# for catalog.kpt.dev
- [foo](https://kpt.dev/foo/ ":crossorgin :target=_self") # <========= should display an expand/collapse toggle here
- [foo child](https://kpt.dev/foo/child/ ":crossorgin :target=_self")
- [bar](bar/ ":target=_self") # <========= should display an expand/collapse toggle here
- [bar child](bar/child/ ":target=_self")
- [baz](https://kpt.dev/baz/ ":crossorgin :target=_self")
cc: @etefera
Hi @mengqiy --
Been quite a while on this one. :)
I checked out https://kpt.dev and it looks like you've worked your way around this issue. Closing this issue for now, but happy to work through this if you're still interested. Thx!