spree_admin 5.2.0.rc2 → 5.2.0

data/app/views/spree/admin/posts/_form.html.erb

@@ -25,10 +25,7 @@
   <div class="col-lg-4">
     <div class="card mb-4">
       <div class="card-body">
-        <div class="form-group">
-          <%= f.label :image, Spree.t(:featured_image) %>
-          <%= render 'active_storage/upload_form', form: f, field_name: :image, width: 1200, height: 600, crop: true, css: 'flex-col' %>
-        </div>
+        <%= f.spree_file_field :image, width: 1200, height: 600, crop: true, css: 'flex-col', label: Spree.t(:featured_image) %>
       </div>
     </div>
 

data/app/views/spree/admin/posts/filters.html.erb

@@ -1,10 +1,16 @@
-<%= search_form_for [:admin, @search], class: "filter-wrap", data: {controller: "filters dropdown"} do |f| %>
-  <div class="d-flex flex-column flex-lg-row gap-2">
-    <%= render 'spree/admin/shared/filters_search_bar', param: :search_by_title, label: Spree.t(:title) %>
+<%= search_form_for [:admin, @search], class: "filter-wrap", data: {controller: "filters dialog"} do |f| %>
+    <div class="d-flex flex-column flex-lg-row gap-2">
+      <%= render 'spree/admin/shared/filters_search_bar', param: :search_by_title, label: Spree.t(:title) %>
 
-    <%= render 'spree/admin/shared/filters_button' %>
-  </div>
-  <div data-dropdown-target="menu" id="table-filter" class="hidden">
+      <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+        <%= icon "adjustments", class: "mr-1" %>
+        <%= Spree.t("admin.filters") %>
+      <% end %>
+    </div>
+
+  <dialog class="drawer" data-dialog-target="dialog" id="posts-filters-drawer">
+    <%= drawer_header(Spree.t(:filter), 'dialog') %>
+    <div class="drawer-body">
     <div class="form-group">
       <%= f.label :author_id_eq, Spree.t(:author) %>
       <%= f.select :author_id_eq,
@@ -20,8 +26,12 @@
                { data: { filters_target: :input, controller: 'autocomplete-select' } } %>
     </div>
     <%= render_admin_partials(:posts_filters_partials, f: f) %>
-    <%= render 'spree/admin/shared/filter_submit' %>
-  </div>
+    </div>
+    <div class="drawer-footer">
+      <%= drawer_discard_button('dialog') %>
+      <%= render 'spree/admin/shared/filter_submit' %>
+    </div>
+  </dialog>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
 

data/app/views/spree/admin/products/_bulk_operations.html.erb

@@ -18,11 +18,11 @@
       url: spree.bulk_status_update_admin_products_path(status: :draft)
     ) %>
 
-    <%= dropdown do %>
+    <%= dropdown direction: 'top', portal: false do %>
       <%= dropdown_toggle do %>
         <%= icon('dots-vertical', class: "mr-0") %>
       <% end %>
-      <%= dropdown_menu direction: 'top', class: 'mb-2' do %>
+      <%= dropdown_menu class: 'mb-2' do %>
         <%= bulk_action_link(
           Spree.t("admin.bulk_ops.products.title.set_status", status: :archived),
           spree.bulk_modal_admin_products_path(kind: :set_status, status: :archived),

data/app/views/spree/admin/products/_filters.html.erb

@@ -1,9 +1,10 @@
 <% frame_name ||= nil %>
 
+
 <%= search_form_for product_list_filters_search_form_path,
   class: "filter-wrap",
   data: {
-    controller: "filters dropdown",
+    controller: "filters dialog",
     filters_url_value: request.url
   } do |f| %>
   <%= hidden_field_tag :frame_name, frame_name if frame_name.present? %>
@@ -11,9 +12,15 @@
   <div class="d-flex flex-column flex-lg-row gap-2">
     <%= render 'spree/admin/shared/filters_search_bar', param: :multi_search %>
     <%= render "spree/admin/products/table_filter_dropdown" %>
-    <%= render 'spree/admin/shared/filters_button' %>
+    <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+      <%= icon "adjustments", class: "mr-1" %>
+      <%= Spree.t("admin.filters") %>
+    <% end %>
   </div>
-  <div data-dropdown-target="menu" id="table-filter" class="hidden">
+
+  <dialog class="drawer" data-dialog-target="dialog" id="product-filters-drawer">
+    <%= drawer_header(Spree.t(:filter), 'dialog') %>
+    <div class="drawer-body">
     <%= f.hidden_field :status_eq, value: params.dig(:q, :status_eq) %>
     <div class="form-group">
       <%= f.label :taxons_id_in, Spree.t(:taxons) %>
@@ -44,10 +51,14 @@
         filters_target: "input",
       } %>
     </div>
