refactor(sidemenu): add third level list and items & update active in…

…dication
eea · Oct 3, 2022 · e2d87da · e2d87da
1 parent 2c820c6
commit e2d87da
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 9 deletions.
diff --git a/src/ui/ContextNavigation/ContextNavigation.stories.jsx b/src/ui/ContextNavigation/ContextNavigation.stories.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Icon } from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
 
 const sidenavItems = [
   {
@@ -72,7 +72,25 @@ const sidenavItems = [
       {
         '@id': 'Articles',
         description: '',
-        items: [],
+        items: [
+          {
+            '@id': 'article-1',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Summer 2022: Living in a state of multiple crises',
+            url: '/#',
+          },
+          {
+            '@id': 'article-2',
+            description: '',
+            items: [],
+            review_state: null,
+            title:
+              'Interview — Prosumers and the energy crisis: citizens contributing to Europe’s energy transition',
+            url: '/#',
+          },
+        ],
         review_state: null,
         title: 'Articles',
         url: '/#',
@@ -96,9 +114,7 @@ function Template({ ...args }) {
   return (
     <Container>
       <nav className="context-navigation">
-        <div className="context-navigation-header">
-          <Icon className="ri-menu-2-line" /> {args.header}
-        </div>
+        <div className="context-navigation-header">{args.header}</div>
         <div role="list" className="ui list">
           {args.sidenavItems &&
             args.sidenavItems.map((element, index) => {
@@ -125,6 +141,29 @@ function Template({ ...args }) {
                                 >
                                   {subelement.title}
                                 </a>
+                                {subelement.items.length > 0 &&
+                                  subelement.items.map(
+                                    (subparelement, index) => {
+                                      return (
+                                        <div className="list" role="list">
+                                          <div
+                                            role="listitem"
+                                            className="item level-3"
+                                          >
+                                            <div className="content">
+                                              <a
+                                                title={subparelement.title}
+                                                className="contenttype-document"
+                                                href={subparelement.url}
+                                              >
+                                                {subparelement.title}
+                                              </a>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      );
+                                    },
+                                  )}
                               </div>
                             </div>
                           </div>

diff --git a/theme/themes/eea/extras/contextNavigation.less b/theme/themes/eea/extras/contextNavigation.less
@@ -41,6 +41,13 @@
   i.icon {
     margin-right: @sidenavHeaderIconMarginRight;
   }
+
+  &::before {
+    content: @sidenavHeaderIconContent;
+    font-family: 'remixicon';
+    font-weight: @sidenavHeaderIconFontWeight;
+    padding-right: @sidenavHeaderIconPaddingRight;
+  }
 }
 
 .context-navigation a.contenttype-folder {
@@ -76,12 +83,20 @@
   border-bottom: none; 
 }
 
+.item.level-3 a {
+  padding-left: @subparItemPaddingLeft;
+}
+
 // Active indicator
-.context-navigation .item a.active {
+.context-navigation .active.item > .content > a {
   color: @sidenavItemActiveColor;
   font-weight: @sidenavItemActiveFontWeight;
 }
-
-.context-navigation .item a.active:hover {
+.context-navigation .active.item > .content > a:hover {
   color : @sidenavItemActiveColorHover;
-}
+}
+
+// Hide arrow
+.content.active-indicator {
+  display: none;
+}
diff --git a/theme/themes/eea/extras/contextNavigation.variables b/theme/themes/eea/extras/contextNavigation.variables
@@ -18,6 +18,11 @@
 @sidenavHeaderBorderBottom: @2px solid @blue-grey-5;
 @sidenavHeaderIconMarginRight: @rem-space-4;
 
+/* Header icon */
+@sidenavHeaderIconContent: "\ef32";
+@sidenavHeaderIconFontWeight: @font-weight-4;
+@sidenavHeaderIconPaddingRight: @rem-space-4;
+
 /* Content */
 @sidenavContentBorderBottom: 1px solid @tertiaryColor;
 
@@ -30,6 +35,9 @@
 @sidenavItemHoverColor: @grey-0;
 @sidenavLastItemMarginBottom: @rem-space-2;
 
+/* Third level item */
+@subparItemPaddingLeft: @rem-space-12;
+
 /* Item active */
 @sidenavItemActiveColor: @secondaryColor;
 @sidenavItemActiveFontWeight: @font-weight-7;