panda-core 0.12.5 → 1.1.0

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module Navigation
+        # User profile menu component for the sidebar footer
+        # Displays user avatar/name with expandable menu for profile, security, and logout
+        class UserMenuComponent < Panda::Core::Base
+          BASE_CLASSES = "transition-all group flex items-center w-full gap-x-3 px-3 py-2.5 " \
+                         "text-sm font-medium cursor-pointer"
+          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(user:, active: false, **attrs)
+            @user = user
+            @active = active
+            super(**attrs)
+          end
+
+          attr_reader :user
+
+          def active?
+            @active
+          end
+
+          def button_classes
+            "#{BASE_CLASSES} #{active? ? EXPANDED_BUTTON_CLASSES : INACTIVE_CLASSES}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+<div>
+  <%# Breadcrumbs section %>
+  <% if @breadcrumbs %>
+    <%= render Panda::Core::Admin::BreadcrumbComponent.new(
+      items: @breadcrumbs,
+      show_back: @show_back
+    ) %>
+  <% end %>
+
+  <%# Title and actions section %>
+  <div class="mt-2 md:flex md:items-center md:justify-between">
+    <%# Title %>
+    <div class="min-w-0 flex-1">
+      <h2 class="text-2xl/7 font-bold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white">
+        <%= @title %>
+      </h2>
+    </div>
+
+    <%# Action buttons %>
+    <% if buttons.any? %>
+      <div class="mt-4 flex shrink-0 md:mt-0 md:ml-4">
+        <% buttons.each_with_index do |button_data, index| %>
+          <%= render create_button(button_data, index) %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -33,47 +33,31 @@ module Panda
       #   end
       #
       class PageHeaderComponent < Panda::Core::Base
-        prop :title, String
-        prop :breadcrumbs, _Nilable(Array), default: -> {}
-        prop :show_back, _Boolean, default: true
-
-        def initialize(**props)
-          super
+        def initialize(title: "", breadcrumbs: nil, show_back: true, **attrs, &block)
+          @title = title
+          @breadcrumbs = breadcrumbs
+          @show_back = show_back
           @buttons = []
+          @setup_block = block
+          super(**attrs)
         end
 
-        def view_template(&block)
-          # Allow buttons to be defined via block
-          instance_eval(&block) if block_given?
-
-          div do
-            # Breadcrumbs section
-            if @breadcrumbs
-              render Panda::Core::Admin::BreadcrumbComponent.new(
-                items: @breadcrumbs,
-                show_back: @show_back
-              )
-            end
-
-            # Title and actions section
-            div(class: "mt-2 md:flex md:items-center md:justify-between") do
-              # Title
-              div(class: "min-w-0 flex-1") do
-                h2(class: "text-2xl/7 font-bold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white") do
-                  @title
-                end
-              end
+        attr_reader :title, :breadcrumbs, :show_back
 
-              # Action buttons
-              if @buttons.any?
-                div(class: "mt-4 flex shrink-0 md:mt-0 md:ml-4") do
-                  @buttons.each_with_index do |button_data, index|
-                    render create_button(button_data, index)
-                  end
-                end
-              end
+        # Lazy accessor that ensures buttons are registered before returning them.
+        # Supports two patterns:
+        # 1. Block passed to new() - executed here (for tests)
+        # 2. Block passed to render() - executed via content (for ERB templates)
+        def buttons
+          unless @buttons_registered
+            if @setup_block
+              @setup_block.call(self)
+            else
+              content
             end
+            @buttons_registered = true
           end
+          @buttons
         end
 
         # Define a button to be rendered in the header actions area

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