-    
+
     <%= render_admin_partials(:products_filters_partials, f: f) %>
-    <%= render 'spree/admin/shared/filter_submit' %>
-  </div>
+    </div>
+    <div class="drawer-footer">
+      <%= drawer_discard_button('dialog') %>
+      <%= render 'spree/admin/shared/filter_submit' %>
+    </div>
+  </dialog>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
 

data/app/views/spree/admin/products/_table_filter_dropdown.html.erb

@@ -13,7 +13,7 @@
       <%= product_filter_stock_dropdown_value if product_filter_stock_dropdown_value != Spree.t('admin.products.any_stock') %>
     <% end %>
   <% end %>
-  <%= dropdown_menu class: 'w-100', style: 'min-width: 200px' do %>
+  <%= dropdown_menu do %>
     <h6 class="dropdown-header"><%= Spree.t('admin.products.by_status') %>:</h6>
 
     <%= active_link_to Spree.t('admin.products.all_statuses'), params.to_unsafe_h.deep_merge({page: nil, q: {status_eq: nil}}), class: 'dropdown-item', active: (params[:q] || {}).values_at(*%w[status_eq in_stock_items out_of_stock_items] ).all?(&:blank?) %>

data/app/views/spree/admin/products/edit.html.erb

@@ -8,8 +8,6 @@
 
   <%= render_admin_partials(:product_dropdown_partials, product: @product) %>
 
-  <div class="dropdown-divider"></div>
-
   <%= external_page_preview_link(@product) %>
 
   <% if can?(:clone, @product) %>

data/app/views/spree/admin/products/form/_status.html.erb

@@ -1,7 +1,4 @@
 <div class="card mb-4">
-  <div class="card-header">
-    <h5 class="card-title"><%= Spree.t(:status) %></h5>
-  </div>
   <div class="card-body">
     <div class="row mb-3">
       <div class="col-6">

data/app/views/spree/admin/products/form/_variants.html.erb

@@ -162,7 +162,7 @@
           <%= render 'spree/admin/products/form/variants/variant_template', default_stock_location: default_stock_location_for_product(@product) %>
           <div class="variants-table__body" data-variants-form-target="variantsContainer" data-test-id="product-variants-table">
           </div>
-          <div class="variants-table__footer">
+          <div class="variants-table__footer font-size-sm">
             <%= Spree.t('admin.variants_form.total_inventory_html', stock_location: current_store.default_stock_location.name, count: raw("<span data-variants-form-target='stockItemsCount'>#{@product.total_on_hand}</span>") )%>
           </div>
         </div>

data/app/views/spree/admin/profile/edit.html.erb

@@ -6,72 +6,20 @@
   <%= turbo_save_button_tag Spree.t('actions.update'), form: 'edit_user', data: { admin_target: 'save' } %>
 <% end %>
 
-<%= form_for @user, url: spree.admin_profile_path, method: :put, as: :user do |f| %>
-  <div class="row">
-    <div class="col-lg-6 offset-lg-3">
+<div class="row">
+  <div class="col-lg-6 offset-lg-3">
+    <%= form_for @user, url: spree.admin_profile_path, method: :put, as: :user do |f| %>
       <div class="card mb-4">
         <div class="card-header">
           <h5 class="card-title"><%= Spree.t('admin.personal_details') %></h5>
         </div>
         <div class="card-body">
