avo 3.30.4 → 4.0.0.beta.2

data/app/components/avo/modal_component.html.erb

@@ -1,28 +1,60 @@
-<div class="modal-container fixed inset-0 w-full min-h-screen z-[100] flex justify-center items-center"
-  data-controller="modal"
+<div class="<%= class_names("modal", {"modal--width-#{@width}": @width.present?, "modal--height-#{@height}": @height.present?}) %>"
+  data-controller="modal modal-size"
   data-modal-target="modal"
   data-modal-close-modal-on-backdrop-click-value="<%= close_modal_on_backdrop_click %>"
+  data-modal-size-current-width-value="<%= @width %>"
+  data-modal-size-current-height-value="<%= @height %>"
 >
-  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-modal-target="backdrop" data-action="click->modal#close" ></div>
-  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg inset-auto bg-white flex z-50 relative shadow-modal <%= overflow_classes %> <%= width_classes %> <%= height_classes %>">
-    <div class="flex-1 flex flex-col justify-between">
-      <div>
-        <% if heading? %>
-          <div class="p-6 pb-0 text-2xl tracking-normal font-semibold text-black">
-            <%= heading %>
+  <div aria-expanded="true" class="modal__overlay" data-modal-target="backdrop" data-action="click->modal#close"></div>
+  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal__card-container" data-modal-size-target="container">
+    <div class="modal__card">
+      <div class="card">
+        <div class="card__wrapper">
+          <% if has_header? %>
+            <div class="card__header">
+              <div class="flex gap-4 items-start w-full">
+                <div class="flex grow items-center min-w-0">
+                  <div class="flex flex-col gap-0.5 items-start">
+                    <% if @title.present? || heading? %>
+                      <p class="modal__title">
+                        <%= @title.presence || heading %>
+                      </p>
+                    <% end %>
+                    <% if @description.present? %>
+                      <p class="card__description">
+                        <%= @description %>
+                      </p>
+                    <% end %>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <% if false && Rails.env.development? %>
+                    <%= render partial: "avo/modal/size_selector", locals: { type: 'width', width: @width, height: @height } %>
+                    <%= render partial: "avo/modal/size_selector", locals: { type: 'height', width: @width, height: @height } %>
+                  <% end %>
+                  <% if @show_close_button %>
+                    <button class="modal__close-button" data-action="click->modal#closeModal" aria-label="<%= t('avo.close') %>">
+                      <%= helpers.svg "heroicons/outline/x-mark", class: "size-5" %>
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+            </div>
+          <% end %>
+          <div class="card__body <%= @body_class %>">
+            <% if content? %>
+              <div class="modal__body-content overflow-auto">
+                <%= content %>
+              </div>
+            <% end %>
           </div>
-        <% end %>
-        <% if content? %>
-          <div class="p-6 text-base text-gray-500">
-            <%= content %>
-          </div>
-        <% end %>
-      </div>
-      <% if controls? %>
-        <div class="flex justify-end items-baseline space-x-4 p-4 bg-gray-100">
-          <%= controls %>
+          <% if controls? %>
+            <div class="card__footer modal__controls">
+              <%= controls %>
+            </div>
+          <% end %>
         </div>
-      <% end %>
+      </div>
     </div>
   </div>
 </div>

data/app/components/avo/modal_component.rb

@@ -4,25 +4,20 @@ class Avo::ModalComponent < Avo::BaseComponent
   renders_one :heading
   renders_one :controls
 
-  prop :width, default: :md
+  prop :width, default: :xl # :sm, :md, :lg, :xl, :2xl, :3xl, :4xl, :full
+  prop :height, default: :auto # :auto, :sm, :md, :lg, :xl, :2xl, :3xl, :4xl, :full
   prop :body_class
   prop :overflow, default: :auto
   prop :close_modal_on_backdrop_click, default: true, reader: :public
