panda-core 0.12.5 → 1.1.0

data/app/components/panda/core/admin/form_select_component.rb

@@ -4,22 +4,18 @@ module Panda
   module Core
     module Admin
       class FormSelectComponent < Panda::Core::Base
-        prop :name, String
-        prop :options, Array
-        prop :selected, _Nilable(_Union(String, Integer)), default: -> {}
-        prop :prompt, _Nilable(String), default: -> {}
-        prop :required, _Boolean, default: -> { false }
-        prop :disabled, _Boolean, default: -> { false }
-        prop :include_blank, _Boolean, default: -> { false }
-
-        def view_template
-          select(**@attrs) do
-            render_prompt if @prompt
-            render_blank if @include_blank && !@prompt
-            render_options
-          end
+        def initialize(prompt:, name: "", options: [], required: false, disabled: false, include_blank: false, **attrs)
+          @name = name
+          @options = options
+          @prompt = prompt
+          @required = required
+          @disabled = disabled
+          @include_blank = include_blank
+          super(**attrs)
         end
 
+        attr_reader :name, :options, :prompt, :required, :disabled, :include_blank
+
         def default_attrs
           base_attrs = {
             name: @name,
@@ -36,31 +32,34 @@ module Panda
         private
 
         def select_classes
-          classes = "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:leading-6"
+          classes = "block w-full h-11 rounded-xl border border-gray-300 bg-white px-3 py-2 text-gray-900 " \
+                    "focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500 " \
+                    "dark:bg-white/5 dark:text-white dark:border-white/10"
 
           if @disabled
-            classes + " ring-gray-300 focus:ring-gray-300 bg-gray-50 cursor-not-allowed"
+            classes + " border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed"
           else
-            classes + " ring-primary-400 focus:ring-primary-600 hover:cursor-pointer"
+            classes
           end
         end
 
         def render_prompt
-          option(value: "", disabled: true, selected: @selected.nil?) { @prompt }
+          content_tag(:option, @prompt, value: "", disabled: true, selected: @selected.nil?)
         end
 
         def render_blank
-          option(value: "") { "" }
+          content_tag(:option, "", value: "")
         end
 
         def render_options
-          @options.each do |option_data|
-            label, value = option_data
-            option_attrs = {value: value.to_s}
-            option_attrs[:selected] = true if value.to_s == @selected.to_s
-
-            option(**option_attrs) { label.to_s }
-          end
+          safe_join(
+            @options.map do |option_data|
+              label, value = option_data
+              option_attrs = {value: value.to_s}
+              option_attrs[:selected] = true if value.to_s == @selected.to_s
+              content_tag(:option, label.to_s, **option_attrs)
+            end
+          )
         end
       end
     end

data/app/components/panda/core/admin/heading_component.html.erb

@@ -0,0 +1,26 @@
+<div class="heading-wrapper">
+  <% heading_tag = case level when 1 then :h1 when 2 then :h2 when 3 then :h3 when :panel then :h3 else :h2 end %>
+
+  <%= tag.send(heading_tag, class: heading_classes) do %>
+    <div class="grow flex items-center gap-x-2">
+      <% if icon.present? %>
+        <%= tag.i(class: icon) %>
+      <% end %>
+      <span><%= text %></span>
+    </div>
+    <% if buttons.any? || dropdown_buttons.any? %>
+      <span class="actions flex gap-x-2 mt-1 min-h-[2.5rem]">
+        <% dropdown_buttons.each do |dropdown_button| %>
+          <%= dropdown_button %>
+        <% end %>
+        <% buttons.each do |button| %>
+          <%= button %>
+        <% end %>
+      </span>
+    <% end %>
+  <% end %>
+
+  <% if meta %>
+    <%= tag.p(raw(meta), class: "text-sm text-black/60 -mt-1 mb-5") %>
+  <% end %>
+</div>

data/app/components/panda/core/admin/heading_component.rb

@@ -4,78 +4,41 @@ module Panda
   module Core
     module Admin
       class HeadingComponent < Panda::Core::Base
-        prop :text, String
-        prop :level, _Nilable(_Union(Integer, Symbol)), default: -> { 2 }
-        prop :icon, String, default: ""
-        prop :meta, _Nilable(String), default: -> {}
-        prop :additional_styles, _Nilable(_Union(String, Array)), default: -> { "" }
-
-        def view_template(&block)
-          # Capture any buttons defined via block
-          instance_eval(&block) if block_given?
-
-          div(class: "heading-wrapper") do
-            case @level
-            when 1
-              h1(class: heading_classes(@meta.present?)) { render_content }
-            when 2
-              h2(class: heading_classes(@meta.present?)) { render_content }
-            when 3
-              h3(class: heading_classes(@meta.present?)) { render_content }
-            when :panel
-              h3(class: panel_heading_classes) { @text }
-            else
-              h2(class: heading_classes(@meta.present?)) { render_content }
-            end
-
-            if @meta
-              p(class: "text-sm text-black/60 -mt-1 mb-5") { raw(@meta) }
-            end
-          end
+        renders_many :buttons, Panda::Core::Admin::ButtonComponent
+        renders_many :dropdown_buttons, Panda::Core::Admin::DropdownButtonComponent
+
+        def initialize(text: "", icon: "", meta: nil, level: 2, additional_styles: nil, **attrs, &block)
+          @text = text
+          @icon = icon
+          @meta = meta
+          @level = level
+          @additional_styles = additional_styles
+          super(**attrs)
+          # Execute block if passed to new() directly (for tests/direct instantiation)
+          # This allows: HeadingComponent.new(text: "Pages") { |h| h.with_button(...) }
+          # Note: When used via render() with a block, ViewComponent handles the block separately
+          yield self if block_given?
         end
 
-        def button(**props)
-          @buttons ||= []
-          @buttons << Panda::Core::Admin::ButtonComponent.new(**props)
-        end
+        attr_reader :text, :icon, :meta, :level
 
         private
 
-        def render_content
-          div(class: "grow flex items-center gap-x-2") do
-            i(class: @icon) if @icon.present?
-            span { @text }
-          end
-
-          span(class: "actions flex gap-x-2 mt-1 min-h-[2.5rem]") do
-            @buttons&.each { |btn| render(btn) }
-          end
-        end
-
-        def heading_classes(has_meta = false)
-          margin_bottom = has_meta ? "mb-0.5" : "mb-5"
-          base = "flex text-black #{margin_bottom} -mt-2"
+        def heading_classes
+          margin_bottom = @meta.present? ? "mb-0.5" : "mb-5"
+          base = "flex items-center gap-2 text-gray-900 #{margin_bottom}"
           styles = case @level
           when 1
-            "text-2xl font-medium"
+            "text-2xl font-semibold"
           when 2
-            "text-xl font-medium"
+            "text-xl font-semibold"
           when 3
-            "text-xl font-light"
+            "text-lg font-medium"
           else
-            "text-xl font-medium"
+            "text-xl font-semibold"
           end
 
-          [base, styles, *additional_styles_array].compact.join(" ")
-        end
-
-        def panel_heading_classes
-          "text-base font-medium px-4 py-3 text-white"
-        end
-
-        def additional_styles_array
-          return [] if @additional_styles.blank?
-          @additional_styles.is_a?(String) ? @additional_styles.split(" ") : @additional_styles
+          [base, styles, @additional_styles].compact.join(" ")
         end
       end
     end

data/app/components/panda/core/admin/login_form_component.html.erb

@@ -0,0 +1,38 @@
+<div <%= tag.attributes(**attrs) %>>
+  <div class="text-center sm:mx-auto sm:w-full sm:max-w-sm">
+    <% if Panda::Core.config.login_logo_path %>
+      <img src="<%= Panda::Core.config.login_logo_path %>" class="py-2 mx-auto w-auto h-32">
+    <% end %>
+    <h2 class="mt-10 mb-6 text-2xl font-bold text-center text-white">
+      <%= Panda::Core.config.login_page_title || "Sign in to your account" %>
+    </h2>
+  </div>
+
+  <% if @providers&.any? %>
+    <% @providers.each do |provider| %>
+      <% provider_config = Panda::Core.config.authentication_providers[provider] %>
+      <% provider_path = provider_config&.dig(:path_name) || provider %>
+      <div class="mt-4 text-center sm:mx-auto sm:w-full sm:max-w-sm">
+        <%= helpers.form_tag "#{Panda::Core.config.admin_path}/auth/#{provider_path}", method: "post", data: {turbo: false} do %>
+          <button type="submit" id="button-sign-in-<%= provider_path %>" class="inline-flex gap-x-2 items-center py-2.5 px-3.5 mx-auto mb-4 bg-white text-gray-900 rounded-md border min-w-56 border-neutral-400 hover:bg-gray-50">
+            <i class="<%= oauth_provider_non_brand?(provider) ? 'fa-solid' : 'fa-brands' %> fa-<%= oauth_provider_icon(provider) %> text-xl mr-1"></i>
+            Sign in with <%= oauth_provider_name(provider, provider_config) %>
+          </button>
+        <% end %>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="rounded-md bg-yellow-50 p-4 sm:mx-auto sm:w-full sm:max-w-sm">
+      <div class="flex">
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-yellow-800">
+            No authentication providers configured
+          </h3>
+          <div class="mt-2 text-sm text-yellow-700">
+            <p>Please configure at least one authentication provider in your Panda Core configuration.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/panda/core/admin/login_form_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Login form component for OAuth provider authentication
+      # Displays configured authentication providers for user login
+      class LoginFormComponent < Panda::Core::Base
+        include Panda::Core::SessionsHelper
+
+        def initialize(providers: [], **attrs)
+          @providers = providers
+          super(**attrs)
+        end
+
+        attr_reader :providers
+
+        private
+
+        def default_attrs
+          {
+            class: "flex flex-col justify-center py-12 px-6 min-h-full text-center lg:px-8"
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/main_layout_component.html.erb

@@ -0,0 +1,88 @@
+<%= render Panda::Core::Shared::HeaderComponent.new(html_class: "h-full", body_class: "") %>
+
+<div class="flex h-full" id="panda-container">
+  <div data-controller="mobile-sidebar" data-action="keydown.esc@window->mobile-sidebar#close">
+    <div data-mobile-sidebar-target="backdrop" class="hidden fixed inset-0 bg-gray-900/50 z-40 lg:hidden" data-action="click->mobile-sidebar#close"></div>
+    <div class="absolute top-0 w-full lg:flex lg:fixed lg:inset-y-0 z-50 lg:flex-col lg:w-72">
+      <div data-mobile-sidebar-target="sidebar" class="flex overflow-y-auto flex-col gap-y-5 px-4 pb-4 max-h-16 bg-gradient-admin lg:max-h-full grow">
+        <div class="flex items-center justify-between pt-4 -mb-5 lg:hidden">
+          <button data-mobile-sidebar-target="hamburger" data-action="click->mobile-sidebar#toggle" type="button" class="text-white/80 hover:text-white p-1" aria-expanded="false" aria-label="Toggle navigation">
+            <i class="fa-solid fa-bars text-xl"></i>
+          </button>
+          <span class="text-white font-medium text-lg"><%= Panda::Core.config.admin_title || "Panda Admin" %></span>
+          <span class="w-7"></span>
+        </div>
+        <%= render Panda::Core::Admin::SidebarComponent.new(user: @user) %>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col flex-1 mt-16 ml-0 lg:mt-0 lg:ml-72" id="panda-inner-container" <% if content_for :sidebar %> data-controller="toggle" data-action="keydown.esc@window->toggle#hide keydown.escape@window->toggle#hide" tabindex="-1"<% end %>>
+    <section id="panda-main" class="flex flex-row h-full">
+      <div class="flex-1 h-full overflow-y-auto pb-8" id="panda-primary-content">
+        <%= render Panda::Core::Admin::BreadcrumbsComponent.new(breadcrumbs: @breadcrumbs) %>
+        <%= render "panda/core/admin/shared/flash" %>
+        <%= content %>
+      </div>
+      <% if content_for :sidebar %>
+        <!-- Backdrop overlay -->
+        <div data-toggle-target="toggleable" class="hidden fixed inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out dark:bg-gray-900/50 z-40"
+             data-transition-enter="transition-opacity duration-500 ease-in-out"
+             data-transition-enter-from="opacity-0"
+             data-transition-enter-to="opacity-100"
+             data-transition-leave="transition-opacity duration-500 ease-in-out"
+             data-transition-leave-from="opacity-100"
+             data-transition-leave-to="opacity-0"></div>
+
+        <!-- Slideover panel -->
+        <div data-toggle-target="toggleable" class="hidden ml-auto block size-full max-w-md transform fixed right-0 top-0 h-full z-50"
+              data-transition-enter="transform transition ease-in-out duration-500 sm:duration-700"
+              data-transition-enter-from="translate-x-full"
+              data-transition-enter-to="translate-x-0"
+              data-transition-leave="transform transition ease-in-out duration-500 sm:duration-700"
+              data-transition-leave-from="translate-x-0"
+              data-transition-leave-to="translate-x-full"
+              id="slideover">
+          <div class="relative flex h-full flex-col bg-white shadow-xl dark:bg-gray-800 dark:after:absolute dark:after:inset-y-0 dark:after:left-0 dark:after:w-px dark:after:bg-white/10">
+            <!-- Header -->
+            <div class="bg-gradient-admin px-4 py-3 sm:px-6">
+              <div class="flex items-center justify-between">
+                <h2 class="text-base font-semibold text-white" id="slideover-title"><%= content_for?(:sidebar_title) ? yield(:sidebar_title) : "Sidebar" %></h2>
+                <div class="ml-3 flex items-center">
+                  <button type="button" data-action="click->toggle#toggle touch->toggle#toggle" class="flex items-center gap-x-1 rounded-full px-2 py-1 text-xs text-white/80 bg-white/10 hover:text-white hover:bg-white/20 transition-colors">
+                    <span>Close</span>
+                    <i class="fa-solid fa-xmark"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Content -->
+            <% if content_for?(:sidebar) %>
+              <div class="flex-1 overflow-y-auto">
+                <%= yield :sidebar %>
+              </div>
+            <% end %>
+
+            <!-- Footer (if present) -->
+            <% if content_for?(:sidebar_footer) %>
+              <div class="flex shrink-0 justify-end gap-x-3 border-t border-gray-200 px-4 py-4 dark:border-white/10">
+                <%= yield :sidebar_footer %>
+              </div>
+            <% end %>
+          </div>
+        </div>
+        <script>
+          window.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+              document.querySelectorAll('[data-toggle-target="toggleable"]').forEach(function(el) {
+                el.classList.add('hidden');
+              });
+            }
+          });
+        </script>
+      <% end %>
+    </section>
+  </div>
+</div>
+
+<%= render Panda::Core::Shared::FooterComponent.new %>