@@ -0,0 +1,33 @@
+<nav aria-label="Pagination" class="mt-4 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-4">
+  <div class="text-sm text-gray-500 dark:text-gray-400">
+    Showing <%= first_item %> to <%= last_item %> of <%= total_count %> <%= item_name %>
+  </div>
+  <div class="flex gap-1">
+    <% if previous_page? %>
+      <%= link_to page_url(page - 1),
+        class: "rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800",
+        "aria-label": "Previous page" do %>
+        <i class="fa-solid fa-chevron-left"></i>
+      <% end %>
+    <% end %>
+
+    <% (1..total_pages).each do |page_num| %>
+      <% if page_num == page %>
+        <span class="rounded-md bg-primary-600 px-3 py-2 text-sm font-medium text-white" aria-current="page"><%= page_num %></span>
+      <% elsif show_page?(page_num) %>
+        <%= link_to page_num, page_url(page_num),
+          class: "rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800" %>
+      <% elsif show_ellipsis?(page_num) %>
+        <span class="px-2 py-2 text-sm text-gray-400">&hellip;</span>
+      <% end %>
+    <% end %>
+
+    <% if next_page? %>
+      <%= link_to page_url(page + 1),
+        class: "rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800",
+        "aria-label": "Next page" do %>
+        <i class="fa-solid fa-chevron-right"></i>
+      <% end %>
+    <% end %>
+  </div>
+</nav>

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

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class PaginationComponent < Panda::Core::Base
+        def initialize(page:, total_pages:, total_count:, per_page:, item_name: "items", **attrs)
+          @page = page
+          @total_pages = total_pages
+          @total_count = total_count
+          @per_page = per_page
+          @item_name = item_name
+          super(**attrs)
+        end
+
+        attr_reader :page, :total_pages, :total_count, :per_page, :item_name
+
+        def render?
+          total_pages > 1
+        end
+
+        def first_item
+          ((page - 1) * per_page) + 1
+        end
+
+        def last_item
+          [page * per_page, total_count].min
+        end
+
+        def previous_page?
+          page > 1
+        end
+
+        def next_page?
+          page < total_pages
+        end
+
+        def show_page?(page_num)
+          page_num == page ||
+            (page_num - page).abs <= 2 ||
+            page_num == 1 ||
+            page_num == total_pages
+        end
+
+        def show_ellipsis?(page_num)
+          (page_num - page).abs == 3
+        end
+
+        def page_url(page_num)
+          query = helpers.request.query_parameters.merge("page" => page_num)
+          "#{helpers.request.path}?#{query.to_query}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<%# Chrome (bg/border/radius) is themeable via --panda-panel-* tokens — see
+    app/assets/tailwind/application.css. Fallbacks resolve to today's
+    bg-white/border-gray-200/rounded-2xl exactly, so this is a no-op unless a
+    host app sets data-theme. %>
+<div class="col-span-3 mt-4 rounded-[var(--panda-panel-radius,var(--radius-2xl))] border border-[var(--panda-panel-border,var(--color-gray-200))] bg-[var(--panda-panel-bg,var(--color-white))] shadow-sm">
+  <% if heading_slot? %>
+    <div class="flex items-center text-sm font-medium px-4 py-3 text-gray-500 truncate border-b border-[var(--panda-panel-border,var(--color-gray-200))]">
+      <%= heading_slot %>
+    </div>
+  <% end %>
+
+  <div class="px-4 py-3 text-black">
+    <% if body_slot? %>
+      <%= body_slot %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </div>
+</div>

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

@@ -4,37 +4,12 @@ module Panda
   module Core
     module Admin
       class PanelComponent < Panda::Core::Base
-        def view_template(&block)
-          # Capture block content differently based on context (ERB vs Phlex)
-          if block_given?
-            if defined?(view_context) && view_context
-              # Called from ERB - capture HTML output
-              @body_html = view_context.capture { yield(self) }
-            else
-              # Called from Phlex - execute block directly to set instance variables
-              yield(self)
-            end
-          end
+        renders_one :heading_slot
 
-          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-gray-800 shadow-inherit/20") do
-            @heading_content&.call
+        renders_one :body_slot
 
-            div(class: "p-4 text-black bg-white rounded-b-lg") do
-              if @body_content
-                @body_content.call
-              elsif @body_html
-                raw(@body_html)
-              end
-            end
-          end
-        end
-
-        def heading(**props)
-          @heading_content = -> { render(Panda::Core::Admin::HeadingComponent.new(**props.merge(level: :panel))) }
-        end
-
-        def body(&block)
-          @body_content = block
+        def initialize(**attrs)
+          super
         end
       end
     end

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

