feat: add navbar layout with some JS controls (with Alpine.js)

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

@@ -0,0 +1,22 @@
+<!-- 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
+>

crates/app/templates/layout/nav/desktop/notifications-button.html

@@ -0,0 +1,6 @@
+<button
+  type="button"
+  class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+>
+  {% include "layout/nav/notifications-icon.html" %}
+</button>

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

@@ -0,0 +1,73 @@
+<script type="text/javascript">
+  // This script is used to toggle the visibility of the profile dropdown
+  // when the user clicks on the profile button.
+  function toggleProfileDropdown() {
+    const profileDropdown = document.getElementById("profile-dropdown");
+    const isVisible = profileDropdown.getAttribute("data-visible") === "true";
+    profileDropdown.setAttribute("data-visible", !isVisible);
+    if (isVisible) {
+      // Leaving !
+      profileDropdown.classList.replace("scale-100", "scale-95");
+      profileDropdown.classList.replace("opacity-100", "opacity-0");
+      profileDropdown.classList.replace("ease-out", "ease-in");
+      profileDropdown.classList.replace("duration-200", "duration-75");
+    } else {
+      // Entering !
+      profileDropdown.classList.replace("scale-95", "scale-100");
+      profileDropdown.classList.replace("opacity-0", "opacity-100");
+      profileDropdown.classList.replace("ease-in", "ease-out");
+      profileDropdown.classList.replace("duration-75", "duration-200");
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const profileButton = document.getElementById("user-menu-button");
+    const profileDropdown = document.getElementById("profile-dropdown");
+    // Toggle on profile button click
+    profileButton.addEventListener("click", function () {
+      toggleProfileDropdown();
+    });
+    // Toggle on click outside of the dropdown
+    document.addEventListener("click", function (event) {
+      const isProfileDropdownVisible = profileDropdown.getAttribute("data-visible") === "true";
+      if (isProfileDropdownVisible && !profileDropdown.contains(event.target) && !profileButton.contains(event.target)) {
+        toggleProfileDropdown();
+      }
+    });
+  });
+</script>
+
+<div
+  class="opacity-0 absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+  role="menu"
+  id="profile-dropdown"
+  aria-orientation="vertical"
+  aria-labelledby="user-menu-button"
+  tabindex="-1"
+>
+  <!-- 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>

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

@@ -0,0 +1,23 @@
+<!-- Profile dropdown -->
+<div class="relative ml-3">
+  <div>
+    <button
+      type="button"
+      class="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+      id="user-menu-button"
+      aria-controls="profile-dropdown"
+      aria-expanded="false"
+      aria-haspopup="menu"
+    >
+      <span class="absolute -inset-1.5"></span>
+      <span class="sr-only">Open user menu</span>
+      <img
+        class="h-8 w-8 rounded-full"
+        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+        alt=""
+      />
+    </button>
+  </div>
+
+  {% include "layout/nav/desktop/profile-dropdown.html" %}
+</div>