data/app/components/panda/core/admin/main_layout_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Main admin layout component
+      # Handles the full admin page layout with sidebar, header, and main content
+      class MainLayoutComponent < ViewComponent::Base
+        def initialize(user:, breadcrumbs: [], **attrs)
+          super()
+          @user = user
+          @breadcrumbs = breadcrumbs
+        end
+
+        attr_reader :user, :breadcrumbs
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/my_profile/connected_account_component.html.erb

@@ -0,0 +1,41 @@
+<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+  <div class="flex items-center gap-4">
+    <%# Provider icon %>
+    <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-100">
+      <i class="<%= provider_info[:icon] %> text-2xl" style="color: <%= provider_info[:color] %>;"></i>
+    </div>
+
+    <%# Provider details %>
+    <div>
+      <h3 class="font-medium text-gray-900"><%= provider_info[:name] %></h3>
+      <% if connected? %>
+        <p class="text-sm text-green-600">
+          <i class="fa-solid fa-check-circle"></i>
+          Connected
+        </p>
+      <% else %>
+        <p class="text-sm text-gray-500">Not connected</p>
+      <% end %>
+    </div>
+  </div>
+
+  <%# Action button %>
+  <div>
+    <% if connected? %>
+      <%= render Panda::Core::Admin::ButtonComponent.new(
+        text: "Connected",
+        action: :secondary,
+        as_button: true,
+        disabled: true
+      ) %>
+    <% else %>
+      <%= render Panda::Core::Admin::ButtonComponent.new(
+        text: "Connect",
+        action: :primary,
+        href: "#",
+        disabled: true,
+        title: "OAuth re-connection coming soon"
+      ) %>
+    <% end %>
+  </div>
+</div>

