kaze 0.4.0 → 0.6.0

data/stubs/hotwire/app/controllers/auth/authenticated_session_controller.rb

@@ -1,29 +1,32 @@
 class Auth::AuthenticatedSessionController < ApplicationController
-  skip_authentication only: %i[new create]
+  include RedirectIfAuthenticated
 
-  layout "guest"
+  skip_authenticate only: %i[new create]
+  skip_redirect_if_authenticated only: %i[destroy]
+
+  layout 'guest'
 
   def new
     @form = Auth::LoginForm.new
 
-    render "auth/login"
+    render 'auth/login'
   end
 
   def create
     @form = Auth::LoginForm.new params.permit(:email, :password)
 
-    user = @form.authenticate
-
-    return render "auth/login", status: :unprocessable_entity if user.nil?
+    @form.authenticate
 
-    login user
+    return render 'auth/login', status: :unprocessable_entity if Current.auth.user.nil?
 
     redirect_to dashboard_path
   end
 
   def destroy
-    logout
+    Current.auth.logout
+
+    reset_session
 
-    redirect_to login_path
+    redirect_to '/'
   end
 end

data/stubs/hotwire/app/controllers/auth/new_password_controller.rb

@@ -1,19 +1,21 @@
 class Auth::NewPasswordController < ApplicationController
-  skip_authentication
+  include RedirectIfAuthenticated
 
-  layout "guest"
+  skip_authenticate
+
+  layout 'guest'
 
   def new
     @form = Auth::NewPasswordForm.new params.permit(:token)
 
-    render "auth/reset_password"
+    render 'auth/reset_password'
   end
 
   def create
     @form = Auth::NewPasswordForm.new params.permit(:token, :password, :password_confirmation)
 
-    return redirect_to login_path, flash: { status: "Your password has been reset." } if @form.reset?
+    return redirect_to login_path, flash: { status: 'Your password has been reset.' } if @form.reset?
 
-    render "auth/reset_password", status: :unprocessable_entity
+    render 'auth/reset_password', status: :unprocessable_entity
   end
 end

data/stubs/hotwire/app/controllers/auth/password_reset_link_controller.rb

@@ -1,19 +1,21 @@
 class Auth::PasswordResetLinkController < ApplicationController
-  skip_authentication
+  include RedirectIfAuthenticated
 
-  layout "guest"
+  skip_authenticate
+
+  layout 'guest'
 
   def new
     @form = Auth::SendPasswordResetLinkForm.new
 
-    render "auth/forgot_password"
+    render 'auth/forgot_password'
   end
 
   def create
     @form = Auth::SendPasswordResetLinkForm.new params.permit(:email)
 
-    return redirect_back_or_to password_request_path, flash: { status: "We have emailed your password reset link." } if @form.send_reset_link?
+    return redirect_back_or_to password_request_path, flash: { status: 'We have emailed your password reset link.' } if @form.send_reset_link?
 
-    render "auth/forgot_password", status: :unprocessable_entity
+    render 'auth/forgot_password', status: :unprocessable_entity
   end
 end

data/stubs/hotwire/app/controllers/auth/registered_user_controller.rb

@@ -1,22 +1,24 @@
 class Auth::RegisteredUserController < ApplicationController
-  skip_authentication
+  include RedirectIfAuthenticated
 
-  layout "guest"
+  skip_authenticate
+
+  layout 'guest'
 
   def new
     @form = Auth::RegisterForm.new
 
-    render "auth/register"
+    render 'auth/register'
   end
 
   def create
     @form = Auth::RegisterForm.new params.permit(:name, :email, :password, :password_confirmation)
 
-    return render "auth/register", status: :unprocessable_entity if @form.invalid?
+    return render 'auth/register', status: :unprocessable_entity if @form.invalid?
 
     user = User.create(name: @form.name, email: @form.email, password: @form.password)
 
-    login user
+    Current.auth.login user
 
     redirect_to dashboard_path
   end

data/stubs/hotwire/app/controllers/concerns/authenticate.rb

@@ -2,33 +2,18 @@ module Authenticate
   extend ActiveSupport::Concern
 
   included do
-    before_action :authenticate_user!
+    before_action :authenticate!
   end
 
   class_methods do
-    def skip_authentication(**options)
-      skip_before_action :authenticate_user!, **options
+    def skip_authenticate(**options)
+      skip_before_action :authenticate!, **options
     end
   end
 
   private
 
