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

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

@@ -0,0 +1,43 @@
+<!-- Mobile menu button -->
+<button
+  type="button"
+  class="relative inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+  aria-controls="mobile-menu"
+  x-on:click="menuOpen = ! menuOpen"
+  x-bind:aria-expanded="menuOpen"
+>
+  <span class="absolute -inset-0.5"></span>
+  <span class="sr-only">Open main menu</span>
+  <!-- Menu open: "hidden", Menu closed: "block" -->
+  <svg
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    x-bind:class="menuOpen ? 'hidden' : 'block'"
+    x-bind:aria-hidden="menuOpen"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+    />
+  </svg>
+  <!-- Menu open: "block", Menu closed: "hidden" -->
+  <svg
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    x-bind:class="menuOpen ? 'block' : 'hidden'"
+    x-bind:aria-hidden="! menuOpen"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+</button>

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

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

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

@@ -0,0 +1,6 @@
+<button
+  type="button"
+  class="relative ml-auto flex-shrink-0 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/mobile/profile-items.html

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

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

@@ -0,0 +1,11 @@
+<div class="flex-shrink-0">
+  <img
+    class="h-10 w-10 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=""
+  />
+</div>
+<div class="ml-3">
+  <div class="text-base font-medium text-gray-800">Tom Cook</div>
+  <div class="text-sm font-medium text-gray-500">tom@example.com</div>
+</div>