swop 0.1.0 → 0.1.1

data/app/assets/stylesheets/rails_admin/themes/simple/components/sidebar.scss

@@ -0,0 +1,84 @@
+.sidebar {
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: none;  /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none;  /* Safari and Chrome */
+  }
+
+  @include media-breakpoint-up(xl) {
+    height: rem(100px);
+    min-height: 100%;
+    overflow: scroll;
+    padding-right: $spacer-7;
+    width: rem(229px);
+  }
+
+  &-wrapper {
+
+    @include media-breakpoint-up(xl) {
+      position: relative;
+    }
+
+    &::after {
+
+      @include media-breakpoint-up(xl) {
+        background-color: rgba($border-color, 0.5);
+        content: "";
+        height: calc(100% - #{$spacer-10});
+        position: absolute;
+        right: 0;
+        top: $spacer-7;
+        width: $border-width;
+      }
+    }
+  }
+
+  .nav-link {
+    border-radius: 0.625em;
+    line-height: $line-height-lg;
+    padding: $spacer-1 $spacer-4;
+
+    &:hover {
+      background-color: $light;
+      color: $white;
+    }
+
+    &.active {
+      background-color: $primary;
+      color: $white;
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  .btn-toggle {
+    border-radius: 0;
+    border: 0;
+    color: $white;
+    display: flex;
+    font-weight: $font-weight-semibold;
+    line-height: $line-height-lg;
+    margin-top: $spacer-2;
+    padding: $spacer-1 $spacer-4;
+    transition: all $transition;
+    width: 100%;
+
+    *[class^="fa"] {
+      color: $white;
+      margin-left: auto;
+      transition: all $transition;
+    }
+
+    &:active {
+      color: $white;
+    }
+
+    &.collapsed *[class^="fa"] {
+      transform: rotate(180deg);
+    }
+
+    &-nav {
+      margin-bottom: 0 !important;
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/themes/simple/components/tables.scss

@@ -0,0 +1,84 @@
+.table {
+  margin-bottom: 0;
+  border-collapse: unset;
+
+  td, th {
+    vertical-align: middle !important;
+    white-space: nowrap !important;
+  }
+
+  thead th,
+  thead tr {
+    color: $body-secondary-color !important;
+    padding-top: 0;
+  }
+
+  thead,
+  tbody {
+
+    th,
+    td {
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+
+  .header {
+    position: relative;
+    cursor: pointer;
+
+    &:hover::after {
+      @extend .fa-solid;
+      @extend .fa-xs;
+      border: unset;
+      content: "\f077";
+      float: unset;
+      margin-top: unset;
+      position: absolute;
+      right: rem(5px);
+      top: 37.5%;
+    }
+  }
+
+  .headerSortUp::after {
+    @extend .fa-solid;
+    @extend .fa-xs;
+    content: "\f078";
+    position: absolute;
+    right: rem(5px);
+    top: 37.5%;
+  }
+
+  &-responsive {
+    -ms-overflow-style: none; // Internet Explorer 10+
+    margin-left: -$spacer-4;
+    margin-right: -$spacer-4;
+    padding-left: $spacer-4;
+    padding-right: $spacer-4;
+    scrollbar-width: none; // Firefox
+
+    @include media-breakpoint-up(md) {
+      margin-left: -$spacer-6;
+      margin-right: -$spacer-6;
+      padding-left: $spacer-6;
+      padding-right: $spacer-6;
+    }
+
+    @include media-breakpoint-up(lg) {
+      margin-left: -$spacer-7;
+      margin-right: -$spacer-7;
+      padding-left: $spacer-7;
+      padding-right: $spacer-7;
+    }
+
+    &::-webkit-scrollbar {
+      display: none; // Safari and Chrome
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/themes/simple/layouts/rows.scss

@@ -0,0 +1,34 @@
+.row {
+
+  &-application-layout {
+
+    @include media-breakpoint-up(xl) {
+      height: 100% !important;
+      position: fixed !important;
+      width: 100% !important;
+    }
+
+    .col-content {
+      -ms-overflow-style: none; // Internet Explorer 10+
+      scrollbar-width: none; // Firefox
+
+      @include media-breakpoint-up(xl) {
+        height: 100% !important;
+        overflow: scroll !important;
+        padding-left: $spacer-7;
+      }
+
+      &::-webkit-scrollbar {
+        display: none; // Safari and Chrome
+      }
+
+      .container-fluid {
+
+        @include media-breakpoint-up(xl) {
+          height: 100% !important;
+          padding-left: 0;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/themes/simple/light/components/links.scss

@@ -0,0 +1,15 @@
+.link {
+
+  &-white {
+
+    &,
+    *[class^="fa"] {
+      color: $dark;
+    }
+
+    &:hover,
+    &:hover *[class^="fa"] {
+      color: $dark;
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/themes/simple/light/components/sidebar.scss

@@ -0,0 +1,25 @@
+.sidebar {
+
+  .nav-link {
+
+    &:hover {
+      color: $dark;
+    }
+
+    &.active:hover {
+      color: $white;
+    }
+  }
+
+  .btn-toggle {
+    color: $dark;
+
+    *[class^="fa"] {
+      color: $dark;
+    }
+
+    &:active {
+      color: $dark;
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/themes/simple.scss.erb

@@ -0,0 +1,37 @@
+// Variables
+@import "simple/base/variables";
+
+@import "simple/base/variables-light";
+
+// Shared - Bootstrap variables (Funnel)
+@import "base/bootstrap-variables";
+
+// Bootstrap
+@import "rails_admin/bootstrap/bootstrap";
+
+// Base
+@import "simple/base/typography";
+
+// Layouts
+@import "simple/layouts/rows";
+
+// Components
+@import "simple/components/alerts";
+@import "simple/components/breadcrumbs";
+@import "simple/components/buttons";
+@import "simple/components/containers";
+@import "simple/components/dropdowns";
+@import "simple/components/filter-box";
+@import "simple/components/filtering-multiselect";
+@import "simple/components/filtering-select";
+@import "simple/components/forms";
+@import "simple/components/images";
+@import "simple/components/links";
+@import "simple/components/navs";
+@import "simple/components/progress";
+@import "simple/components/sidebar";
+@import "simple/components/tables";
+
+// Light - Components
+@import "simple/light/components/sidebar";
+@import "simple/light/components/links";

data/app/helpers/rails_admin/application_helper.rb

@@ -41,9 +41,9 @@ module RailsAdmin
           id: _current_user.id,
         )
 
-        link_to content, edit_url, class: 'nav-link'
+        link_to content, edit_url, class: 'dropdown-item'
       else
-        content_tag :span, content, class: 'nav-link'
+        content_tag :span, content, class: 'dropdown-item'
       end
     end
 
@@ -89,7 +89,6 @@ module RailsAdmin
         li_stack = navigation parent_groups, nodes
 
         label = navigation_label || t('admin.misc.navigation')
-
         collapsible_stack(label, 'main', li_stack)
       end.join.html_safe
     end
@@ -127,7 +126,7 @@ module RailsAdmin
         css_classes = ['nav-link']
         css_classes.push("nav-level-#{level}") if level > 0
         css_classes.push('active') if @action && current_action?(@action, model_param)
-        li = content_tag :li, data: {model: model_param} do
+        li = content_tag :li, class: "nav-item", data: {model: model_param} do
           link_to nav_icon + " " + node.label_plural, url, class: css_classes.join(' ')
         end
         child_nodes = parent_groups[abstract_model.model_name]
@@ -140,7 +139,7 @@ module RailsAdmin
         (parent_actions ||= []) << action
       end while action.breadcrumb_parent && (action = action(*action.breadcrumb_parent)) # rubocop:disable Lint/Loop
 
-      content_tag(:ol, class: 'breadcrumb') do
+      content_tag(:ol, class: 'breadcrumb mb-0 mb-md-1') do
         parent_actions.collect do |a|
           am = a.send(:eval, 'bindings[:abstract_model]')
           o = a.send(:eval, 'bindings[:object]')
@@ -163,30 +162,23 @@ module RailsAdmin
     # perf matters here (no action view trickery)
     def menu_for(parent, abstract_model = nil, object = nil, only_icon = false)
       actions = actions(parent, abstract_model, object).select { |a| a.http_methods.include?(:get) && a.show_in_menu }
-
-      # Filter out list action
-      actions.reject! { |action| %i[index].include?(action.key) }
-
-      # Sort actions
-      actions.sort_by! { |action| action.key.to_s }
-
       actions.collect do |action|
         wording = wording_for(:menu, action)
-        link_class = ["#{action.key}_#{parent}_link"].concat(action.enabled? ? [] : ['disabled'])
-        label = content_tag(:i, '', {class: "fa-sm fa-fw #{action.link_icon}"}) + ' ' + content_tag(:span, wording, (only_icon ? {style: 'display:none'} : {}))
-        if action.enabled? || !only_icon
-          href =
-            if action.enabled?
-              rails_admin.url_for(action: action.action_name, controller: 'rails_admin/main', model_name: abstract_model.try(:to_param), id: (object.try(:persisted?) && object.try(:id) || nil))
-            else
-              'javascript:void(0)'
-            end
-          button_class = action.key == :new ? 'btn btn-primary' : 'btn btn-white'
-          content_tag(:div, class: "col-md-auto") do
-            content_tag(:a, label, {href: href, target: action.link_target, class: [link_class, button_class, !action.enabled? && 'disabled'].compact}.merge(action.turbo? ? {} : {data: {turbo: 'false'}}))
+        li_class = ['nav-item', 'icon', "#{action.key}_#{parent}_link"].
+                   concat(action.enabled? ? [] : ['disabled'])
+        content_tag(:li, {class: li_class}.merge(only_icon ? {title: wording, rel: 'tooltip'} : {})) do
+          label = content_tag(:i, '', {class: "fa-sm #{action.link_icon}"}) + ' ' + content_tag(:span, wording, (only_icon ? {style: 'display:none'} : {}))
+          if action.enabled? || !only_icon
+            href =
+              if action.enabled?
+                rails_admin.url_for(action: action.action_name, controller: 'rails_admin/main', model_name: abstract_model.try(:to_param), id: (object.try(:persisted?) && object.try(:id) || nil))
+              else
+                'javascript:void(0)'
+              end
+            content_tag(:a, label, {href: href, target: action.link_target, class: ['nav-link', current_action?(action) && 'active', !action.enabled? && 'disabled'].compact}.merge(action.turbo? ? {} : {data: {turbo: 'false'}}))
+          else
+            content_tag(:span, label)
           end
-        else
-          content_tag(:span, label)
         end
       end.join(' ').html_safe
     end
@@ -194,16 +186,17 @@ module RailsAdmin
     def bulk_menu(abstract_model = @abstract_model)
       actions = actions(:bulkable, abstract_model)
       return '' if actions.empty?
-      content_tag(:div, class: "dropdown") do
-        content_tag(:button, class: 'btn btn-white dropdown-toggle', data: {'bs-toggle': 'dropdown'}) { t('admin.misc.bulk_menu_title').html_safe + ' ' + '<b class="caret"></b>'.html_safe } +
-        content_tag(:ul, class: 'dropdown-menu', style: 'left:auto; right:0;') do
-          actions.collect do |action|
-            content_tag :li do
-              link_to wording_for(:bulk_link, action, abstract_model), '#', class: 'dropdown-item bulk-link', data: {action: action.action_name}
-            end
-          end.join.html_safe
-        end
-      end
+
+      content_tag :li, class: 'nav-item dropdown dropdown-menu-end' do
+        content_tag(:a, class: 'nav-link dropdown-toggle', data: {'bs-toggle': 'dropdown'}, href: '#') { t('admin.misc.bulk_menu_title').html_safe + ' ' + '<b class="caret"></b>'.html_safe } +
+          content_tag(:ul, class: 'dropdown-menu', style: 'left:auto; right:0;') do
+            actions.collect do |action|
+              content_tag :li do
+                link_to wording_for(:bulk_link, action, abstract_model), '#', class: 'dropdown-item bulk-link', data: {action: action.action_name}
+              end
+            end.join.html_safe
+          end
+      end.html_safe
     end
 
     def flash_alert_class(flash_key)
@@ -239,12 +232,7 @@ module RailsAdmin
   private
 
     def edit_user_link_label
-      [
-        RailsAdmin::Config.show_gravatar &&
-          image_tag(gravatar_url(_current_user.email), alt: ''),
-
-        content_tag(:span, _current_user.email),
-      ].filter(&:present?).join.html_safe
+      "#{icon('fa-solid', 'user', class: 'fa-sm fa-fw me-2')}Your account".html_safe
     end
 
     def gravatar_url(email)
@@ -255,12 +243,12 @@ module RailsAdmin
       return nil unless li_stack.present?
 
       collapse_classname = "#{class_prefix}-#{Digest::MD5.hexdigest(label)[0..7]}"
-      content_tag(:li, class: 'mb-1') do
-        content_tag(:button, 'aria-expanded': true, class: 'btn btn-toggle align-items-center rounded', data: {bs_toggle: "collapse", bs_target: ".sidebar .#{collapse_classname}"}) do
-          content_tag(:i, '', class: 'fas fa-chevron-down') + html_escape(' ' + label)
+      content_tag(:li) do
+        content_tag(:button, 'aria-expanded': true, class: 'btn btn-toggle align-items-center', data: {bs_toggle: "collapse", bs_target: ".sidebar .#{collapse_classname}"}) do
+        html_escape(' ' + label) + content_tag(:i, '', class: 'fas fa-sm fa-angle-up')
         end +
           content_tag(:div, class: "collapse show #{collapse_classname}") do
-            content_tag(:ul, class: 'btn-toggle-nav list-unstyled fw-normal pb-1') do
+            content_tag(:ul, class: 'btn-toggle-nav list-unstyled') do
               li_stack
             end
           end

data/app/helpers/rails_admin/form_builder.rb

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+require 'nested_form/builder_mixin'
+
+module RailsAdmin
+  class FormBuilder < ::ActionView::Helpers::FormBuilder
+    include ::NestedForm::BuilderMixin
+    include ::RailsAdmin::ApplicationHelper
+
+    def generate(options = {})
+      without_field_error_proc_added_div do
+        options.reverse_merge!(
+          action: @template.controller.params[:action],
+          model_config: @template.instance_variable_get(:@model_config),
+          nested_in: false,
+        )
+
+        object_infos +
+          visible_groups(options[:model_config], generator_action(options[:action], options[:nested_in])).collect do |fieldset|
+            fieldset_for fieldset, options[:nested_in]
+          end.join.html_safe +
+          (options[:nested_in] ? '' : @template.render(partial: 'rails_admin/main/submit_buttons'))
+      end
+    end
+
+    def fieldset_for(fieldset, nested_in)
+      fields = fieldset.with(
+        form: self,
+        object: @object,
+        view: @template,
+        controller: @template.controller,
+      ).visible_fields
+      return if fields.empty?
+
+      @template.content_tag :fieldset do
+        contents = []
+        contents << @template.content_tag(:legend, %(<i class="fas fa-chevron-#{fieldset.active? ? 'down' : 'right'}"></i> #{fieldset.label}).html_safe, style: fieldset.name == :default ? 'display:none' : '')
+        contents << @template.content_tag(:p, fieldset.help) if fieldset.help.present?
+        contents << fields.collect { |field| field_wrapper_for(field, nested_in) }.join
+        contents.join.html_safe
+      end
+    end
+
+    def field_wrapper_for(field, nested_in)
+      # do not show nested field if the target is the origin
+      return if nested_field_association?(field, nested_in)
+
+      @template.content_tag(:div, class: "control-group row mb-3 #{field.type_css_class} #{field.css_class} #{'error' if field.errors.present?}", id: "#{dom_id(field)}_field") do
+        if field.label
+          label(field.method_name, field.label, class: 'form-label') +
+            (field.nested_form ? field_for(field) : input_for(field))
+        else
+          field.nested_form ? field_for(field) : input_for(field)
+        end
+      end
+    end
+
+    def input_for(field)
+      css = 'col'
+
+      case field.type
+      when :string
+        css += " col-md-10 col-xl-5"
+      when :serialized
+        css += " col-md-20 col-xl-10"
+      when :integer
+        css += " col-md-5 col-xl-3"
+      end
+      css += ' has-error' if field.errors.present?
+      @template.content_tag(:div, class: css) do
+        field_for(field) +
+          errors_for(field) +
+          help_for(field)
+      end
+    end
+
+    def errors_for(field)
+      field.errors.present? ? @template.content_tag(:span, field.errors.to_sentence, class: 'help-inline text-danger') : ''.html_safe
+    end
+
+    def help_for(field)
+      field.help.present? ? @template.content_tag(:div, field.help, class: 'form-text') : ''.html_safe
+    end
+
+    def field_for(field)
+      field.read_only? ? @template.content_tag(:div, field.pretty_value, class: 'form-control-static') : field.render
+    end
+
+    def object_infos
+      model_config = RailsAdmin.config(object)
+      model_label = model_config.label
+      object_label =
+        if object.new_record?
+          I18n.t('admin.form.new_model', name: model_label)
+        else
+          object.send(model_config.object_label_method).presence || "#{model_config.label} ##{object.id}"
+        end
+
+      %(<span style="display:none" class="object-infos" data-model-label="#{model_label}" data-object-label="#{CGI.escapeHTML(object_label.to_s)}"></span>).html_safe
+    end
+
+    def jquery_namespace(field)
+      %(#{'#modal ' if @template.controller.params[:modal]}##{dom_id(field)}_field)
+    end
+
+    def dom_id(field)
+      (@dom_id ||= {})[field.name] ||=
+        [
+          @object_name.to_s.gsub(/\]\[|[^-a-zA-Z0-9:.]/, '_').sub(/_$/, ''),
+          options[:index],
+          field.method_name,
+        ].reject(&:blank?).join('_')
+    end
+
+    def dom_name(field)
+      (@dom_name ||= {})[field.name] ||= %(#{@object_name}#{options[:index] && "[#{options[:index]}]"}[#{field.method_name}]#{field.is_a?(Config::Fields::Association) && field.multiple? ? '[]' : ''})
+    end
+
+    def hidden_field(method, options = {})
+      if method == :id && object.id.is_a?(Array)
+        super method, {value: RailsAdmin.config.composite_keys_serializer.serialize(object.id)}
+      else
+        super
+      end
+    end
+
+  protected
+
+    def generator_action(action, nested)
+      if nested
+        action = :nested
+      elsif @template.request.format == 'text/javascript'
+        action = :modal
+      end
+
+      action
+    end
+
+    def visible_groups(model_config, action)
+      model_config.send(action).with(
+        form: self,
+        object: @object,
+        view: @template,
+        controller: @template.controller,
+      ).visible_groups
+    end
+
+    def without_field_error_proc_added_div
+      default_field_error_proc = ::ActionView::Base.field_error_proc
+      begin
+        ::ActionView::Base.field_error_proc = proc { |html_tag, _instance| html_tag }
+        yield
+      ensure
+        ::ActionView::Base.field_error_proc = default_field_error_proc
+      end
+    end
+
+  private
+
+    def nested_field_association?(field, nested_in)
+      field.inverse_of.presence && nested_in.presence && field.inverse_of == nested_in.name &&
+        (@template.instance_variable_get(:@model_config).abstract_model == field.abstract_model ||
+         field.name == nested_in.inverse_of)
+    end
+  end
+end

data/app/views/layouts/rails_admin/_custom_navigation.html.erb

@@ -0,0 +1,10 @@
+<% actions(:root).select(&:show_in_navigation).each do |action| %>
+  <% path = rails_admin.url_for(action: action.action_name, controller: "rails_admin/main") %>
+  <li class="nav-item <%= "#{action.action_name}_root_link" %>">
+    <%= link_to wording_for(:menu, action), path, class: "nav-link #{'active' if current_page?(path)}", data: (action.turbo? ? {} : { turbo: "false" }) %>
+  </li>
+<% end %>
+
+<%= main_navigation %>
+<%= root_navigation %>
+<%= static_navigation %>

data/app/views/layouts/rails_admin/_head.html.erb

@@ -0,0 +1,32 @@
+<meta content="IE=edge" http-equiv="X-UA-Compatible">
+<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta content="NONE,NOARCHIVE" name="robots">
+<meta content="false" name="turbo-prefetch">
+<%= csrf_meta_tag %>
+<% case RailsAdmin::config.asset_source
+   when :webpacker %>
+  <%= stylesheet_pack_tag "rails_admin", data: {'turbo-track': 'reload'} %>
+  <%= javascript_pack_tag "rails_admin", defer: true, data: {'turbo-track': 'reload'} %>
+<% when :sprockets %>
+  <% handle_asset_dependency_error do %>
+    <%= stylesheet_link_tag "rails_admin/application.css", media: :all, data: {'turbo-track': 'reload'} %>
+    <%= javascript_include_tag "rails_admin/application.js", defer: true, data: {'turbo-track': 'reload'} %>
+  <% end %>
+<% when :vite %>
+  <%= vite_javascript_tag "rails_admin", defer: true, data: {'turbo-track': 'reload'} %>
+<% when :webpack %>
+  <%= stylesheet_link_tag "rails_admin.css", media: :all, data: {'turbo-track': 'reload'} %>
+  <%= javascript_include_tag "rails_admin.js", defer: true, data: {'turbo-track': 'reload'} %>
+<% when :importmap %>
+  <%= stylesheet_link_tag "rails_admin.css", media: :all, data: {'turbo-track': 'reload'} %>
+  <%= javascript_inline_importmap_tag(RailsAdmin::Engine.importmap.to_json(resolver: self)) %>
+  <%= javascript_importmap_module_preload_tags(RailsAdmin::Engine.importmap) %>
+  <%= javascript_importmap_shim_nonce_configuration_tag if respond_to? :javascript_importmap_shim_nonce_configuration_tag %>
+  <%= javascript_importmap_shim_tag if respond_to? :javascript_importmap_shim_tag %>
+  <%= # Preload jQuery and make it global, unless jQuery UI fails to initialize
+      tag.script "import jQuery from 'jquery'; window.jQuery = jQuery;".html_safe, type: "module" %>
+  <%= javascript_import_module_tag 'rails_admin' %>
+<% else
+     raise "Unknown asset_source: #{RailsAdmin::config.asset_source}"
+   end %>

data/app/views/layouts/rails_admin/_header.html.erb

@@ -0,0 +1,43 @@
+<title><%= "#{@abstract_model.try(:pretty_name) || @page_name} | #{[_get_plugin_name[0] || 'Rails', _get_plugin_name[1] || 'Admin'].join(' ')}" %></title>
+
+<header class="row align-items-center gx-4 gy-0 gx-md-5 mb-6 mb-md-7" data-model="<%= @abstract_model.to_param %>">
+  <div class="col-15 col-md-17 col-lg-19 flex-grow-1 me-auto">
+    <nav aria-label="breadcrumb">
+      <%= breadcrumb %>
+    </nav>
+    <h1 class="text-truncate mb-0"><%= @page_name %></h1>
+  </div>
+  <!-- if md breakpoint -->
+  <div class="col-auto d-none d-md-flex">
+    <%= link_to (icon "fa-solid", "info-circle"), "https://www.swopthemes.com/", class: "fs-4 link link-scalable link-white", target: "_blank" %>
+  </div>
+  <!-- if md breakpoint -->
+  <div class="col-auto d-none d-md-flex">
+    <%= link_to (icon "fa-brands", "github"), "https://github.com/Kamz16/swop", class: "fs-4 link link-scalable link-white", target: "_blank" %>
+  </div>
+  <div class="col-auto gx-6 gx-md-7">
+    <div class="dropdown">
+      <button class="btn border-0 p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <div class="img-wrapper img-wrapper-avatar">
+          <%= [RailsAdmin::Config.show_gravatar && image_tag(gravatar_url(_current_user.email), alt: _current_user.name),].filter(&:present?).join.html_safe %>
+        </div>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-end">
+        <li><%= edit_user_link %></li>
+        <li><%= link_to "#{icon "fa-solid", "right-from-bracket", class: "fa-sm fa-fw me-2"}Log out".html_safe, logout_path, method: logout_method, class: "dropdown-item", data: {turbo: 'false'} %></li>
+      </ul>
+    </div>
+  </div>
+  <!-- unless xl breakpoint -->
+  <div class="col-auto gx-6 gx-md-7 d-xl-none">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
+      <%= icon "fa-solid", "bars", class: "fs-3 text-white" %>
+    </button>
+  </div>
+</header>
+
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+  <div class="offcanvas-body sidebar list-unstyled p-4 p-md-6 p-lg-7">
+    <%= render partial: "layouts/rails_admin/custom_navigation" %>
+  </div>
+</div>