data/app/components/panda/core/admin/my_profile/connected_account_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module MyProfile
+        class ConnectedAccountComponent < Panda::Core::Base
+          def initialize(provider:, user:)
+            @provider = provider
+            @user = user
+            @provider_info = Panda::Core::OAuthProviders.info(provider)
+            # TODO: Track which provider user logged in with
+            # For now, we don't track the provider, so we can't show connection status
+            @is_connected = user.respond_to?(:oauth_provider) && user.oauth_provider == provider.to_s
+            super()
+          end
+
+          attr_reader :provider_info
+
+          def connected?
+            @is_connected
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/navigation/item_component.html.erb

@@ -0,0 +1,34 @@
+<li>
+  <% if expandable? %>
+    <div class="<%= margin_class %>" data-controller="navigation-toggle">
+      <div data-navigation-toggle-target="wrapper"
+           class="<%= 'rounded-xl bg-white/10 overflow-hidden' if active? %>">
+        <button type="button"
+                data-navigation-toggle-target="button"
+                data-action="click->navigation-toggle#toggle"
+                aria-controls="<%= menu_id %>"
+                aria-expanded="false"
+                class="<%= parent_classes %>">
+          <span class="text-center w-6"><i class="<%= icon %> text-xl fa-fw"></i></span>
+          <span class="flex-1 text-left"><%= label %></span>
+          <%= badge_tag %>
+          <i class="fa-solid fa-chevron-right text-xs transition-transform duration-150 ease-in-out"
+             data-navigation-toggle-target="icon"></i>
+        </button>
+        <div id="<%= menu_id %>"
+             class="overflow-hidden transition-all duration-200 ease-out <%= active? ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0' %>"
+             data-navigation-toggle-target="menu">
+          <% sub_items.each do |sub_item| %>
+            <%= sub_item %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% else %>
+    <%= helpers.link_to path, class: link_classes, target: target do %>
+      <span class="text-center w-6"><i class="<%= icon %> text-xl fa-fw"></i></span>
+      <span class="flex-1"><%= label %></span>
+      <%= badge_tag %>
+    <% end %>
+  <% end %>
+</li>