-  def authenticate_user!
-    if user = User.find_by(id: session[:user_id])
-      Current.user = user
-    else
-      redirect_to login_path
-    end
-  end
-
-  def login(user)
-    Current.user = user
-    reset_session
-    session[:user_id] = user.id
-  end
-
-  def logout
-    Current.user = nil
-    reset_session
+  def authenticate!
+    redirect_to login_path unless Current.auth.check?
   end
 end

data/stubs/hotwire/app/controllers/concerns/redirect_if_authenticated.rb

@@ -0,0 +1,19 @@
+module RedirectIfAuthenticated
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :redirect_if_authenticated!
+  end
+
+  class_methods do
+    def skip_redirect_if_authenticated(**options)
+      skip_before_action :redirect_if_authenticated!, **options
+    end
+  end
+
+  private
+
+  def redirect_if_authenticated!
+    redirect_to dashboard_path if Current.auth.check?
+  end
+end

data/stubs/hotwire/app/controllers/concerns/set_current_auth.rb

@@ -0,0 +1,9 @@
+module SetCurrentAuth
+  extend ActiveSupport::Concern
+
+  included do
+    before_action do
+      Current.auth = Auth.new('web', session)
+    end
+  end
+end

data/stubs/hotwire/app/controllers/password_controller.rb

@@ -2,10 +2,10 @@ class PasswordController < ApplicationController
   def update
     @update_password_form = UpdatePasswordForm.new params.permit(:current_password, :password, :password_confirmation)
 
-    return render partial: "profile/partials/update_password_form", status: :unprocessable_entity if @update_password_form.invalid?
+    return render partial: 'profile/partials/update_password_form', status: :unprocessable_entity if @update_password_form.invalid?
 
-    Current.user.update(password: @update_password_form.password)
+    Current.auth.user.update(password: @update_password_form.password)
 
-    redirect_back_or_to profile_edit_path, flash: { status: "password-updated" }
+    redirect_back_or_to profile_edit_path, flash: { status: 'password-updated' }
   end
 end

data/stubs/hotwire/app/controllers/profile_controller.rb

@@ -1,33 +1,35 @@
 class ProfileController < ApplicationController
   def edit
-    @update_profile_information_form = UpdateProfileInformationForm.new(name: Current.user.name, email: Current.user.email)
+    @update_profile_information_form = UpdateProfileInformationForm.new(name: Current.auth.user.name, email: Current.auth.user.email)
     @update_password_form = UpdatePasswordForm.new
     @delete_user_form = DeleteUserForm.new
 
-    render "profile/edit"
+    render 'profile/edit'
   end
 
   def update
     @update_profile_information_form = UpdateProfileInformationForm.new params.permit(:name, :email)
 
-    return render partial: "profile/partials/update_profile_information_form", status: :unprocessable_entity if @update_profile_information_form.invalid?
+    return render partial: 'profile/partials/update_profile_information_form', status: :unprocessable_entity if @update_profile_information_form.invalid?
 
-    Current.user.update(name: @update_profile_information_form.name, email: @update_profile_information_form.email)
+    Current.auth.user.update(name: @update_profile_information_form.name, email: @update_profile_information_form.email)
 
-    redirect_to profile_edit_path, flash: { status: "profile-updated" }
+    redirect_to profile_edit_path, flash: { status: 'profile-updated' }
   end
 
   def destroy
     @delete_user_form = DeleteUserForm.new params.permit(:password)
 
-    return render partial: "profile/partials/delete_user_form", status: :unprocessable_entity if @delete_user_form.invalid?
+    return render partial: 'profile/partials/delete_user_form', status: :unprocessable_entity if @delete_user_form.invalid?
 
-    user = Current.user
+    user = Current.auth.user
 
-    logout
+    Current.auth.logout
 
     user.delete
 
-    redirect_to "/"
+    reset_session
+
+    redirect_to '/'
   end
 end

data/stubs/hotwire/app/controllers/welcome_controller.rb

@@ -1,5 +1,5 @@
 class WelcomeController < ApplicationController
-  skip_authentication
+  skip_authenticate
 
   def index
     render layout: nil

data/stubs/hotwire/app/javascript/application.js

@@ -1,8 +1,8 @@
-import "@hotwired/turbo-rails"
+import '@hotwired/turbo-rails'
 
-import Alpine from "alpinejs"
+import Alpine from 'alpinejs'
 window.Alpine = Alpine
 
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener('DOMContentLoaded', function (event) {
   window.Alpine.start()
 })

data/stubs/hotwire/app/views/auth/forgot_password.html.erb

@@ -1,23 +1,18 @@
 <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-    Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
+  Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
 </div>
-
 <!-- Session Status -->
 <%= render(AuthSessionStatusComponent.new({ class: "mb-4", status: flash[:status] })) %>
