diff --git a/assets/controllers/navbar_controller.js b/assets/controllers/navbar_controller.js new file mode 100644 index 0000000..08e6df2 --- /dev/null +++ b/assets/controllers/navbar_controller.js @@ -0,0 +1,25 @@ +import { Controller } from '@hotwired/stimulus'; + +/* +* The following line makes this controller "lazy": it won't be downloaded until needed +* See https://github.com/symfony/stimulus-bridge#lazy-controllers +*/ +/* stimulusFetch: 'lazy' */ +export default class extends Controller { + inactiveStyles = "block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-orange-500 hover:bg-opacity-80"; + activeStyles = "block rounded-lg bg-orange-500 hover:bg-opacity-70 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-80 px-4 py-2 text-sm font-medium text-gray-50"; + + connect() { + console.log(window.location.pathname); + this.element.querySelectorAll('a:not(.nav-foot)').forEach(link => { + link.className = this.inactiveStyles; + if (window.location.pathname === (new URL(link.href)).pathname || window.location.pathname.startsWith( (new URL(link.href)).pathname + '/' ) ) { + link.className = this.activeStyles; + } + }); + } + + setActive() { + + } +} diff --git a/templates/components/NavBar.html.twig b/templates/components/NavBar.html.twig index ae12943..d6831cc 100644 --- a/templates/components/NavBar.html.twig +++ b/templates/components/NavBar.html.twig @@ -1,24 +1,19 @@ -