-          <div class="form-group mb-4">
-            <%= f.label :email, class: 'form-label' %>
-            <%= f.email_field :email, class: 'form-control', required: true %>
-          </div>
-          <div class="form-group mb-4">
-            <%= f.label :first_name, class: 'form-label' %>
-            <%= f.text_field :first_name, class: 'form-control', required: true %>
-          </div>
-          <div class="form-group mb-4">
-            <%= f.label :last_name, class: 'form-label' %>
-            <%= f.text_field :last_name, class: 'form-control', required: true %>
-          </div>
-          <div class="form-group mb-0">
-            <div>
-              <%= f.label :avatar, class: 'form-label' %>
-            </div>
-            <%= render 'active_storage/upload_form', form: f, field_name: :avatar, crop: true %>
-          </div>
+          <%= f.spree_email_field :email, required: true %>
+          <%= f.spree_text_field :first_name, required: true %>
+          <%= f.spree_text_field :last_name, required: true %>
+          <%= f.spree_file_field :avatar, crop: true %>
         </div>
       </div>
-
-      <div class="card">
-        <div class="card-header">
-          <h5 class="card-title"><%= Spree.t('admin.notifications') %></h5>
-        </div>
-        <div class="card-body">
-          <% if @user.respond_to?(:deliver_invitation_accepted_email) %>
-            <div class="custom-control custom-switch mb-3">
-              <%= f.check_box :deliver_invitation_accepted_email, class: 'custom-control-input' %>
-              <%= f.label :deliver_invitation_accepted_email, 'Someone accepted your team invitation', class: 'custom-control-label' %>
-            </div>
-          <% end %>
-
-          <% if @user.respond_to?(:deliver_vendor_new_order_email) %>
-            <hr />
-            <div class="custom-control custom-switch mb-3">
-              <%= f.check_box :deliver_vendor_new_order_email, class: 'custom-control-input' %>
-              <%= f.label :deliver_vendor_new_order_email, 'New order notification', class: 'custom-control-label' %>
-            </div>
-          <% end %>
-
-          <% if @user.respond_to?(:deliver_vendor_onboarding_started_email) %>
-            <hr />
-            <div class="custom-control custom-switch mb-3">
-              <%= f.check_box :deliver_vendor_onboarding_started_email, class: 'custom-control-input' %>
-              <%= f.label :deliver_vendor_onboarding_started_email, 'Vendor started onboarding', class: 'custom-control-label' %>
-            </div>
-            <div class="custom-control custom-switch mb-3">
-              <%= f.check_box :deliver_vendor_onboarding_completed_email, class: 'custom-control-input' %>
-              <%= f.label :deliver_vendor_onboarding_completed_email, 'Vendor completed onboarding', class: 'custom-control-label' %>
-            </div>
-            <div class="custom-control custom-switch mb-3">
-              <%= f.check_box :deliver_vendor_approved_email, class: 'custom-control-input' %>
-              <%= f.label :deliver_vendor_approved_email, 'Vendor has been approved', class: 'custom-control-label' %>
-            </div>
-          <% end %>
-        </div>
-      </div>
-    </div>
+    <% end %>
   </div>
-<% end %>
+</div>

data/app/views/spree/admin/promotions/_filters.html.erb