-
-  def width_classes
-    case @width.to_sym
-    when :md
-      "w-11/12 lg:w-1/2 sm:max-w-168"
-    when :xl
-      "w-11/12 lg:w-3/4"
-    end
-  end
+  prop :title
+  prop :description
+  prop :show_close_button, default: true
 
   def height_classes
     "max-h-[calc(100dvh-5rem)] min-h-1/4"
   end
 
-  def overflow_classes
-    @overflow == :auto ? "overflow-auto" : ""
+  def has_header?
+    @title.present? || @description.present? || heading? || @show_close_button
   end
 end

data/app/components/avo/paginator_component.html.erb

@@ -1,38 +1,51 @@
-<div class="flex flex-col sm:flex-row items-center justify-between aborder-t aborder-slate-200 rounded-2xl space-y-2 sm:space-y-0">
-  <div class="flex-2 sm:flex sm:items-center sm:justify-between">
-    <div>
-      <div class="text-sm leading-5 text-slate-600 flex items-center">
-        <div data-controller="per-page">
-          <div class="flex items-center">
-            <%= content_tag :label, name: t('avo.per_page').downcase do %>
-              <%= select_tag 'per_page',
-                options_for_select(per_page_options, @index_params[:per_page]),
-                class: 'appearance-none inline-flex bg-white-100 disabled:bg-white-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-none focus:border-slate-400 outline w-16 mr-1 text-sm',
-                data: {
-                  'turbo-frame': @turbo_frame,
-                  'per-page-target': 'selector',
-                  action: 'change->per-page#reload'
-                }
-              %> <%= t('avo.per_page').downcase %>
-            <% end %>
-          </div>
-          <% per_page_options.each do |option| %>
-            <%= link_to "Change to #{option} items per page", change_items_per_page_url(option), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': @turbo_frame %>
+<div class="pagination">
+  <%# Left: per-page selector %>
+  <div class="pagination__per-page">
+    <%= render ui.dropdown(classes: "start-0 end-auto") do |component| %>
+      <% component.with_trigger do %>
+        <button
+          type="button"
+          class="pagination__per-page-input"
+          data-action="<%= component.action %>"
+          aria-haspopup="listbox"
+          aria-expanded="false"
+        >
+          <span class="pagination__per-page-value"><%== current_per_page_label %></span>
+          <span class="pagination__per-page-icon" aria-hidden="true">
+            <%= helpers.svg "tabler/outline/chevron-down" %>
+          </span>
+        </button>
+      <% end %>
+      <% component.with_items do %>
+        <% per_page_options.each do |option| %>
+          <%= link_to change_items_per_page_url(option),
+            class: "dropdown-menu__item",
+            data: { turbo_frame: @turbo_frame } do %>
+            <%== per_page_option_label(option) %>
           <% end %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="flex">
-    <div class="flex-2 sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left pagy-gem-version-<%= helpers.pagy_major_version %>">
-      <% if @resource.pagination_type.default? %>
-        <div class="text-sm text-slate-600 mr-4"><%== helpers.pagy_info @pagy %></div>
+        <% end %>
       <% end %>
+    <% end %>
+  </div>
 
-      <% if @pagy.pages > 1 %>
-        <%# @todo: add first & last page. make the first and last buttons rounded %>
-        <%== helpers.pagy_nav @pagy, anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"" %>
-      <% end %>
-    </div>
+  <%# Right: info + navigation grouped pill %>
+  <div class="pagination__controls">
+    <% if @resource.pagination_type.default? %>
+      <div class="pagination__info">
+        <span class="pagination__info-number">
+          <%= "#{@pagy.from}-#{@pagy.to}" %>
+        </span>
+        &nbsp; of &nbsp;
+        <span>
+          <%= "#{@pagy.count}" %>
+        </span>
+      </div>
+    <% end %>
+
+    <% if @pagy.pages > 1 %>
+      <div class="pagination__nav">
+        <%== @pagy.series_nav(anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"") %>
+      </div>
+    <% end %>
   </div>
 </div>

data/app/components/avo/paginator_component.rb

