feat: make Nav and Profile menu dynamic

crates/app/templates/layout/nav/desktop/menu-items.html

@@ -1,22 +1,9 @@
-<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
-<a
-  href="#"
-  class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900"
-  aria-current="page"
-  >Dashboard</a
->
-<a
-  href="#"
-  class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
-  >Team</a
->
-<a
-  href="#"
-  class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
-  >Projects</a
->
-<a
-  href="#"
-  class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
-  >Calendar</a
+<div
+  id="nav-menu-desktop"
+  hx-get="/nav/menu?mobile=false"
+  hx-target="this"
+  hx-trigger="load"
+  hx-swap="outerHTML"
 >
+  Chargement ...
+</div>

crates/app/templates/layout/nav/desktop/profile-dropdown.html

@@ -10,29 +10,13 @@
   x-cloak
   x-transition
 >
-  <!-- Active: "bg-gray-100", Not Active: "" -->
-  <a
-    href="#"
-    class="block px-4 py-2 text-sm text-gray-700"
-    role="menuitem"
-    tabindex="-1"
-    id="user-menu-item-0"
-    >Your Profile</a
-  >
-  <a
-    href="#"
-    class="block px-4 py-2 text-sm text-gray-700"
-    role="menuitem"
-    tabindex="-1"
-    id="user-menu-item-1"
-    >Settings</a
-  >
-  <a
-    href="#"
-    class="block px-4 py-2 text-sm text-gray-700"
-    role="menuitem"
-    tabindex="-1"
-    id="user-menu-item-2"
-    >Sign out</a
+  <div
+    id="profile-menu-desktop"
+    hx-get="/profile/menu?mobile=false"
+    hx-target="this"
+    hx-trigger="load"
+    hx-swap="outerHTML"
   >
+    Chargement ...
+  </div>
 </div>

crates/app/templates/layout/nav/mobile/menu-items.html

@@ -1,22 +1,9 @@
-<!-- Current: "border-indigo-500 bg-indigo-50 text-indigo-700", Default: "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800" -->
-<a
-  href="#"
-  class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700"
-  aria-current="page"
-  >Dashboard</a
->
-<a
-  href="#"
-  class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
-  >Team</a
->
-<a
-  href="#"
-  class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
-  >Projects</a
->
-<a
-  href="#"
-  class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
-  >Calendar</a
+<div
+  id="nav-menu-mobile"
+  hx-get="/nav/menu?mobile=true"
+  hx-target="this"
+  hx-trigger="load"
+  hx-swap="outerHTML"
 >
+  Chargement ...
+</div>

crates/app/templates/layout/nav/mobile/profile-items.html

@@ -1,15 +1,9 @@
-<a
-  href="#"
-  class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
-  >Your Profile</a
->
-<a
-  href="#"
-  class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
-  >Settings</a
->
-<a
-  href="#"
-  class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
-  >Sign out</a
+<div
+  id="profile-menu-mobile"
+  hx-get="/profile/menu?mobile=true"
+  hx-target="this"
+  hx-trigger="load"
+  hx-swap="outerHTML"
 >
+  Chargement ...
+</div>

crates/app/templates/layout/nav/nav-menu-items.html

@@ -0,0 +1,9 @@
+{% for item in items %}
+  <a
+    href="#{{ item.id }}"
+    class="{{ Self::get_classes(self, item.current) }}"
+    aria-current="{% if item.current %}page{% endif %}"
+  >
+    {{ item.label }}
+  </a>
+{% endfor %}

crates/app/templates/layout/nav/profile-menu-items.html

@@ -0,0 +1,11 @@
+{% for item in items %}
+  <a
+    href="#{{ item.id }}"
+    class="{{ Self::get_classes(self, item.current) }}"
+    role="menuitem"
+    tabindex="-1"
+    id="{{ item.id }}"
+  >
+    {{ item.label }}
+  </a>
+{% endfor %}