@@ -0,0 +1,6 @@
+<%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+  <% panel.with_heading_slot { heading } %>
+  <div class="<%= prose_classes %>">
+    <%= simple_format(text) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Renders a PanelComponent containing prose-formatted text via `simple_format`.
+      # Self-hides via `render?` when text is blank.
+      #
+      # Lives in panda-core because rich-text prose display inside panels is a generic
+      # admin pattern (notes, descriptions, agendas) used across any Panda app, not
+      # specific to any single domain.
+      #
+      # @example Basic usage
+      #   render Panda::Core::Admin::ProsePanelComponent.new(heading: "Notes", text: @person.notes)
+      #
+      # @example With extra prose styling
+      #   render Panda::Core::Admin::ProsePanelComponent.new(
+      #     heading: "Internal Notes",
+      #     text: @case.notes,
+      #     prose_class: "text-gray-600"
+      #   )
+      class ProsePanelComponent < Panda::Core::Base
+        attr_reader :heading, :text, :prose_class
+
+        def initialize(heading:, text:, prose_class: "", **attrs)
+          @heading = heading
+          @text = text
+          @prose_class = prose_class
+          super(**attrs)
+        end
+
+        def render?
+          text.present?
+        end
+
+        def prose_classes
+          base = "prose prose-sm max-w-none"
+          prose_class.present? ? "#{base} #{prose_class}" : base
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<div class="relative px-2 mb-2" data-controller="global-search" data-global-search-url-value="<%= search_url %>">
+  <div class="relative">
+    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-white/40 text-xs pointer-events-none"></i>
+    <input
+      type="text"
+      placeholder="Search..."
+      autocomplete="off"
+      data-global-search-target="input"
+      data-action="input->global-search#onInput keydown->global-search#onInputKeydown focus->global-search#onFocus"
+      class="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-12 py-2 text-sm text-white placeholder-white/40 focus:bg-white/10 focus:border-white/20 focus:outline-none focus:ring-0 transition-colors"
+    />
+    <kbd class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-white/30 border border-white/15 rounded px-1.5 py-0.5 pointer-events-none"><%= shortcut_hint %></kbd>
+  </div>
+
+  <div
+    data-global-search-target="results"
+    class="hidden absolute left-2 right-2 top-full mt-1 max-h-80 overflow-y-auto rounded-xl border border-white/10 bg-gray-900/95 backdrop-blur-sm shadow-xl z-50"
+  ></div>
+</div>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class SearchBarComponent < Panda::Core::Base
+        def initialize(**attrs)
+          super
+        end
+
+        def render?
+          Panda::Core::SearchRegistry.providers.any? { |p| p[:search_class].respond_to?(:admin_search) }
+        end
+
+        def search_url
+          Panda::Core::Engine.routes.url_helpers.admin_search_path
+        end
+
+        def shortcut_hint
+          mac? ? "\u2318K" : "Ctrl+K"
+        end
+
+        private
+
+        def mac?
+          true # Safe default for shortcut display; JS handles both
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+  <%= form_with url: url, method: :get, local: true, class: "flex flex-col gap-3 sm:flex-row sm:items-center w-full" do %>
+    <div class="flex-1 max-w-md grid grid-cols-1">
+      <%= text_field_tag search_name, search_value,
+        placeholder: search_placeholder,
+        class: "col-start-1 row-start-1 block w-full h-9 rounded-md bg-white py-1.5 pr-3 pl-9 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500" %>
+      <i class="fa-solid fa-magnifying-glass pointer-events-none col-start-1 row-start-1 ml-3 size-4 self-center text-gray-400 dark:text-gray-500"></i>
+    </div>
+
+    <div class="flex gap-2 items-center">
+      <% filters.each do |filter| %>
+        <%= filter %>
+      <% end %>
+
+      <%= submit_tag "Filter", class: "h-9 rounded-md bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:hover:bg-gray-600 cursor-pointer" %>
+
+      <% if show_clear %>
+        <%= link_to "Clear", clear_url, class: "rounded-md px-3 py-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class SearchFilterBarComponent < Panda::Core::Base
+        renders_many :filters
+
+        def initialize(url:, search_name: :q, search_value: nil, search_placeholder: "Search...", clear_url: nil, show_clear: false, **attrs)
+          @url = url
+          @search_name = search_name
+          @search_value = search_value
+          @search_placeholder = search_placeholder
+          @clear_url = clear_url || url
+          @show_clear = show_clear
+          super(**attrs)
+        end
+
+        attr_reader :url, :search_name, :search_value, :search_placeholder, :clear_url, :show_clear
+
+        def select_classes
+          "h-9 w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 dark:bg-gray-700 dark:text-white dark:ring-gray-600"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<div data-controller="clipboard"
+     data-clipboard-secret-value="<%= value %>"
+     data-clipboard-masked-value="<%= masked %>"
+     class="bg-gray-50 rounded-lg p-3 font-mono text-sm">
+  <div class="flex items-center gap-3">
+    <code data-clipboard-target="display" class="text-gray-700 break-all flex-1"><%= display_value %></code>
+    <button type="button"
+            data-action="click->clipboard#toggleReveal"
+            data-clipboard-target="revealButton"
+            class="<%= button_classes %>"
+            aria-label="Reveal secret value">
+      <i data-clipboard-target="revealIcon" class="fa-solid fa-eye"></i>
+      <span data-clipboard-target="revealText">Reveal</span>
+    </button>
+    <button type="button"
+            data-action="click->clipboard#copy"
+            data-clipboard-target="copyButton"
+            class="<%= button_classes %>"
+            aria-label="Copy secret value to clipboard">
+      <i data-clipboard-target="copyIcon" class="fa-solid fa-copy"></i>
+      <span data-clipboard-target="copyText">Copy</span>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class SecretFieldComponent < Panda::Core::Base
+        def initialize(value:, masked: true, **attrs)
+          @value = value
+          @masked = masked
+          super(**attrs)
+        end
+
+        attr_reader :value, :masked
+
+        def display_value
+          return value unless masked && value.present?
+
+          if value.length > 4
+            "\u2022" * 12 + value[-4..]
+          else
+            "\u2022" * value.length
+          end
+        end
+
+        def button_classes
+          "shrink-0 btn btn-secondary transition"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,160 @@
+<nav <%= tag.attributes(**attrs) %>>
+  <ul role="list" class="flex flex-col flex-1">
+    <%# Logo area — uses admin_logo config or falls back to admin_title text %>
+    <li class="hidden lg:block mt-4 mb-4 px-2">
+      <% if admin_logo %>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <%= safe_html(admin_logo) %>
+          </div>
+          <% if admin_logo_actions.any? || admin_settings_path %>
+            <div class="flex items-center gap-1">
+              <% admin_logo_actions.each do |action| %>
+                <%= helpers.link_to action[:path], class: "flex items-center justify-center w-7 h-7 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors", title: action[:title] do %>
+                  <i class="<%= action[:icon] %> text-sm"></i>
+                <% end %>
+              <% end %>
+              <% if admin_settings_path %>
+                <%= helpers.link_to admin_settings_path, class: "flex items-center justify-center w-7 h-7 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors", title: "Settings" do %>
+                  <i class="fa-solid fa-gear text-sm"></i>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <a class="p-0 text-xl font-medium text-white"><%= Panda::Core.config.admin_title || "Panda Admin" %></a>
+      <% end %>
+    </li>
+
+    <%= render Panda::Core::Admin::SearchBarComponent.new %>
+
+    <%
+      nav_items = Panda::Core::NavigationRegistry.build(@user, helpers: helpers)
+
+      top_items = nav_items.select { |item| item[:position] != :bottom }
+      bottom_items = nav_items.select { |item| item[:position] == :bottom }
+
+      def collect_paths(items)
+        items.flat_map do |item|
+          paths = item[:path] ? [item[:path]] : []
+          paths += collect_paths(item[:children] || [])
+          paths
+        end
+      end
+
+      all_paths = collect_paths(nav_items).compact
+      current_path = helpers.request&.path || "/"
+      active_path = all_paths
+        .sort_by { |path| -path.length }
+        .find { |path| current_path == path || current_path.starts_with?(path + "/") }
+    %>
+
+    <% if sectioned?(top_items) %>
+      <%# Section-aware navigation — insert headings when section changes, preserving order %>
+      <% current_section = nil %>
+      <% section_count = 0 %>
+      <% top_items.each_with_index do |item, index| %>
+        <% item_section = item[:section].presence %>
+        <% if item_section && item_section != current_section %>
+          <% current_section = item_section %>
+          <li class="px-3 <%= section_count > 0 ? (compact_navigation? ? 'mt-3' : 'mt-5') : '' %> <%= compact_navigation? ? 'mb-0.5' : 'mb-1' %>">
+            <span class="text-[10px] font-bold uppercase tracking-widest text-white/40 sidebar-section-label"><%= current_section %></span>
+          </li>
+          <% section_count += 1 %>
+        <% end %>
+        <%
+          has_children = item[:children].present?
+          if has_children
+            is_active = item[:children].any? { |child| child[:path] == active_path }
+          else
+            is_active = item[:path] == active_path
+          end
+        %>
+        <%= render Panda::Core::Admin::Navigation::ItemComponent.new(
+          label: item[:label],
+          icon: item[:icon],
+          path: item[:path],
+          active: is_active,
+          menu_id: "sub-menu-#{section_count}-#{index}",
+          target: item[:target],
+          badge: item[:badge],
+          badge_color: item[:badge_color],
+          compact: compact_navigation?
+        ) do |nav_item|
+          if has_children
+            item[:children].each do |child|
+              child_is_active = child[:path] == active_path
+              nav_item.with_sub_item(label: child[:label], path: child[:path], active: child_is_active, target: child[:target])
+            end
+          end
+        end %>
+      <% end %>
+    <% else %>
+      <%# Legacy flat navigation (no section keys) %>
+      <% top_items.each_with_index do |item, index| %>
+        <%
+          has_children = item[:children].present?
+          if has_children
+            is_active = item[:children].any? { |child| child[:path] == active_path }
+          else
+            is_active = item[:path] == active_path
+          end
+        %>
+        <%= render Panda::Core::Admin::Navigation::ItemComponent.new(
+          label: item[:label],
+          icon: item[:icon],
+          path: item[:path],
+          active: is_active,
+          menu_id: "sub-menu-#{index}",
+          target: item[:target],
+          badge: item[:badge],
+          badge_color: item[:badge_color],
+          compact: compact_navigation?
+        ) do |nav_item|
+          if has_children
+            item[:children].each do |child|
+              child_is_active = child[:path] == active_path
+              nav_item.with_sub_item(label: child[:label], path: child[:path], active: child_is_active, target: child[:target])
+            end
+          end
+        end %>
+      <% end %>
+    <% end %>
+
+    <% bottom_items.each do |section| %>
+      <%
+        is_section_active = (section[:children] || []).any? { |child|
+          child[:path] && current_path.starts_with?(child[:path])
+        }
+      %>
+      <%= render Panda::Core::Admin::Navigation::UserMenuComponent.new(user: helpers.current_user, active: is_section_active) do |user_menu|
+        (section[:children] || []).each do |item|
+          item_path = item[:path]
+          if item_path.nil? && item[:path_helper]
+              helper_name = item[:path_helper].to_sym
+            item_path = helpers.panda_core.public_send(helper_name) if helpers.panda_core.respond_to?(helper_name)
+          end
+
+          item_active = item_path && current_path.starts_with?(item_path)
+          user_menu.with_sub_item(
+            label: item[:label],
+            path: item_path,
+            active: item_active,
+            method: item[:method],
+            button_options: item[:button_options] || {}
+          )
+        end
+      end %>
+    <% end %>
+
+    <% sidebar_footer = Panda::Core.config.admin_sidebar_footer %>
+    <li class="px-2 py-3 border-t border-white/10">
+      <% if sidebar_footer %>
+        <%= safe_html(sidebar_footer) %>
+      <% else %>
+        <span class="text-xs text-white/30">Panda Core v<%= Panda::Core::VERSION %></span>
+      <% end %>
+    </li>
+  </ul>
+</nav>