@@ -29,11 +29,7 @@ class Avo::PaginatorComponent < Avo::BaseComponent
   def render?
     return false if @discreet_pagination && @pagy.pages <= 1
 
-    if ::Pagy::VERSION >= ::Gem::Version.new("9.0")
-      @pagy.limit > 0
-    else
-      @pagy.items > 0
-    end
+    @pagy.limit > 0
   end
 
   def per_page_options
@@ -47,4 +43,13 @@ class Avo::PaginatorComponent < Avo::BaseComponent
       options.sort.uniq
     end
   end
+
+  def current_per_page_label
+    per_page_option_label(@index_params[:per_page])
+  end
+
+  def per_page_option_label(option)
+    num = helpers.content_tag(:span, option, class: "pagination__per-page-option-num")
+    "#{num} #{t("avo.per_page").downcase}".html_safe
+  end
 end

data/app/components/avo/panel_name_component.html.erb

@@ -1,4 +1,4 @@
-<div class="text-2xl tracking-normal font-semibold text-gray-800 items-center flex flex-1 text-center sm:text-left justify-center sm:justify-start" data-target="title">
+<div class="text-2xl tracking-normal font-semibold text-gray-800 items-center flex flex-1 text-center sm:text-start justify-center sm:justify-start" data-target="title">
   <span class="block"><%= link_to_if @url.present?, @name, @url, target: @target, class: class_names("text-gray-800", @classes) %></span>
   <%= body %>
 </div>

data/app/components/avo/profile_item_component.html.erb

@@ -1,19 +1,19 @@
 <% if method.present? %>
   <%= button_to path,
     form_class: "flex-1 flex",
-    class: button_classes,
+    class: menu_item_classes,
     target: target,
     title: title,
     method: method,
     disabled: disabled,
     params: params do %>
-    <%= helpers.svg(icon, class: 'h-4 mr-1') if icon.present? %> <%= label %>
+    <%= helpers.svg(icon, class: 'sidebar-icon') if icon.present? %> <%= label %>
   <% end %>
 <% else %>
   <%= link_to path,
-    class: button_classes,
+    class: menu_item_classes,
     target: target,
     title: title do %>
-    <%= helpers.svg(icon, class: 'h-4 mr-1') if icon.present? %> <%= label %>
+    <%= helpers.svg(icon, class: 'sidebar-icon') if icon.present? %> <%= label %>
   <% end %>
 <% end %>

data/app/components/avo/profile_item_component.rb

@@ -20,9 +20,7 @@ class Avo::ProfileItemComponent < Avo::BaseComponent
     @title || @label
   end
 
-  private
-
-  def button_classes
-    "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-gray-800 font-semibold hover:bg-primary-100 block px-4 py-1 w-full py-3 text-center rounded w-full"
+  def menu_item_classes
+    "sidebar-profile__menu-item #{classes}".strip
   end
 end

data/app/components/avo/referrer_params_component.html.erb

@@ -4,5 +4,5 @@
 <%= hidden_field_tag :via_record_id, params[:via_record_id] if params[:via_record_id] %>
 <%= hidden_field_tag :via_relation, params[:via_relation] if params[:via_relation] %>
 <%= hidden_field_tag :via_belongs_to_resource_class, params[:via_belongs_to_resource_class] if params[:via_belongs_to_resource_class] %>
-<%= hidden_field_tag :return_to, e(params[:return_to]) if params[:return_to].present? %>
+<%= hidden_field_tag :return_to, params[:return_to] if params[:return_to].present? %>
 <%= hidden_field_tag :referrer, @back_path if params[:via_resource_class] %>

data/app/components/avo/resource_component.rb

@@ -75,15 +75,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     helpers.resource_path(**args)
   end
 
-  def main_panel
-    @main_panel ||= @resource.get_items.find do |item|
-      item.is_main_panel?
-    end
-  end
-
   def sidebars
-    return [] if Avo.license.lacks_with_trial(:resource_sidebar)
-
     @sidebars ||= @item.items
       .select do |item|
         item.is_sidebar?
