chore: dropdown (and items) view component for navbar

app/components/navbar/component.rb

@@ -2,4 +2,12 @@
 
 class Navbar::Component < ApplicationViewComponent
   renders_many :right_sections
+
+  def dark_mode_switch
+    render(Navbar::DarkModeSwitch::Component.new)
+  end
+
+  def account_selector(current_user:, current_account:)
+    render(Navbar::AccountSelector::Component.new(current_user:, current_account:))
+  end
 end

app/components/navbar/dark_mode_switch/component.html.erb

@@ -0,0 +1,4 @@
+<button data-controller="dark-mode-switcher" data-action="click->dark-mode-switcher#toggle">
+  <i class="fa fa-lightbulb hidden dark:inline"></i>
+  <i class="fa fa-moon inline dark:hidden"></i>
+</button>

app/components/navbar/dark_mode_switch/component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class Navbar::DarkModeSwitch::Component < ApplicationViewComponent
+  # with_collection_parameter :dark_mode_switch
+end

app/components/navbar/dark_mode_switch/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Navbar::DarkModeSwitch::Preview < ApplicationViewComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+  end
+end

app/components/navbar/dropdown/component.html.erb

@@ -1,6 +1,7 @@
 <div data-controller="dropdown" class="dropdown relative">
-  <button data-action="dropdown#toggle click@window->dropdown#hide" class="inline-flex items-center">
-    <%= custom_content || label %> <i class="fa fa-caret-down ml-2"></i>
+  <button data-action="dropdown#toggle click@window->dropdown#hide" class="flex items-center">
+    <%= custom_content || label %>
+    <% if chevron %><i class="fa fa-caret-down ml-2"></i><% end %>
   </button>
   <div
     class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"

app/components/navbar/dropdown/component.rb

@@ -2,5 +2,10 @@
 
 class Navbar::Dropdown::Component < ApplicationViewComponent
   option :label, default: -> { "Dropdown" }, required: false
+  option :chevron, default: -> { true }, required: false
   renders_one :custom_content
+
+  def item(**)
+    render(Navbar::Dropdown::Item::Component.new(**))
+  end
 end

app/components/navbar/dropdown/item/component.html.erb

@@ -0,0 +1,4 @@
+<%= link_to path, class: "flex items-center justify-between px-4 py-2.5 hover:bg-background" do %>
+  <span><%= label %></span>
+  <i class="<%= icon %> w-3 h-3 float-right"></i>
+<% end %>

app/components/navbar/dropdown/item/component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Navbar::Dropdown::Item::Component < ApplicationViewComponent
+  option :label, default: -> { "Dropdown item" }
+  option :icon, optional: true
+  option :path
+end

app/components/navbar/dropdown/item/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Navbar::Dropdown::Item::Preview < ApplicationViewComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+  end
+end

app/views/partials/_navbar.html.erb

@@ -1,14 +1,6 @@
 <%= navbar do |navbar| %>
   <%= render "partials/navbars/logo" %>
-
   <nav class="flex gap-x-8">
     <%= user_signed_in? ? render("partials/navbars/protected", navbar:) : render("partials/navbars/public", navbar:) %>
   </nav>
-
-  <% navbar.with_right_section do %>
-    <button data-controller="dark-mode-switcher" data-action="click->dark-mode-switcher#toggle">
-      <i class="fa fa-lightbulb hidden dark:inline"></i>
-      <i class="fa fa-moon inline dark:hidden"></i>
-    </button>
-  <% end %>
 <% end %>

app/views/partials/navbars/_protected.html.erb

@@ -1,6 +1,18 @@
 <%= link_to "Dashboard", dashboard_path %>
 
 <% navbar.with_right_section do %>
-  <%= render(Navbar::AccountSelector::Component.new(current_user:, current_account:)) if onboarded? %>
-  <%= button_to "Sign out", destroy_user_session_path, method: :delete %>
+  <%= navbar.account_selector(current_user:, current_account:) if onboarded? %>
+
+  <%= render(Navbar::Dropdown::Component.new(chevron: false)) do |dropdown| %>
+    <% dropdown.with_custom_content do %>
+      <i class="fa fa-gear"></i>
+    <% end %>
+    <%= dropdown.item(label: "Edit profile", icon: "fa fa-user", path: "#") %>
+    <%= dropdown.item(label: "Change password", icon: "fa fa-key", path: edit_user_registration_path) %>
+  <% end %>
+
+  <%= navbar.dark_mode_switch %>
+  <%= button_to destroy_user_session_path, method: :delete, class: "button" do %>
+    <i class="fa fa-sign-out text-rose-400"></i>
+  <% end %>
 <% end %>

app/views/partials/navbars/_public.html.erb

@@ -7,4 +7,5 @@
   <% navbar.with_right_section do %>
     <%= link_to "Sign in", new_user_session_path, class: "hover:text-primary" %>
     <%= link_to "Create account", new_user_registration_path, class: "hover:text-primary" %>
+    <%= navbar.dark_mode_switch %>
   <% end %>