Update hover / active behavior for side navigation links (#3511)

* Reorg CSS clases for sidenav links * Include 'active' for current sidenav context This will allow targeted styling of the active element in the side nav * Update side navigation active / hover contexts This aligns closer to RailsAdmin 2.x.x, where the background of an element in the side nav changes when it's either active or hovered over - making the navigation itself easier to follow in the UI Co-authored-by: Mitsuhiro Shibuya <[email protected]>
railsadminteam · May 4, 2022 · 4a6524a · 4a6524a
1 parent a3daea9
commit 4a6524a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/app/helpers/rails_admin/application_helper.rb b/app/helpers/rails_admin/application_helper.rb
@@ -120,10 +120,12 @@ def navigation(parent_groups, nodes, level = 0)
         abstract_model = node.abstract_model
         model_param = abstract_model.to_param
         url         = rails_admin.url_for(action: :index, controller: 'rails_admin/main', model_name: model_param)
-        level_class = " nav-level-#{level}" if level > 0
-        nav_icon = node.navigation_icon ? %(<i class="#{node.navigation_icon}"></i> ).html_safe : ''
+        nav_icon = node.navigation_icon ? %(<i class="#{node.navigation_icon}"></i>).html_safe : ''
+        css_classes = ['nav-link']
+        css_classes.push("nav-level-#{level}") if level > 0
+        css_classes.push('active') if defined?(@action) && current_action?(@action, model_param)
         li = content_tag :li, data: {model: model_param} do
-          link_to nav_icon + node.label_plural, url, class: "nav-link#{level_class}"
+          link_to nav_icon + " " + node.label_plural, url, class: css_classes.join(' ')
         end
         child_nodes = parent_groups[abstract_model.model_name]
         child_nodes ? li + navigation(parent_groups, child_nodes, level + 1) : li

diff --git a/src/rails_admin/styles/base/theming.scss b/src/rails_admin/styles/base/theming.scss
@@ -42,6 +42,16 @@ body.rails_admin {
     > li > a {
       padding: ($navbar-padding-y / 2) ($grid-gutter-width / 2);
 
+      &.active {
+        background-color: map-get($theme-colors, primary);
+        color: color-contrast(map-get($theme-colors, primary));
+      }
+
+      &:hover {
+        background-color: map-get($theme-colors, primary);
+        color: color-contrast(map-get($theme-colors, primary));
+      }
+
       &.nav-level-1 {
         padding-left: $grid-gutter-width;
       }