-
 <%= form_with model: @form, url: password_request_path do |form| %>
-    <!-- Email Address -->
-    <div>
-        <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
-
-        <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autofocus: true, autocomplete: "username" })) %>
-
-        <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
-    </div>
-
-    <div class="flex items-center justify-end mt-4">
-        <%= render(PrimaryButtonComponent.new) do %>
-            Email Password Reset Link
-        <% end %>
-    </div>
+  <!-- Email Address -->
+  <div>
+    <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
+    <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autofocus: true, autocomplete: "username" })) %>
+    <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
+  </div>
+  <div class="flex items-center justify-end mt-4">
+    <%= render(PrimaryButtonComponent.new) do %>
+      Email Password Reset Link
+    <% end %>
+  </div>
 <% end %>

data/stubs/hotwire/app/views/auth/login.html.erb

@@ -1,25 +1,18 @@
 <!-- Session Status -->
 <%= render(AuthSessionStatusComponent.new({ class: "mb-4", status: flash[:status] })) %>
-
 <%= form_with model: @form, url: login_path do |form| %>
   <!-- Email Address -->
   <div>
     <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
-
     <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autofocus: true, autocomplete: "username" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
   </div>
-
   <!-- Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password", value: "Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password", class: "block mt-1 w-full", type: "password", name: "password", required: true, autocomplete: "current-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password] })) %>
   </div>
-
   <!-- Remember Me -->
   <div class="block mt-4">
     <label for="remember_me" class="inline-flex items-center">
@@ -27,12 +20,10 @@
       <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
     </label>
   </div>
-
   <div class="flex items-center justify-end mt-4">
     <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= password_request_path %>">
       Forgot your password?
     </a>
-
     <%= render(PrimaryButtonComponent.new({ class: "ms-4" })) do %>
       Login
     <% end %>

data/stubs/hotwire/app/views/auth/register.html.erb

@@ -2,44 +2,31 @@
   <!-- Name -->
   <div>
     <%= render(InputLabelComponent.new({ for: "name", value: "Name" })) %>
-
     <%= render(TextInputComponent.new({ id: "name", class: "block mt-1 w-full", type: "text", name: "name", value: @form.name, required: true, autofocus: true, autocomplete: "name" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:name] })) %>
   </div>
-
   <!-- Email Address -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
-
     <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autocomplete: "username" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
   </div>
-
   <!-- Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password", value: "Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password", class: "block mt-1 w-full", type: "password", name: "password", required: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password] })) %>
   </div>
-
   <!-- Confirm Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password_confirmation", value: "Confirm Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password_confirmation", class: "block mt-1 w-full", type: "password", name: "password_confirmation", required: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password_confirmation] })) %>
   </div>
-
   <div class="flex items-center justify-end mt-4">
     <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= login_path %>">
       Already registered?
     </a>
-
     <%= render(PrimaryButtonComponent.new({ class: "ms-4" })) do %>
       Register
     <% end %>

data/stubs/hotwire/app/views/auth/reset_password.html.erb

@@ -1,25 +1,18 @@
 <%= form_with model: @form, url: password_store_path do |form| %>
   <!-- Password Reset Token -->
   <input type="hidden" name="token" value="<%= @form.token %>">
-
   <!-- Password -->
   <div>
     <%= render(InputLabelComponent.new({ for: "password", value: "Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password", class: "block mt-1 w-full", type: "password", name: "password", required: true, autofocus: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password] })) %>
   </div>
-
   <!-- Confirm Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password_confirmation", value: "Confirm Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password_confirmation", class: "block mt-1 w-full", type: "password", name: "password_confirmation", required: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password_confirmation] })) %>
   </div>
-
   <div class="flex items-center justify-end mt-4">
     <%= render(PrimaryButtonComponent.new) do %>
       Reset Password

data/stubs/hotwire/app/views/dashboard/index.html.erb

@@ -1,15 +1,14 @@
 <% content_for(:header) do %>
-    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-        Dashboard
-    </h2>
+  <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+    Dashboard
+  </h2>
 <% end %>
-
 <div class="py-12">
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-            <div class="p-6 text-gray-900 dark:text-gray-100">
-                You're logged in!
-            </div>
-        </div>
+  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+      <div class="p-6 text-gray-900 dark:text-gray-100">
+        You're logged in!
+      </div>
     </div>
+  </div>
 </div>

data/stubs/hotwire/app/views/layouts/_navigation.html.erb

@@ -1,92 +1,82 @@
 <nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