@@ -161,8 +153,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     a_link destroy_path,
       style: :text,
       color: :red,
-      icon: "avo/trash",
-      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      icon: "tabler/outline/trash",
       title: control.title,
       aria_label: control.title,
       data: {
@@ -186,7 +177,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
 
     add_stimulus_attributes_for(@resource, data_attributes, "saveButton")
 
-    a_button color: :primary,
+    a_button color: :accent,
       style: :primary,
       loading: true,
       type: :submit,
@@ -200,11 +191,11 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless can_see_the_edit_button?
 
     a_link edit_path,
-      color: :primary,
+      color: :accent,
       style: :primary,
       title: control.title,
       data: {tippy: control.title ? :tooltip : nil},
-      icon: "avo/edit" do
+      icon: "tabler/outline/edit" do
       control.label
     end
   end
@@ -213,8 +204,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless is_a_related_resource? && can_detach?
 
     a_link detach_path,
-      icon: "avo/detach",
-      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+      icon: "tabler/outline/unlink",
       style: :text,
       data: {
         turbo_method: :delete,
@@ -228,9 +218,9 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless can_see_the_create_button?
 
     a_link create_path,
-      color: :primary,
+      color: :accent,
       style: :primary,
-      icon: "heroicons/outline/plus",
+      icon: "tabler/outline/plus",
       data: {
         target: :create
       } do
@@ -242,8 +232,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     return unless can_attach?
 
     a_link attach_path,
-      icon: "heroicons/outline/link",
-      color: :primary,
+      icon: "tabler/outline/link",
       style: :text,
       data: {
         turbo_frame: Avo::MODAL_FRAME_ID,

data/app/components/avo/resource_listing_component.html.erb

@@ -0,0 +1,22 @@
+<%= content_tag :div, id: "#{@resource.model_key}_body_content" do %>
+  <%= render Avo::SearchOverlayComponent.new %>
+
+  <% if @resources.present? %>
+    <div class="relative mt-0 flex w-full flex-1">
+      <%= render(@resource.resolve_component(specific_view_component).new(
+        resources: @resources,
+        resource: @resource,
+        reflection: @reflection,
+        parent_record: @parent_record,
+        parent_resource: @parent_resource,
+        pagy: @pagy,
+        query: @query,
+        actions: @actions,
+        turbo_frame: @turbo_frame,
+        index_params: @index_params
+      )) %>
+    </div>
+  <% else %>
+    <%= helpers.empty_state by_association: params[:related_name].present? %>
+  <% end %>
+<% end %>

data/app/components/avo/resource_listing_component.rb

@@ -0,0 +1,28 @@
+class Avo::ResourceListingComponent < Avo::BaseComponent
+  prop :resources
+  prop :resource
+  prop :reflection
+  prop :parent_record
+  prop :parent_resource
+  prop :pagy
+  prop :query
+  prop :actions
+  prop :turbo_frame
+  prop :index_params
+
+  def specific_view_component
+    Avo.view_type_manager.component_for(@resource.view_type)
+  end
+
+  def paginator_component
+    Avo::PaginatorComponent.new(
+      pagy: @pagy,
+      turbo_frame: @turbo_frame,
+      index_params: @index_params,
+      resource: @resource,
+      parent_record: @parent_record,
+      parent_resource: @parent_resource,
+      discreet_pagination: field&.discreet_pagination
+    )
+  end
+end

data/app/components/avo/resource_sidebar_component.html.erb

@@ -1,4 +1,4 @@
-<div class="resource-sidebar-component divide-y"
+<div class="resource-sidebar-component space-y-4"
   data-component-name="<%= self.class.to_s.underscore %>"
   data-component-index="<%= @index %>"
   data-resource-name="<%= @resource.class.to_s %>"
@@ -12,5 +12,5 @@
     field_component_extra_args: {
       stacked: true
     }
-  )%>
+  ) %>
 </div>

data/app/components/avo/resource_sidebar_component.rb

@@ -7,8 +7,4 @@ class Avo::ResourceSidebarComponent < Avo::BaseComponent
   prop :params
   prop :form
   prop :view, reader: :public
-
-  def render?
-    Avo.license.has_with_trial(:resource_sidebar)
-  end
 end

data/app/components/avo/row_component.html.erb

@@ -6,7 +6,7 @@
     }
   ),
   data: {
-    component: self.class.to_s
+    component_name:
   } do %>
   <%= body %>
 <% end %>