@@ -1,17 +1,27 @@
-<%= search_form_for [:admin, @search], class: "filter-wrap", data: {controller: "filters dropdown"} do |f| %>
-  <div class="d-flex flex-column flex-lg-row gap-2">
-    <%= render 'spree/admin/shared/filters_search_bar', param: :name_cont, label: Spree.t(:name) %>
-    <%= render "spree/admin/promotions/table_filter_dropdown" %>
-    <%= render 'spree/admin/shared/filters_button' %>
-  </div>
-  <div data-dropdown-target="menu" id="table-filter" class="hidden">
-    <div class="form-group">
-      <%= label_tag :q_code_or_coupon_codes_code_eq, Spree.t(:code) %>
-      <%= f.search_field :code_or_coupon_codes_code_eq, class: "form-control", data: { filters_target: :input } %>
+<%= search_form_for [:admin, @search], class: "filter-wrap", data: {controller: "filters dialog"} do |f| %>
+    <div class="d-flex flex-column flex-lg-row gap-2">
+      <%= render 'spree/admin/shared/filters_search_bar', param: :name_cont, label: Spree.t(:name) %>
+      <%= render "spree/admin/promotions/table_filter_dropdown" %>
+      <%= button_tag type: 'button', class: 'btn btn-light d-flex align-items-center', data: { action: 'dialog#open' } do %>
+        <%= icon "adjustments", class: "mr-1" %>
+        <%= Spree.t("admin.filters") %>
+      <% end %>
     </div>
-    <%= render_admin_partials(:promotions_filters_partials, f: f) %>
-    <%= render 'spree/admin/shared/filter_submit' %>
-  </div>
+
+  <dialog class="drawer" data-dialog-target="dialog" id="promotion-filters-drawer">
+    <%= drawer_header(Spree.t(:filter), 'dialog') %>
+    <div class="drawer-body">
+        <div class="form-group">
+          <%= label_tag :q_code_or_coupon_codes_code_eq, Spree.t(:code) %>
+          <%= f.search_field :code_or_coupon_codes_code_eq, class: "form-control", data: { filters_target: :input } %>
+        </div>
+      <%= render_admin_partials(:promotions_filters_partials, f: f) %>
+    </div>
+    <div class="drawer-footer">
+      <%= drawer_discard_button('dialog') %>
+      <%= render 'spree/admin/shared/filter_submit' %>
+    </div>
+  </dialog>
 
   <%= render "spree/admin/shared/filter_badge_template" %>
 

data/app/views/spree/admin/promotions/_table_filter_dropdown.html.erb

@@ -5,7 +5,7 @@
     </span>
     <%= promotion_filter_dropdown_value %>
   <% end %>
-  <%= dropdown_menu class: 'dropdown-menu-right w-100', style: 'min-width: 200px' do %>
+  <%= dropdown_menu do %>
     <%= active_link_to 'All Promotions', params.to_unsafe_h.deep_merge({page: nil, q: {active: nil, expired: nil}}), class: 'dropdown-item', active: (params[:q] || {}).values_at(*%w[expired active] ).all?(&:blank?) %>
     <%= link_to Spree.t(:expired),
       params.to_unsafe_h.deep_merge({page: nil, q: {active: nil, expired: true}}),

data/app/views/spree/admin/promotions/_table_header.html.erb

@@ -1,5 +1,5 @@
 <tr>
-  <th scope="col"><%= sort_link search_collection, :name, Spree.t(:name) %></th>
+  <th scope="col"><%= sort_link @search, :name, Spree.t(:name) %></th>
   <th scope="col"><%= Spree.t(:code) %></th>
   <th scope="col"><%= Spree.t(:kind) %></th>
   <th scope="col"><%= Spree.t(:usage_limit) %></th>

data/app/views/spree/admin/promotions/form/_kind.html.erb

@@ -9,7 +9,7 @@
           <%= f.radio_button :multi_codes, false, data: { action: 'change->reveal#toggle' }, class: 'custom-control-input' %>
           <%= f.label :multi_codes_false, class: 'custom-control-label' do %>
             One code for all customers
-            <span class="form-text font-weight-normal mr-1">
+            <span class="form-text font-weight-normal mr-1 mt-2">
               You can limit the number of times this code can be used.
             </span>
           <% end %>
@@ -22,7 +22,7 @@
           <%= f.radio_button :multi_codes, true, data: { action: 'change->reveal#toggle' }, class: 'custom-control-input' %>
           <%= f.label :multi_codes_true, class: 'custom-control-label' do %>
             Generate unique codes
