header: Add active state to menu items

CERNDocumentServer · Sep 29, 2023 · 7329efe · 7329efe
1 parent e1c31b0
commit 7329efe
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/assets/less/cds-rdm/collections/menu.overrides b/assets/less/cds-rdm/collections/menu.overrides
@@ -4,12 +4,6 @@
   }
 }
 
-#invenio-nav.ui.menu .ui.menu{
-   .item:hover{
-    color: @brandColor
-  }
-}
-
 #invenio-nav.ui.menu {
   height: @relative75px;
   position: relative;
@@ -22,6 +16,16 @@
       padding: 1rem;
     }
 
+    .item {
+      &:hover{
+        color: @brandColor
+      }
+
+      &.active {
+        background-color: lighten(@brandColor, 40%);
+      }
+    }
+
     .item, .right.menu.item {
       padding: 0;
 

diff --git a/templates/semantic-ui/invenio_app_rdm/header.html b/templates/semantic-ui/invenio_app_rdm/header.html
@@ -43,12 +43,12 @@
 
                 <div id="rdm-burger-toggle">
                   <button
-                          id="rdm-burger-menu-icon"
-                          class="ui button transparent"
-                          aria-label="{{ _('Menu') }}"
-                          aria-haspopup="menu"
-                          aria-expanded="false"
-                          aria-controls="invenio-menu"
+                    id="rdm-burger-menu-icon"
+                    class="ui button transparent"
+                    aria-label="{{ _('Menu') }}"
+                    aria-haspopup="menu"
+                    aria-expanded="false"
+                    aria-controls="invenio-menu"
                   >
                     <span class="navicon"></span>
                   </button>
@@ -61,9 +61,9 @@
                   class="ui fluid menu borderless mobile-hidden"
                 >
                   <button
-                          id="rdm-close-burger-menu-icon"
-                          class="ui button transparent"
-                          aria-label="{{ _('Close menu') }}"
+                    id="rdm-close-burger-menu-icon"
+                    class="ui button transparent"
+                    aria-label="{{ _('Close menu') }}"
                   >
                     <span class="navicon"></span>
                   </button>
@@ -93,14 +93,14 @@
                           </div>
                         </div>
                       {%- else %}
-                        <div class="{{ ' item active' if item.active and loop.depth == 0 else ' item' }}">
+                        <div class="{{ 'item active' if item.active else 'item' }}">
                           <a role="menuitem" href="{{ item.url }}">{{ item.text|safe }}</a>
                         </div>
                       {%- endif %}
                     {%- endfor %}
 
                     {% for item in current_menu.submenu('actions').children|sort(attribute='order') if item.visible recursive %}
-                      <div class="item">
+                      <div class="{{ 'item active' if item.active else 'item' }}">
                         <a role="menuitem" href="{{ item.url }}">{{ item.text|safe }}</a>
                       </div>
                     {% endfor %}
@@ -110,7 +110,7 @@
                     <div class="right menu item">
                       {%- if config.ACCOUNTS and current_user.is_authenticated %}
                         {% for item in current_menu.submenu('notifications').children|sort(attribute='order') if item.visible recursive %}
-                          <div class="item inbox">
+                          <div class="{{ 'item active' if item.active else 'item' }} inbox">
                             <a role="menuitem" href="{{ item.url }}"
                               aria-label="{{ _("Requests") }}">
                               <i class="fitted inbox icon inverted" aria-hidden="true"></i>