search

plenti-themes / compendium

https://plenti-themes.github.io/compendium/
Apache License 2.0
3 stars 1 forks source link

Accented underline for active pages in Navmenu #1

Closed jamestagal closed 2 years ago

jamestagal commented 2 years ago

Hi @roobyz

I have been thinking about adding a persistent underline for active pages for a while now but don't know how to achieve it. At present the accented underlines the page (route) when hovering which is nice but I feel that a user might get lost after clicking on a page.. because there is no visual clue to which page they are currently on after clicking it. But keeping that accented underline on the current route when clicked would be really useful I think. And for smaller screens when the hamburger menu is visible, I can add conditional logic with media query to display the name of the page in text.

Please consider adding this feature to your theme. Best regards, Ben

roobyz commented 2 years ago

Hi @jamestagal

I had actually included the style code already set for this (style/global.svelte), but forgot to implement in the template. Pretty minor tweaks to enable. Only had to update html.svelte and navbar.svelte so that I could include something like:

<span class="navmenu{content.path == page.path ? ' active' : ''}"

to enable the active CSS class.

You can pull the changes from the latest template.

Cheers, Roberto

jamestagal commented 2 years ago

Thanks @roobyz
Awesome! I need to catch up now! I'm still working on getting your Jan 18th commits in :) Thanks again.