-            <span class="form-text font-weight-normal mr-1">
+            <span class="form-text font-weight-normal mr-1 mt-2">
               These codes are generated automatically and can be downloaded as a CSV file. Codes are unique and can only be used once.
             </span>
           <% end %>
@@ -30,7 +30,7 @@
         <div data-reveal-target="item" class="ml-3 mt-2 row <% unless @promotion.multi_codes? %>hidden<% end %>">
           <div class="col-6">
             <%= f.text_field :code_prefix, class: 'form-control text-uppercase', placeholder: 'Coupon Prefix (optional)' %>
-            <span class="form-text">
+            <span class="form-text mt-2">
               eg. <strong>ABC</strong>
             </span>
           </div>
@@ -38,7 +38,7 @@
             <% minimum_number_of_codes = @promotion.persisted? && @promotion.coupon_codes.count.positive? ? @promotion.coupon_codes.count : 1 %>
             <% maximum_number_of_codes = ENV.fetch('PROMOTION_MAX_NUMBER_OF_CODES', 5000) %>
             <%= f.number_field :number_of_codes, class: 'form-control', placeholder: 'Number of codes', min: minimum_number_of_codes, max: maximum_number_of_codes, step: 1 %>
-            <span class="form-text">
+            <span class="form-text mt-2">
               How many codes you want to generate.
               <% if @promotion.persisted? %>
                 To add more codes just increase this number

data/app/views/spree/admin/promotions/form/_settings.html.erb

@@ -2,17 +2,6 @@
   <%= f.spree_number_field :usage_limit, min: 0, step: 1, help: 'Leave this field blank for unlimited usage.' %>
 <% end %>
 
-<div class="form-group">
-  <%= f.label :starts_at %>
-  <%= f.datetime_field :starts_at, class: 'form-control' %>
-  <%= f.error_message_on :starts_at %>  
-</div>
+<%= f.spree_datetime_field :starts_at %>
 
-<div class="form-group">
-  <%= f.label :expires_at %>
-  <%= f.datetime_field :expires_at, class: 'form-control' %>
-  <%= f.error_message_on :expires_at %>
-  <span class="form-text mt-2">
-    Leave this field blank for no expiration.
-  </span>
-</div>
+<%= f.spree_datetime_field :expires_at, help: 'Leave this field blank for no expiration.' %>

data/app/views/spree/admin/refund_reasons/_table_header.html.erb

@@ -1,5 +1,5 @@
 <tr>
-  <th scope="col"><%= sort_link search_collection, :name, Spree.t(:name) %></th>
+  <th scope="col"><%= sort_link @search, :name, Spree.t(:name) %></th>
   <th scope="col"><%= Spree.t(:status) %></th>
   <th scope="col"><%= Spree.t(:mutable) %></th>
   <th scope="col"></th>

data/app/views/spree/admin/refunds/_form.html.erb

@@ -1,13 +1,5 @@
 <% if f.object.new_record? %>
-  <div class="form-group">
-    <%= f.label :amount, Spree.t(:amount) %>
-    <div class="input-group">
-      <%= f.text_field :amount, class: 'form-control', required: true %>
-      <div class="input-group-append">
-        <span class="input-group-text"><%= currency_symbol(@order.currency) %></span>
-      </div>
-    </div>
-  </div>
+  <%= f.spree_text_field :amount, label: Spree.t(:amount), append: currency_symbol(@order.currency), required: true %>
 <% end %>
 
 <%= f.spree_collection_select :refund_reason_id, refund_reasons, :id, :name, { include_blank: true, label: Spree.t(:reason), required: true } %>

data/app/views/spree/admin/reimbursement_types/_table_header.html.erb

@@ -1,5 +1,5 @@
 <tr>
-  <th scope="col"><%= sort_link search_collection, :name, Spree.t(:name) %></th>
+  <th scope="col"><%= sort_link @search, :name, Spree.t(:name) %></th>
   <th scope="col"><%= Spree.t(:type) %></th>
   <th scope="col"><%= Spree.t(:status) %></th>
   <th scope="col"><%= Spree.t(:mutable) %></th>