data/app/components/panda/core/admin/navigation/item_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module Navigation
+        # A top-level navigation item
+        # Can be a simple link or an expandable menu with children
+        class ItemComponent < Panda::Core::Base
+          BASE_CLASSES = "transition-all group flex items-center gap-x-3 px-3 " \
+                         "text-sm font-medium cursor-pointer"
+          SPACIOUS_PADDING = "py-2.5"
+          COMPACT_PADDING = "py-1.5"
+          ACTIVE_CLASSES = "bg-primary-500/20 text-white rounded-xl"
+          EXPANDED_BUTTON_CLASSES = "bg-white/15 text-white rounded-t-xl"
+          INACTIVE_CLASSES = "text-white/80 hover:bg-white/5 rounded-xl"
+
+          renders_many :sub_items, SubItemComponent
+
+          def initialize(label:, icon:, path: nil, active: false, menu_id: nil, target: nil, badge: nil, badge_color: nil, compact: false, **attrs) # rubocop:disable Metrics/ParameterLists
+            @label = label
+            @icon = icon
+            @path = path
+            @active = active
+            @menu_id = menu_id
+            @target = target
+            @badge = badge
+            @badge_color = badge_color
+            @compact = compact
+            super(**attrs)
+          end
+
+          attr_reader :label, :icon, :path, :active, :menu_id, :target, :badge, :badge_color
+
+          def active?
+            @active
+          end
+
+          def expandable?
+            sub_items.any?
+          end
+
+          def padding_class
+            @compact ? COMPACT_PADDING : SPACIOUS_PADDING
+          end
+
+          def margin_class
+            @compact ? "mb-0.5" : "mb-2"
+          end
+
+          def parent_classes
+            "#{BASE_CLASSES} #{padding_class} w-full #{active? ? EXPANDED_BUTTON_CLASSES : INACTIVE_CLASSES}"
+          end
+
+          def link_classes
+            "#{BASE_CLASSES} #{padding_class} rounded-xl #{margin_class} #{active? ? "#{ACTIVE_CLASSES} relative" : INACTIVE_CLASSES}"
+          end
+
+          def badge_tag
+            return unless badge
+            helpers.content_tag(:span, badge,
+              class: "ml-auto px-1.5 py-0.5 text-[10px] font-semibold rounded-full text-white",
+              style: "background-color: #{badge_color || "#52B788"}")
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/navigation/sub_item_component.html.erb

@@ -0,0 +1,9 @@
+<% if button? %>
+  <%= helpers.button_to path, method: method, **button_options, class: "#{item_classes} text-left" do %>
+    <%= label %>
+  <% end %>
+<% else %>
+  <%= helpers.link_to path, class: item_classes, target: target do %>
+    <%= label %>
+  <% end %>
+<% end %>

data/app/components/panda/core/admin/navigation/sub_item_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module Navigation
+        # A child item within an expandable navigation menu
+        # Can render as a link or a button (for logout, etc.)
+        class SubItemComponent < Panda::Core::Base
+          BASE_CLASSES = "group flex items-center w-full px-3 py-2 cursor-pointer " \
+                         "text-sm font-medium transition-colors"
+          ACTIVE_CLASSES = "bg-primary-500/20 text-white"
+          INACTIVE_CLASSES = "text-white/70 hover:bg-white/5"
+
+          # rubocop:disable Metrics/ParameterLists
+          def initialize(label:, path: nil, active: false, method: nil, button_options: {}, target: nil, **attrs)
+            @label = label
+            @path = path
+            @active = active
+            @method = method
+            @button_options = button_options
+            @target = target
+            super(**attrs)
+          end
+          # rubocop:enable Metrics/ParameterLists
+
+          attr_reader :label, :path, :active, :method, :button_options, :target
+
+          def active?
+            @active
+          end
+
+          def button?
+            method.present?
+          end
+
+          def item_classes
+            "#{BASE_CLASSES} #{active? ? ACTIVE_CLASSES : INACTIVE_CLASSES}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/navigation/user_menu_component.html.erb

@@ -0,0 +1,30 @@
+<li class="mt-auto">
+  <div class="mb-2" data-controller="navigation-toggle">
+    <div data-navigation-toggle-target="wrapper"
+         class="<%= 'rounded-xl bg-white/10 overflow-hidden' if active? %>">
+      <button type="button"
+              data-navigation-toggle-target="button"
+              data-action="click->navigation-toggle#toggle"
+              aria-controls="user-menu"
+              aria-expanded="false"
+              class="<%= button_classes %>">
+        <% avatar = user.avatar_url %>
+        <% if avatar.present? %>
+          <span class="text-center w-6"><img src="<%= avatar %>" alt="<%= user.name %>" class="w-auto h-7 rounded-full object-cover"></span>
+        <% else %>
+          <span class="text-center w-6"><i class="text-xl fa-solid fa-circle-user fa-fw"></i></span>
+        <% end %>
+        <span class="flex-1 text-left"><%= user.name %></span>
+        <i class="fa-solid fa-chevron-right text-xs transition-transform duration-150 ease-in-out"
+           data-navigation-toggle-target="icon"></i>
+      </button>
+      <div id="user-menu"
+           class="overflow-hidden transition-all duration-200 ease-out <%= active? ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0' %>"
+           data-navigation-toggle-target="menu">
+        <% sub_items.each do |sub_item| %>
+          <%= sub_item %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</li>