data/app/components/avo/row_selector_component.html.erb

@@ -6,10 +6,8 @@
     title: t("avo.select_item"),
     autocomplete: :off,
     checked: @checked,
-    class: class_names("mx-3 rounded checked:bg-primary-400 focus:checked:!bg-primary-400", {
-      "absolute inset-auto left-0 mt-3 z-10 hidden group-hover:block checked:block": @floating,
-      "w-5 h-5": @size.to_sym == :lg,
-      "w-4 h-4": @size.to_sym != :lg,
+    class: class_names("mx-2", {
+      "absolute block start-0 top-0 mt-3 z-10 hidden": @floating,
     }),
     data: {
       index: @index,

data/app/components/avo/row_selector_component.rb

@@ -2,7 +2,6 @@
 
 class Avo::RowSelectorComponent < Avo::BaseComponent
   prop :floating, default: false
-  prop :size, default: :md
   prop :index
   prop :checked, default: false
 

data/app/components/avo/search_overlay_component.html.erb

@@ -0,0 +1,6 @@
+<div class="avo-search-overlay" data-resource-search-target="overlay">
+  <div class="button-spinner">
+    <div class="double-bounce1"></div>
+    <div class="double-bounce2"></div>
+  </div>
+</div>

data/app/components/avo/search_overlay_component.rb

@@ -0,0 +1,2 @@
+class Avo::SearchOverlayComponent < Avo::BaseComponent
+end

data/app/components/avo/sidebar/base_item_component.rb

@@ -24,14 +24,14 @@ class Avo::Sidebar::BaseItemComponent < Avo::BaseComponent
     result
   end
 
-  def section_collapse_data_animation
-    {
-      transition_enter: "transition ease-out duration-100",
-      transition_enter_start: "transform opacity-0 -translate-y-4",
-      transition_enter_end: "transform opacity-100 translate-y-0",
-      transition_leave: "transition ease-in duration-75",
-      transition_leave_start: "transform opacity-100 translate-y-0",
-      transition_leave_end: "transform opacity-0 -translate-y-4",
-    }
+  def data
+    result = {}
+    if collapsable
+      result[:controller] = "menu"
+      result[:menu_target] = "self"
+      result[:menu_key_param] = key
+      result[:menu_default_collapsed_state] = collapsed ? "collapsed" : "expanded"
+    end
+    result
   end
 end

data/app/components/avo/sidebar/group_component.html.erb

@@ -1,43 +1,39 @@
-<div class="pb-2 space-y-1"
-  <% if collapsable %>
-    data-controller="menu"
-    data-menu-target="self"
-    data-menu-key-param="<%= key %>"
-    data-menu-default-collapsed-state="<%= collapsed ? 'collapsed' : 'expanded' %>"
-  <% end %>
->
+<%= tag.div class: "sidebar-group", data: data do %>
   <% if item.name.present? %>
     <% if collapsable %>
-      <div
-        class="flex justify-between cursor-pointer px-10 pr-2 pt-2 pb-0 text-gray-400"
+      <button
+        type="button"
+        class="sidebar-group__header justify-between"
         data-action="click->menu#triggerCollapse"
-        data-menu-key-param="<%= key %>"
+        data-menu-target="trigger"
+        aria-expanded="<%= !collapsed %>"
       >
-        <div class="flex items-center text-xs uppercase font-semibold leading-none">
-          <%= item.name %>
+        <div class="sidebar-group__header-inner">
+          <span><%= item.name %></span>
         </div>
-        <div class="<%= 'rotate-90' if collapsed %>"
+        <span class="sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
           data-menu-target="svg"
-          >
-          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4 mr-0.5"%>
-        </div>
-      </div>
+        >
+          <%= helpers.svg 'heroicons/outline/chevron-down', class: 'h-4' %>
+        </span>
+      </button>
     <% else %>
-      <div class="flex justify-between px-10 pr-2 pt-2 pb-0 text-gray-400">
-        <div class="flex items-center text-xs uppercase font-semibold leading-none">
-          <%= item.name %>
-        </div>
-      </div>
+       <div class="sidebar-group__header">
+          <div class="sidebar-group__header-inner">
+            <span><%= item.name %></span>
+          </div>
+       </div>
     <% end %>
   <% end %>
 
-  <%= content_tag :div, class: class_names("w-full space-y-1", {"hidden": collapsed}),
+  <%= content_tag :div,
+    hidden: collapsed,
+    class: "sidebar-group__items",
     data: {
       menu_target: :items,
-      **section_collapse_data_animation
     } do %>
     <% @items.each do |item| %>
-      <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
+      <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item, group_has_icons: group_has_any_icon? %>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/sidebar/group_component.rb

@@ -1,4 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::Sidebar::GroupComponent < Avo::Sidebar::BaseItemComponent
+  # True if any visible item in the group has an icon (so all items should reserve icon space for alignment).
+  def group_has_any_icon?
+    @items.any? { |child| child.try(:icon).present? }
+  end
 end

data/app/components/avo/sidebar/link_component.html.erb

@@ -1,14 +1,37 @@
 <% if @path.present? %>
-  <%= link_caller.send link_method, @path, class: classes, active: @active, target: @target, data: @data, **@args do %>
-    <%= helpers.svg @icon, class: "h-4 text-gray-700" if @icon.present? %>
-    <%= @label %>
+  <%= link_caller.send link_method, @path, class: "sidebar-link", active: @active, target: @target, data: @data, disabled: @disabled, "aria-disabled": @disabled, **@args do %>
+    <% if @reserve_icon_space || link_icon.present? %>
+      <span class="sidebar-link__icon-wrapper sidebar-icon<%= ' sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
+        <%= helpers.svg link_icon, class: "sidebar-link__icon sidebar-icon" if link_icon.present? %>
+      </span>
+    <% end %>
+    <span><%= @label %></span>
     <% if @target == :_blank %>
-      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3 mr-2') %>
+      <%= helpers.svg("tabler/outline/external-link", class: "sidebar-link__external-icon sidebar-icon") %>
     <% end %>
   <% end %>
 <% else %>
-  <%= content_tag :div, class: classes, active: @active, target: @target, data: @data do %>
-    <%= helpers.svg @icon, class: "h-4 text-gray-700" if @icon.present? %>
-    <%= @label %>
+  <%= content_tag :div, class: "sidebar-link", active: @active, target: @target, data: @data do %>
+    <% if @reserve_icon_space || link_icon.present? %>
+      <span class="sidebar-link__icon-wrapper sidebar-icon<%= ' sidebar-link__icon-wrapper--placeholder' if link_icon.blank? %>">
+        <%= helpers.svg link_icon, class: "sidebar-link__icon sidebar-icon" if link_icon.present? %>
+      </span>
+    <% end %>
+    <span><%= @label %></span>
   <% end %>
 <% end %>
+<% if @items.present? && parent_link_active? %>
+  <div class="sidebar-subitem__items">
+    <% @items.each_with_index do |item, index| %>
+      <% if item.path.present? %>
+        <%= link_caller.send link_method, item.path, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: item.data, disabled: @disabled, "aria-disabled": @disabled, **item.args do %>
+          <span><%= item.try(:label).presence || item.try(:name).presence %></span>
+        <% end %>
+      <% else %>
+        <%= content_tag :div, class: "sidebar-subitem #{subitem_bar_class(index)}", active: @active, target: item.target, data: item.data do %>
+          <span><%= item.try(:label).presence || item.try(:name).presence %></span>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>