data/app/views/spree/admin/return_authorization_reasons/_table_header.html.erb

@@ -1,5 +1,5 @@
 <tr>
-  <th scope="col"><%= sort_link search_collection, :name, Spree.t(:name) %></th>
+  <th scope="col"><%= sort_link @search, :name, Spree.t(:name) %></th>
   <th scope="col"><%= Spree.t(:status) %></th>
   <th scope="col"></th>
 </tr>

data/app/views/spree/admin/return_authorizations/filters.html.erb

@@ -13,7 +13,7 @@
           <%= Spree.t(:all) %>
         <% end %>
       <% end %>
-      <%= dropdown_menu class: 'dropdown-menu-right w-100', style: 'min-width: 200px' do %>
+      <%= dropdown_menu do %>
         <%= active_link_to Spree.t(:all),
         params.to_unsafe_h.deep_merge({ q: { state_eq: "" } }),
         class: "dropdown-item",

data/app/views/spree/admin/roles/index.html.erb

@@ -13,7 +13,7 @@
       <table class="table">
         <thead>
           <tr>
-            <th scope="col"><%= sort_link search_collection, :name, Spree.t(:name) %></th>
+            <th scope="col"><%= sort_link @search, :name, Spree.t(:name) %></th>
             <th scope="col"><%= Spree.t(:permissions) %></th>
             <th scope="col"></th>
           </tr>

data/app/views/spree/admin/shared/_audit_nav.html.erb

@@ -1,3 +1,5 @@
 <% content_for :page_title do %>
   <%= Spree.t('admin.audit_log') %>
 <% end %>
+
+<%= render_tab_navigation(:audit_tabs) %>

data/app/views/spree/admin/shared/_calendar_range_picker.html.erb

@@ -7,7 +7,7 @@
 
 <% dropdown_direction ||= 'left' %>
 
-<%= dropdown data: { controller: 'dropdown calendar-range', action: 'click->calendar-range#open' }, class: 'h-100' do %>
+<%= dropdown direction: dropdown_direction, data: { controller: 'dropdown calendar-range', action: 'click->calendar-range#open' }, class: 'h-100', portal: false do %>
   <%= dropdown_toggle class: css_classes do %>
     <%= icon('calendar', class: 'mr-2') %>
     <div data-calendar-range-target="label">
@@ -18,7 +18,7 @@
       <% end %>
     </div>
   <% end %>
-  <%= dropdown_menu direction: dropdown_direction, class: "pt-2 px-2 pb-1" do %>
+  <%= dropdown_menu class: "pt-2 px-2 pb-1", style: 'min-width: 29rem' do %>
     <div data-calendar-range-target="picker" class="d-none"></div>
   <% end %>
 

data/app/views/spree/admin/shared/_content_header.html.erb

@@ -22,12 +22,15 @@
       <% end %>
 
       <% if show_record_subtitle || content_for(:page_actions_dropdown) %>
-        <%= dropdown id: 'page_actions_dropdown', class: 'h-100' do %>
+        <%= dropdown id: 'page_actions_dropdown', class: 'h-100', portal: false do %>
           <%= dropdown_toggle id: 'more-actions-link', class: 'btn-light h-100 p-2' do %>
             <%= icon 'dots-vertical', class: 'mr-0' %>
           <% end %>
           <%= dropdown_menu id: 'page_actions_dropdown_menu' do %>
-            <%= yield :page_actions_dropdown if content_for(:page_actions_dropdown) %>
+            <% if content_for?(:page_actions_dropdown) %>
+              <%= yield :page_actions_dropdown %>
+              <div class="dropdown-divider"></div>
+            <% end %>
             <% if record && record.persisted? %>
               <%= link_to_edit_metafields(record) %>
               <%= link_to_edit_translations(record) %>

data/app/views/spree/admin/shared/_developers_nav.html.erb

@@ -1,7 +1,5 @@
 <%= content_for :page_title do %>
   <%= Spree.t(:developers) %>
 <% end %>
