panda-core 0.4.1 → 0.7.0

data/app/javascript/panda/core/controllers/index.js

@@ -1,12 +1,18 @@
 // Import and register Core Stimulus controllers
-import { application } from "../application"
+import { application } from "../application.js"
 
-import ThemeFormController from "./theme_form_controller"
+import ThemeFormController from "./theme_form_controller.js"
 application.register("theme-form", ThemeFormController)
 
+import ImageCropperController from "./image_cropper_controller.js"
+application.register("image-cropper", ImageCropperController)
+
+import NavigationToggleController from "./navigation_toggle_controller.js"
+application.register("navigation-toggle", NavigationToggleController)
+
 // Import and register TailwindCSS Stimulus Components
 // These are needed for UI components like slideover, modals, alerts, etc.
-import { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "../tailwindcss-stimulus-components"
+import { Alert, Autosave, ColorPreview, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "../tailwindcss-stimulus-components.js"
 application.register('alert', Alert)
 application.register('autosave', Autosave)
 application.register('color-preview', ColorPreview)

data/app/javascript/panda/core/controllers/navigation_toggle_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Navigation toggle controller for expandable menu items
+// Usage:
+//   <div data-controller="navigation-toggle">
+//     <button data-navigation-toggle-target="button"
+//             data-action="click->navigation-toggle#toggle"
+//             aria-controls="sub-menu-1"
+//             aria-expanded="false">
+//       <span>Menu Item</span>
+//       <i data-navigation-toggle-target="icon" class="fa-solid fa-chevron-right"></i>
+//     </button>
+//     <div id="sub-menu-1" data-navigation-toggle-target="menu" class="hidden">
+//       <a href="#">Sub Item 1</a>
+//       <a href="#">Sub Item 2</a>
+//     </div>
+//   </div>
+export default class extends Controller {
+  static targets = ["button", "menu", "icon"]
+
+  connect() {
+    // Check if this menu should be expanded by default (if a child is active)
+    const hasActiveChild = this.menuTarget.querySelector(".bg-mid")
+    if (hasActiveChild) {
+      this.expand()
+    }
+  }
+
+  toggle(event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    const isExpanded = this.buttonTarget.getAttribute("aria-expanded") === "true"
+
+    if (isExpanded) {
+      this.collapse()
+    } else {
+      this.expand()
+    }
+  }
+
+  expand() {
+    this.menuTarget.classList.remove("hidden")
+    this.buttonTarget.setAttribute("aria-expanded", "true")
+
+    if (this.hasIconTarget) {
+      this.iconTarget.classList.add("rotate-90")
+    }
+  }
+
+  collapse() {
+    this.menuTarget.classList.add("hidden")
+    this.buttonTarget.setAttribute("aria-expanded", "false")
+
+    if (this.hasIconTarget) {
+      this.iconTarget.classList.remove("rotate-90")
+    }
+  }
+}

data/app/javascript/panda/core/controllers/toggle_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Toggle controller for showing/hiding elements
+// Usage:
+//   <div data-controller="toggle">
+//     <button data-action="click->toggle#toggle">Toggle</button>
+//     <div data-toggle-target="toggleable" class="hidden">Content</div>
+//   </div>
+export default class extends Controller {
+  static targets = ["toggleable"]
+
+  toggle(event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    this.toggleableTargets.forEach(target => {
+      target.classList.toggle("hidden")
+    })
+  }
+
+  show(event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    this.toggleableTargets.forEach(target => {
+      target.classList.remove("hidden")
+    })
+  }
+
+  hide(event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    this.toggleableTargets.forEach(target => {
+      target.classList.add("hidden")
+    })
+  }
+}

data/app/javascript/panda/core/tailwindplus-elements.js

@@ -0,0 +1,31 @@
+/**
+ * Tailwind Plus Elements Loader
+ *
+ * This module loads the Tailwind Plus Elements library for vanilla JS interactive components.
+ * It provides eight foundational primitives:
+ * - Autocomplete: enables custom combobox implementations
+ * - Command palette: builds searchable command interfaces
+ * - Dialog: creates modals, drawers, and overlays
+ * - Disclosure: handles collapsible sections and mobile menus
+ * - Dropdown menu: constructs option menus
+ * - Popover: manages floating UI elements
+ * - Select: builds custom dropdown selects
+ * - Tabs: creates tabbed interfaces
+ *
+ * Usage:
+ *   import "@tailwindplus/elements"
+ *
+ * Or lazy-load when needed:
+ *   import("@tailwindplus/elements").then(() => {
+ *     // Elements are now available
+ *   })
+ *
+ * Documentation: https://tailwindcss.com/blog/vanilla-js-support-for-tailwind-plus
+ */
+
+// Auto-import Tailwind Plus Elements
+// This makes custom elements like <el-dropdown>, <el-dialog>, etc. available
+import "@tailwindplus/elements"
+
+// Export for module consumers
+export default "@tailwindplus/elements"

data/app/models/panda/core/user.rb

@@ -5,27 +5,70 @@ module Panda
     class User < ApplicationRecord
       self.table_name = "panda_core_users"
 
+      # Active Storage attachment for avatar
+      has_one_attached :avatar
+
       validates :email, presence: true, uniqueness: {case_sensitive: false}
 
       before_save :downcase_email
 
       # Scopes
-      scope :admin, -> { where(is_admin: true) }
+      # Support both 'admin' (newer) and 'is_admin' (older) column names
+      scope :admins, -> {
+        if column_names.include?("admin")
+          where(admin: true)
+        elsif column_names.include?("is_admin")
+          where(is_admin: true)
+        else
+          none
+        end
+      }
 
       def self.find_or_create_from_auth_hash(auth_hash)
         user = find_by(email: auth_hash.info.email.downcase)
-        return user if user
 
-        create!(
+        # Handle avatar for both new and existing users
+        avatar_url = auth_hash.info.image
+        if user
+          # Update avatar if URL has changed or no avatar is attached
+          if avatar_url.present? && (avatar_url != user.oauth_avatar_url || !user.avatar.attached?)
+            AttachAvatarService.call(user: user, avatar_url: avatar_url)
+          end
+          return user
+        end
+
+        # Support both schema versions: 'name' column or 'firstname'/'lastname' columns
+        attributes = {
           email: auth_hash.info.email.downcase,
-          name: auth_hash.info.name || "Unknown User",
           image_url: auth_hash.info.image,
           is_admin: User.count.zero? # First user is admin
-        )
+        }
+
+        # Add name attributes based on schema
+        if column_names.include?("name")
+          attributes[:name] = auth_hash.info.name || "Unknown User"
+        elsif column_names.include?("firstname") && column_names.include?("lastname")
+          # Split name into firstname/lastname if provided
+          full_name = auth_hash.info.name || "Unknown User"
+          name_parts = full_name.split(" ", 2)
+          attributes[:firstname] = name_parts[0] || "Unknown"
+          attributes[:lastname] = name_parts[1] || "User"
+        end
+
+        user = create!(attributes)
+
+        # Attach avatar for new user
+        if avatar_url.present?
+          AttachAvatarService.call(user: user, avatar_url: avatar_url)
+        end
+
+        user
       end
 
+      # Admin status check
+      # Note: Column is named 'admin' in newer schemas, 'is_admin' in older ones
       def admin?
-        is_admin?
+        self[:admin] || self[:is_admin] || false
       end
 
       def active_for_authentication?
@@ -45,6 +88,17 @@ module Panda
         end
       end
 
+      # Returns the URL for the user's avatar
+      # Prefers Active Storage attachment over OAuth provider URL
+      def avatar_url
+        if avatar.attached?
+          Rails.application.routes.url_helpers.rails_blob_path(avatar, only_path: true)
+        elsif self[:image_url].present?
+          # Fallback to OAuth provider URL if no avatar is attached yet
+          self[:image_url]
+        end
+      end
+
       private
 
       def downcase_email

data/app/services/panda/core/attach_avatar_service.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require "open-uri"
+
+module Panda
+  module Core
+    class AttachAvatarService < Services::BaseService
+      def initialize(user:, avatar_url:)
+        @user = user
+        @avatar_url = avatar_url
+      end
+
+      def call
+        return success if @avatar_url.blank?
+        return success if @avatar_url == @user.oauth_avatar_url && @user.avatar.attached?
+
+        begin
+          download_and_attach_avatar
+          @user.update_column(:oauth_avatar_url, @avatar_url)
+          success(avatar_attached: true)
+        rescue => e
+          Rails.logger.error("Failed to attach avatar for user #{@user.id}: #{e.message}")
+          failure(["Failed to attach avatar: #{e.message}"])
+        end
+      end
+
+      private
+
+      def download_and_attach_avatar
+        # Open the URL with a timeout and size limit
+        # standard:disable Security/Open
+        # Safe in this context as URL comes from trusted OAuth providers (Microsoft, Google, GitHub)
+        URI.open(@avatar_url, read_timeout: 10, open_timeout: 10, redirect: true) do |downloaded_file|
+          # standard:enable Security/Open
+          # Validate file size (max 5MB)
+          if downloaded_file.size > 5.megabytes
+            raise "Avatar file too large (#{downloaded_file.size} bytes)"
+          end
+
+          # Determine content type and filename
+          content_type = downloaded_file.content_type || "image/jpeg"
+          extension = determine_extension(content_type)
+          filename = "avatar_#{@user.id}_#{Time.current.to_i}#{extension}"
+
+          # Attach the avatar
+          @user.avatar.attach(
+            io: downloaded_file,
+            filename: filename,
+            content_type: content_type
+          )
+        end
+        # standard:enable Security/Open
+      end
+
+      def determine_extension(content_type)
+        case content_type
+        when /jpeg|jpg/
+          ".jpg"
+        when /png/
+          ".png"
+        when /gif/
+          ".gif"
+        when /webp/
+          ".webp"
+        else
+          ".jpg"
+        end
+      end
+    end
+  end
+end

data/app/views/layouts/panda/core/admin.html.erb

@@ -13,26 +13,51 @@
       <%= yield %>
     </div>
     <% if content_for :sidebar %>
-      <div data-toggle-target="toggleable" class="hidden flex absolute right-0 flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12"
-            data-transition-enter="transform transition ease-in-out duration-500"
+      <!-- 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"
-            data-transition-leave-from="translate-x-full"
-            data-transition-leave-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="overflow-y-auto flex-1 h-0">
-          <div class="py-3 px-4 mb-4 bg-black">
-            <div class="flex justify-between items-center">
-              <h2 class="text-base font-semibold leading-6 text-white" id="slideover-title"><i class="mr-2 fa-solid fa-gear"></i> <%= yield :sidebar_title %> </h2>
-              <button type="button" data-action="click->toggle#toggle touch->toggle#toggle"><i class="font-bold text-white fa-solid fa-xmark right"></i></button>
+        <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"><%= yield :sidebar_title %></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-2 rounded-md px-3 py-1.5 text-white bg-white/10 hover:bg-white/20 transition-colors border border-white/20">
+                  <span class="text-sm font-semibold uppercase tracking-wide">Close</span>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="size-5">
+                    <path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
+                  </svg>
+                </button>
+              </div>
             </div>
           </div>
-          <div class="flex flex-col flex-1 justify-between">
-            <div class="px-4 space-y-6">
-              <%= yield :sidebar %>
-            </div>
+
+          <!-- Content -->
+          <div class="flex-1 overflow-y-auto">
+            <%= yield :sidebar %>
           </div>
+
+          <!-- 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>
     <% end %>

data/app/views/layouts/panda/core/admin_simple.html.erb

@@ -1,4 +1,5 @@
 <%= render "panda/core/shared/header", html_class: "h-full", body_class: "bg-gradient-admin" %>
+<%= render "panda/core/admin/shared/flash" %>
 <div class="flex flex-col items-center justify-center min-h-screen px-4">
   <%= yield %>
 </div>

data/app/views/panda/core/admin/dashboard/_default_content.html.erb

@@ -45,7 +45,7 @@
       </div>
     </div>
 
-    <% # Hook for additional dashboard cards %>
+    <%# Hook for additional dashboard cards %>
     <% if Panda::Core.config.respond_to?(:admin_dashboard_cards) %>
       <% cards = Panda::Core.config.admin_dashboard_cards&.call(current_user) %>
       <% cards&.each do |card| %>

data/app/views/panda/core/admin/dashboard/show.html.erb

@@ -1,8 +1,8 @@
 <div class="" data-controller="dashboard">
   <%= render Panda::Core::Admin::ContainerComponent.new do |container| %>
-    <% container.with_heading(text: "Dashboard", level: 1) %>
-    
-    <% # Hook for dashboard widgets %>
+    <% container.heading(text: "Dashboard", level: 1) %>
+
+    <%# Hook for dashboard widgets %>
     <% if Panda::Core.config.admin_dashboard_widgets %>
       <% widgets = Panda::Core.config.admin_dashboard_widgets.call(current_user) %>
       <% if widgets && widgets.any? %>

data/app/views/panda/core/admin/my_profile/edit.html.erb

@@ -8,7 +8,32 @@
               data: { controller: "theme-form" } do |f| %>
     <%= render Panda::Core::Admin::FormErrorComponent.new(model: user) %>
 
-    <div class="space-y-4">
+    <div class="space-y-6">
+      <!-- Avatar Section -->
+      <div class="col-span-full">
+        <%= f.label :avatar, "Profile Picture", class: "block text-sm/6 font-medium text-gray-900 dark:text-white" %>
+        <div class="mt-2 flex items-center gap-x-3">
+          <% if user.avatar.attached? %>
+            <%= image_tag main_app.url_for(user.avatar), alt: user.name, class: "w-48 h-48 max-w-48 rounded-full object-cover" %>
+          <% else %>
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-48 h-48 text-gray-300 dark:text-gray-500">
+              <path d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd" fill-rule="evenodd" />
+            </svg>
+          <% end %>
+          <label for="<%= f.field_id(:avatar) %>" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 cursor-pointer dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">
+            Change
+          </label>
+          <%= f.file_field :avatar,
+              accept: "image/png,image/jpeg,image/jpg,image/gif,image/webp",
+              class: "sr-only" %>
+        </div>
+        <% if user.avatar.attached? %>
+          <p class="mt-2 text-xs text-gray-600 dark:text-gray-400">
+            Current: <%= user.avatar.filename %> (<%= number_to_human_size(user.avatar.byte_size) %>)
+          </p>
+        <% end %>
+      </div>
+
       <div class="field">
         <%= f.label :name %>
         <%= f.text_field :name %>

data/app/views/panda/core/admin/sessions/new.html.erb

@@ -11,13 +11,12 @@
     <% providers = @providers || Panda::Core.config.authentication_providers.keys %>
     <% providers.each do |provider| %>
       <% provider_config = Panda::Core.config.authentication_providers[provider] %>
-      <% provider_name = provider_config&.dig(:name) || provider.to_s.humanize %>
       <% provider_path = provider_config&.dig(:path_name) || provider %>
       <div class="mt-4 text-center sm:mx-auto sm:w-full sm:max-w-sm">
         <%= 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="fa-brands fa-<%= oauth_provider_icon(provider) %> text-xl mr-1"></i>
-            Sign in with <%= provider_name %>
+            <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>
@@ -36,4 +35,4 @@
       </div>
     </div>
   <% end %>
-</div>
+</div>

data/app/views/panda/core/admin/shared/_breadcrumbs.html.erb

@@ -1,28 +1,18 @@
 <% breadcrumb_styles = "text-black/60 hover:text-black/80" %>
 
-<div class="flex mt-1 -mb-1">
-  <nav aria-label="Breadcrumb" id="panda-breadcrumbs" class="grow">
-    <ol role="list" class="px-4 w-full sm:px-6">
+<nav aria-label="Breadcrumb" id="panda-breadcrumbs" class="px-4 w-full sm:px-6 py-2.5">
+  <ol role="list">
+    <li class="inline-block">
+      <a href="<%= Panda::Core.config.admin_path %>" class="<%= breadcrumb_styles %>">
+        <i class="fa fa-solid fa-house fa-fw inline-block w-4 text-center"></i>
+        <span class="sr-only">Home</span>
+      </a>
+    </li>
+    <% breadcrumbs.each do |crumb| %>
       <li class="inline-block">
-        <a href="<%= Panda::Core.config.admin_path %>" class="<%= breadcrumb_styles %>">
-          <i class="fa fa-solid fa-house"></i>
-          <span class="sr-only">Home</span>
-        </a>
+        <i class="fa-solid fa-chevron-right fa-fw inline-block w-4 text-center font-light <%= breadcrumb_styles %> px-2"></i>
+        <a href="<%= crumb.path %>" class="text-sm font-normal <%= breadcrumb_styles %>"><%= crumb.name %></a>
       </li>
-      <% breadcrumbs.each do |crumb| %>
-        <li class="inline-block">
-          <i class="fa fa-regular fa-chevron-right font-light <%= breadcrumb_styles %> py-5 px-2"></i>
-          <a href="<%= crumb.path %>" class="text-sm font-normal <%= breadcrumb_styles %>"><%= crumb.name %></a>
-        </li>
-      <% end %>
-    </ol>
-  </nav>
-
-  <% if content_for :sidebar %>
-    <div class="pt-4 pr-8 text-black/80" tabindex="-1" data-controller="toggle">
-      <button type="button" id="slideover-toggle" data-action="click->toggle#toggle touch->toggle#toggle" class="text-sm font-light">
-        <i class="mr-1 fa-light fa-gear"></i> <%= yield :sidebar_title %>
-      </button>
-    </div>
-  <% end %>
-</div>
+    <% end %>
+  </ol>
+</nav>

data/app/views/panda/core/admin/shared/_sidebar.html.erb

@@ -1,22 +1,71 @@
 <nav class="flex flex-col flex-1">
   <ul role="list" class="flex flex-col flex-1">
     <a class="block p-0 mt-4 mb-4 ml-2 text-xl font-medium text-white"><%= Panda::Core.config.admin_title || "Panda Admin" %></a>
-    <% Panda::Core.config.admin_navigation_items&.call(current_user)&.each do |item| %>
+    <%
+      # Get navigation items in original order for display
+      nav_items = Panda::Core.config.admin_navigation_items&.call(current_user) || []
+
+      # Helper to recursively collect all paths from nav items
+      def collect_paths(items)
+        items.flat_map do |item|
+          paths = item[:path] ? [item[:path]] : []
+          paths += collect_paths(item[:children] || [])
+          paths
+        end
+      end
+
+      # Find the most specific matching path by checking longest paths first
+      all_paths = collect_paths(nav_items)
+      active_path = all_paths
+        .sort_by { |path| -path.length }
+        .find { |path| request.path == path || request.path.starts_with?(path + "/") }
+    %>
+    <% nav_items.each_with_index do |item, index| %>
       <li>
         <%
-          # Exact match for dashboard, starts_with for others
-          # Check if current path matches this nav item
-          is_active = if request.path == item[:path]
-            true
-          elsif request.path.starts_with?(item[:path] + "/")
-            true
+          has_children = item[:children].present?
+
+          # For items with children, check if any child is active
+          if has_children
+            is_active = item[:children].any? do |child|
+              child[:path] && (request.path == child[:path] || request.path.starts_with?(child[:path] + "/"))
+            end
           else
-            false
+            is_active = item[:path] == active_path
           end
         %>
-        <%= link_to item[:path], class: "#{is_active ? "bg-mid text-white relative flex items-center transition-all py-3 px-2 mb-2 rounded-md group gap-x-3 text-base leading-6 font-normal" : "text-white hover:bg-mid/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal"}" do %>
-          <span class="text-center w-6"><i class="<%= item[:icon] %> text-xl fa-fw"></i></span>
-          <span><%= item[:label] %></span>
+
+        <% if has_children %>
+          <div class="space-y-1" data-controller="navigation-toggle">
+            <button type="button"
+                    data-navigation-toggle-target="button"
+                    data-action="click->navigation-toggle#toggle"
+                    aria-controls="sub-menu-<%= index %>"
+                    aria-expanded="false"
+                    class="<%= is_active ? 'bg-mid text-white' : 'text-white hover:bg-mid/60' %> transition-all group flex items-center w-full gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal">
+              <span class="text-center w-6"><i class="<%= item[:icon] %> text-xl fa-fw"></i></span>
+              <span class="flex-1 text-left"><%= item[:label] %></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="sub-menu-<%= index %>"
+                 class="space-y-1 hidden"
+                 data-navigation-toggle-target="menu">
+              <% item[:children].each do |child| %>
+                <%
+                  child_is_active = child[:path] && (request.path == child[:path] || request.path.starts_with?(child[:path] + "/"))
+                %>
+                <%= link_to child[:path], class: "#{child_is_active ? 'bg-mid text-white' : 'text-white hover:bg-mid/60'} group flex items-center w-full py-2 pr-2 pl-11 rounded-md text-sm font-normal transition-all" do %>
+                  <%= child[:label] %>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        <% else %>
+          <%= link_to item[:path], class: "#{is_active ? "bg-mid text-white relative flex items-center transition-all py-3 px-2 mb-2 rounded-md group gap-x-3 text-base leading-6 font-normal" : "text-white hover:bg-mid/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal"}" do %>
+            <span class="text-center w-6"><i class="<%= item[:icon] %> text-xl fa-fw"></i></span>
+            <span><%= item[:label] %></span>
+          <% end %>
         <% end %>
       </li>
     <% end %>
@@ -27,11 +76,17 @@
       <% end %>
     </li>
     <li class="mt-auto">
-      <%= link_to panda_core.edit_admin_my_profile_path, class: "text-white hover:bg-mid/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal w-full", title: "Edit my Profile" do %>
-        <% if !current_user.image_url.to_s.empty? %>
+      <%
+        # Check if we're in the my_profile section
+        is_my_profile_active = request.path.starts_with?("#{Panda::Core.config.admin_path}/my_profile")
+      %>
+      <%= link_to panda_core.admin_my_profile_path, class: "#{is_my_profile_active ? 'bg-mid text-white' : 'text-white hover:bg-mid/60'} transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal w-full", title: "My Profile" do %>
+        <% if current_user.avatar.attached? %>
+          <span class="text-center w-6"><%= image_tag main_app.url_for(current_user.avatar), alt: current_user.name, class: "w-auto h-7 rounded-full object-cover" %></span>
+        <% elsif !current_user.image_url.to_s.empty? %>
           <span class="text-center w-6"><img src="<%= current_user.image_url %>" class="w-auto h-7 rounded-full"></span>
         <% else %>
-          <span class="text-center w-6"><i class="text-xl fa-regular fa-circle-user fa-fw"></i></span>
+          <span class="text-center w-6"><i class="text-xl fa-solid fa-circle-user fa-fw"></i></span>
         <% end %>
         <span><%= current_user.name %></span>
       <% end %>

data/app/views/panda/core/admin/shared/_slideover.html.erb

@@ -30,4 +30,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>