-    <!-- Primary Navigation Menu -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-16">
-            <div class="flex">
-                <!-- Logo -->
-                <div class="shrink-0 flex items-center">
-                    <a href="<%= dashboard_path %>">
-                        <%= render(ApplicationLogoComponent.new({ class: "block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" })) %>
-                    </a>
-                </div>
-
-                <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                    <%= render(NavLinkComponent.new({ href: dashboard_path })) do %>
-                        Dashboard
-                    <% end %>
-                </div>
-            </div>
-
-            <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ms-6">
-                <%= render DropdownComponent.new do |component| %>
-                    <% component.with_trigger(classes: "") do %>
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
-                            <div><%= Current.user.name %></div>
-
-                            <div class="ms-1">
-                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                        </button>
-                    <% end %>
-
-                    <%= render(DropdownLinkComponent.new({ href: profile_edit_path })) do %>
-                        Profile
-                    <% end %>
-
-                    <!-- Authentication -->
-                    <form method="POST" action="<%= logout_path %>">
-                        <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
-                        <%= render(DropdownLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit();" })) do %>
-                            Log Out
-                        <% end %>
-                    </form>
-                <% end %>
-            </div>
-
-            <!-- Hamburger -->
-            <div class="-me-2 flex items-center sm:hidden">
-                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
-                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
+  <!-- Primary Navigation Menu -->
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between h-16">
+      <div class="flex">
+        <!-- Logo -->
+        <div class="shrink-0 flex items-center">
+          <a href="/">
+            <%= render(ApplicationLogoComponent.new({ class: "block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" })) %>
+          </a>
         </div>
-    </div>
-
-    <!-- Responsive Navigation Menu -->
-    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
-        <div class="pt-2 pb-3 space-y-1">
-            <%= render(ResponsiveNavLinkComponent.new({ href: dashboard_path })) do %>
-                Dashboard
-            <% end %>
-        </div>
-
-        <!-- Responsive Settings Options -->
-        <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
-            <div class="px-4">
-                <div class="font-medium text-base text-gray-800 dark:text-gray-200"><%= Current.user.name %></div>
-                <div class="font-medium text-sm text-gray-500"><%= Current.user.email %></div>
-            </div>
-
-            <div class="mt-3 space-y-1">
-                <%= render(ResponsiveNavLinkComponent.new({ href: profile_edit_path })) do %>
-                    Profile
-                <% end %>
-
-                <!-- Authentication -->
-                <form method="POST" action="<%= logout_path %>">
-                    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
-                    <%= render(ResponsiveNavLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit();" })) do %>
-                        Log Out
-                    <% end %>
-                </form>
-            </div>
+        <!-- Navigation Links -->
+        <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
+          <%= render(NavLinkComponent.new({ href: dashboard_path, active: current_page?(dashboard_path) })) do %>
+            Dashboard
+          <% end %>
         </div>
+      </div>
+      <!-- Settings Dropdown -->
+      <div class="hidden sm:flex sm:items-center sm:ms-6">
+        <%= render DropdownComponent.new do |component| %>
+          <% component.with_trigger(classes: "") do %>
+            <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
+              <div><%= Current.auth.user.name %></div>
+              <div class="ms-1">
+                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            </button>
+          <% end %>
+          <%= render(DropdownLinkComponent.new({ href: profile_edit_path })) do %>
+            Profile
+          <% end %>
+          <!-- Authentication -->
+          <form method="POST" action="<%= logout_path %>">
+            <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+            <%= render(DropdownLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit()" })) do %>
+              Log Out
+            <% end %>
+          </form>
+        <% end %>
+      </div>
+      <!-- Hamburger -->
+      <div class="-me-2 flex items-center sm:hidden">
+        <button x-on:click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
+          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+            <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Responsive Navigation Menu -->
+  <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
+    <div class="pt-2 pb-3 space-y-1">
+      <%= render(ResponsiveNavLinkComponent.new({ href: dashboard_path, active: current_page?(dashboard_path) })) do %>
+        Dashboard
+      <% end %>
+    </div>
+    <!-- Responsive Settings Options -->
+    <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
+      <div class="px-4">
+        <div class="font-medium text-base text-gray-800 dark:text-gray-200"><%= Current.auth.user.name %></div>
+        <div class="font-medium text-sm text-gray-500"><%= Current.auth.user.email %></div>
+      </div>
+      <div class="mt-3 space-y-1">
+        <%= render(ResponsiveNavLinkComponent.new({ href: profile_edit_path })) do %>
+          Profile
+        <% end %>
+        <!-- Authentication -->
+        <form method="POST" action="<%= logout_path %>">
+          <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+          <%= render(ResponsiveNavLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit()" })) do %>
+            Log Out
+          <% end %>
+        </form>
+      </div>
     </div>
+  </div>
 </nav>