-<%= content_for :page_tabs do %>
-  <%= nav_item(Spree.t(:api_keys), spree.admin_oauth_applications_path) if can?(:manage, Spree::OauthApplication) %>
-  <%= nav_item(Spree.t(:webhooks), spree.admin_webhooks_subscribers_path) if can?(:manage, Spree::Webhooks::Subscriber) %>
-<% end %>
+
+<%= render_tab_navigation(:developers_tabs) %>

data/app/views/spree/admin/shared/_header.html.erb

@@ -1,11 +1,9 @@
 <div id="scroll-header"></div>
 
-<%= render 'spree/admin/shared/offcanvas_nav' %>
-
 <header id="header" class="sticky-top py-0">
   <nav class="navbar navbar-expand-lg p-0 d-flex align-items-center pr-3">
     <div class="d-lg-none pr-3 border-right">
-      <button type="button" class="btn btn-light pull-bs-canvas-left px-2 ml-3 text-decoration-none">
+      <button type="button" class="btn btn-light px-2 ml-3 text-decoration-none" data-action="click->sidebar#openMobile">
         <%= icon('menu-2', class: 'mr-0') %>
       </button>
     </div>
@@ -20,13 +18,13 @@
       <% end %>
     <% end %>
 
+    <button type="button" class="sidebar-toggle-btn ml-3 mr-3 d-none d-lg-block" data-action="click->sidebar#toggle" aria-label="<%= Spree.t('admin.expand_sidebar') %>">
+      <%= icon('layout-sidebar-left-collapse') %>
+    </button>
+
     <div class="d-none d-lg-block">
       <%= render 'spree/admin/shared/breadcrumbs' %>
     </div>
-
-    <div class="ml-auto d-flex align-items-center">
-      <%= render 'spree/admin/shared/user_dropdown' %>
-    </div>
   </nav>
 </header>
 

data/app/views/spree/admin/shared/_index_table.html.erb

@@ -1,13 +1,14 @@
 <% sortable = local_assigns[:sortable] %>
+<% frame_name = local_assigns[:frame_name] || controller_name %>
 
-<%= turbo_frame_tag controller_name, autoscroll: true, data: { autoscroll_block: :start, autoscroll_behavior: :smooth, turbo_action: 'advance' } do %>
+<%= turbo_frame_tag frame_name, autoscroll: true, data: { autoscroll_block: :start, autoscroll_behavior: :smooth, turbo_action: 'advance' } do %>
   <%= render 'spree/admin/shared/export_modal', export_type: export_type if local_assigns[:export_type] %>
   <div class="card-lg">
     <% if lookup_context.template_exists?('filters', lookup_context.prefixes, true) %>
       <%= render 'filters' %>
     <% end %>
 
-    <% if paginated_collection.any? %>
+    <% if @collection.any? %>
       <div class="<% if lookup_context.template_exists?('filters', lookup_context.prefixes, true) %>with-filters<% end %>" id="listing_<%= controller_name %>">
         <table class="table">
           <thead>
@@ -21,12 +22,12 @@
               data-sortable-response-kind-value="turbo-stream"
             <% end %>
           >
-            <%= render partial: 'table_row', collection: paginated_collection, as: controller_name.singularize %>
+            <%= render partial: 'table_row', collection: @collection, as: controller_name.singularize %>
           </tbody>
         </table>
       </div>
 
-      <%= render 'spree/admin/shared/index_table_options', collection: paginated_collection %>
+      <%= render 'spree/admin/shared/index_table_options', collection: @collection %>
     <% else %>
       <%= render 'spree/admin/shared/no_resource_found', new_object_url: (new_object_url if can?(:create, model_class)) %>
     <% end %>

data/app/views/spree/admin/shared/_index_table_options.html.erb

@@ -12,7 +12,7 @@
       <div class="d-none d-lg-block text-center text-muted">
         <%= page_entries_info(collection, entry_name: entry_name) %>
       </div>
-      <div class="text-right pr-lg-2">
+      <div class="text-right">
         <%= paginate collection, theme: 'admin-twitter-bootstrap-4' %>
       </div>
     </div>

