patch: active/inactive styles on navbar

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() {
+
+    }
+}

templates/components/NavBar.html.twig

@@ -1,24 +1,19 @@
-<nav {{ attributes }}  class="flex h-screen flex-col justify-between bg-cyan-950">
+<nav {{ attributes }} {{ stimulus_controller('navbar') }} {{ stimulus_action('navbar', 'setActive')}} class="flex h-screen flex-col justify-between bg-cyan-950">
     <div class="px-4 py-6">
         <ul class="mt-6 space-y-1">
             <li>
-                <a
+                <a href="{{ path('app_index') }}"
-                        href="{{ path('app_index') }}"
                    class="block rounded-lg
                          bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
-                         px-4 py-2 text-sm font-medium text-gray-50"
+                         px-4 py-2 text-sm font-medium text-gray-50">
-                >
                     Dashboard
                 </a>
             </li>
 
             <li>
                 <details class="group [&_summary::-webkit-details-marker]:hidden">
-                    <summary
+                    <summary class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60">
-                            class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60"
-                    >
                         <span class="text-sm font-medium">Downloads</span>
-
                         <span class="shrink-0 transition duration-300 group-open:-rotate-180">
               <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -34,22 +29,17 @@
               </svg>
             </span>
                     </summary>
-
                     <ul class="mt-2 space-y-1 px-4">
                         <li>
-                            <a
+                            <a href="{{ path('app_search') }}"
-                                    href="#"
+                               class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
-                                    class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
-                            >
                                 In Progress
                             </a>
                         </li>
 
                         <li>
-                            <a
+                            <a href="{{ path('app_search') }}"
-                                    href="#"
+                               class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
-                                    class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
-                            >
                                 Complete
                             </a>
                         </li>
@@ -58,10 +48,8 @@
             </li>
 
             <li>
-                <a
+                <a href="{{ path('app_media_preferences') }}"
-                        href="{{ path('app_media_preferences') }}"
+                   class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">
-                        class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
-                >
                     Preferences
                 </a>
             </li>
@@ -69,7 +57,7 @@
     </div>
 
     <div class="sticky inset-x-0 bottom-0 border-t border-orange-500">
-        <a href="#" class="flex items-center gap-2 p-4 bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60">
+        <a href="#" class="nav-foot flex items-center gap-2 p-4 bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60">
             <span class="rounded-full p-2 border-orange-500 border-2">
                 <twig:ux:icon name="ri:user-line" width="30" class="text-gray-50"/>
             </span>