data/app/views/spree/admin/shared/_navigation.html.erb

@@ -0,0 +1,5 @@
+<ul class="nav flex-column">
+  <% items.each do |item| %>
+    <%= render 'spree/admin/shared/navigation_item', item: item, context: context %>
+  <% end %>
+</ul>

data/app/views/spree/admin/shared/_navigation_item.html.erb

@@ -0,0 +1,64 @@
+<%
+  # Resolve item properties (pass self as context for route helpers)
+  item_url = item.resolve_url(self)
+  item_label = item.resolve_label
+  badge_value = item.badge_value(self)
+  is_active = item.active?(request.path, self)
+  has_children = item.children.present?
+  tooltip_text = item.tooltip
+
+  # Build data attributes - only add tooltip controller if tooltip is present
+  data_attrs = item.data_attributes.dup
+  if tooltip_text.present?
+    data_attrs[:controller] = 'tooltip'
+  end
+
+  # Build additional HTML options (like target)
+  html_options = {}
+  html_options[:target] = item.target if item.target.present?
+  html_options[:id] = "nav-link-#{item.key}" if item.key.present?
+
+  # Build complete label with badge (like old menu pattern)
+  complete_label = item_label
+  if badge_value.present?
+    badge_class = item.badge_class.presence || 'badge-light'
+    complete_label += content_tag(:span, badge_value, class: "badge ml-auto #{badge_class}")
+  end
+  # Add tooltip if present
+  if tooltip_text.present?
+    complete_label += tooltip(tooltip_text)
+  end
+  complete_label = complete_label&.html_safe
+%>
+
+<% if item.section? %>
+  <%# Section header %>
+  <li class="nav-item nav-section-header mt-3 border-top pt-3 pl-2">
+    <span class="text-muted text-uppercase font-weight-light font-size-sm"><%= item.section_label %></span>
+  </li>
+<% else %>
+  <% if has_children %>
+    <%# Item with children (submenu shows when parent is active) %>
+    <%= nav_item(complete_label, item_url, icon: item.icon, active: is_active, data: data_attrs, **html_options) %>
+
+    <%# Submenu for expanded sidebar (only shown when active) %>
+    <ul class="nav-submenu <% unless is_active %>d-none<% end %>" id="nav-submenu-<%= item.key %>">
+      <% item.children.select { |child| child.visible?(self) }.each do |child_item| %>
+        <%= render 'spree/admin/shared/navigation_item', item: child_item, context: context %>
+      <% end %>
+    </ul>
+
+    <%# Submenu dropdown for collapsed sidebar (always rendered, shown on hover) %>
+    <ul class="nav-submenu-dropdown d-none dropdown-container" id="nav-submenu-dropdown-<%= item.key %>">
+      <%# Add parent item as first item in dropdown %>
+      <%= nav_item(item_label, item_url, icon: nil) %>
+
+      <% item.children.select { |child| child.visible?(self) }.each do |child_item| %>
+        <%= render 'spree/admin/shared/navigation_item', item: child_item, context: context %>
+      <% end %>
+    </ul>
+  <% else %>
+    <%# Regular item without children %>
+    <%= nav_item(complete_label, item_url, icon: item.icon, active: is_active, data: data_attrs, **html_options) %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/shared/_new_item_dropdown.html.erb

@@ -1,8 +1,8 @@
-<%= dropdown do %>
+<%= dropdown id: 'new-item-dropdown' do %>
   <%= dropdown_toggle class: 'btn-light btn-sm px-1' do %>
     <%= icon 'plus', class: 'mr-0' %>
   <% end %>
-  <%= dropdown_menu direction: 'left' do %>
+  <%= dropdown_menu do %>
     <%= link_to_with_icon 'shopping-bag-plus', Spree.t(:new_order), spree.new_admin_order_path, class: "dropdown-item" if can?(:manage, Spree::Order)  %>
 
     <%= link_to spree.new_admin_product_path, class: 'dropdown-item' do %>