feat(context-navigation): Added styling of side navigation - refs #27…

…2384
eea · Aug 26, 2024 · 1b9da93 · 1b9da93
1 parent 75ba3b6
commit 1b9da93
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 5 deletions.
diff --git a/theme/themes/eea/extras/contextNavigation.less b/theme/themes/eea/extras/contextNavigation.less
@@ -17,6 +17,13 @@
   }
 }
 
+@media screen and (min-width: @mobileBreakpoint) and (max-width: @computerBreakpoint) {
+  .context-navigation {
+    max-width: @mobileSidenavMaxWidth;
+    margin: 0 auto;
+  }
+}
+
 .context-navigation .item a {
   display    : block;
   padding    : @sidenavItemPadding;
@@ -43,7 +50,7 @@
     margin-right: @sidenavHeaderIconMarginRight;
   }
 
-  &::before {
+  &::before:not(.accordion-header) {
     content: @sidenavHeaderIconContent;
     font-family: 'remixicon';
     font-weight: @sidenavHeaderIconFontWeight;
@@ -84,10 +91,14 @@
   border-bottom: none; 
 }
 
-.item.level-3 a {
+.context-navigation .item.level-2 a {
   padding-left: @subparItemPaddingLeft;
 }
 
+ .context-navigation .item.level-3 a {
+  padding-left: @subparItemPaddingLeft + 2rem;
+}
+
 // Active indicator
 .context-navigation .active.item > .content > a {
   color: @sidenavItemActiveColor;
@@ -102,4 +113,74 @@
 .content.active-indicator {
   display: none;
 }
+
+/*******************************
+          Side navigation
+*******************************/
+.accordion-header {
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+  padding: @sidenavAccordionHeaderPadding;
+}
+
+.context-navigation-list .title-link {
+  display: block;
+  color: @sidenavItemColor; 
+  font-size  : @sidenavItemFontSize;
+  font-weight: @sidenavItemFontWeight;
+}
+.context-navigation-list .content .title-link {
+  font-weight: @sidenavLevelTwoItemFontWeight;
+}
+.context-navigation {
+  box-shadow: @sidenavBoxShadow;
+
+  .current {
+    color: @sidenavItemActiveColor;
+  }
+
+  .accordion {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .ui.accordion>.title {
+    --text-color: @sidenavItemColor;
+    --text-color-hover: @sidenavItemColor;
+    font-size: @sidenavItemFontSize;
+    font-weight: @sidenavItemFontWeight;
+    padding: @sidenavFolderItemPadding;
+    text-align: left;
+    &:not([aria-expanded="true"]) {
+        border-bottom: @sidenavContentBorderBottom;
+      }
+  }
+
+  .accordion-list {
+    margin-top: 0;
+    margin-bottom: 0;
+    list-style: none;
+    padding-left: 0;
+  }
+
+  .context-navigation-list>.accordion-list-title {
+    border-bottom: @sidenavContentBorderBottom;
+
+    .title-link {
+      padding: @sidenavFolderItemPadding;
+      font-size: @sidenavItemFontSize;
+      font-weight: @sidenavItemFontWeight;
+    }
+  }
+
+  .content .accordion-list .title-link {
+    padding: @sidenavLevelTwoItemPadding;
+  }
+
+  .ui.accordion .content {
+    --bg-color: transparent;
+    width: 100%;
+  }
+}
+
 .loadUIOverrides();
diff --git a/theme/themes/eea/extras/contextNavigation.variables b/theme/themes/eea/extras/contextNavigation.variables
@@ -4,17 +4,21 @@
 
 @sidenavMaxWidth: 350px;
 @widescreenSidenavMaxWidth: 300px;
+@mobileSidenavMaxWidth: 100%;
 @sidenavBackground: @grey-0;
 @sidenavMarginRight: @rem-space-4;
-@sidenavPaddingLeft: @rem-space-4;
+@sidenavPaddingLeft: 0;
 @sidenavOverflow: inherit;
 @sidenavMargin: @rem-space-8 auto;
+@sidenavShadowColor: @grey-3;
+@sidenavBoxShadow: 0px 3px 3px @sidenavShadowColor;
 
 /* Header */
 @sidenavHeaderColor: @blue-grey-5;
 @sidenavHeaderFontSize: @font-size-3;
 @sidenavHeaderFontWeight: @font-weight-7;
 @sidenavHeaderPadding: @rem-space-4;
+@sidenavAccordionHeaderPadding: @rem-space-2 @rem-space-4;
 @sidenavHeaderBorderBottom: @2px solid @blue-grey-5;
 @sidenavHeaderIconMarginRight: @rem-space-4;
 
@@ -29,7 +33,7 @@
 /* Nav item */
 @sidenavItemPadding: @rem-space-2 0 @rem-space-2 @rem-space-8;
 @sidenavItemFontSize: @font-size-1;
-@sidenavItemFontWeight: @font-weight-4;
+@sidenavItemFontWeight: @font-weight-5;
 @sidenavItemColor: @blue-grey-5;
 @sidenavItemHoverBackground: @blue-grey-5;
 @sidenavItemHoverColor: @grey-0;
@@ -46,4 +50,8 @@
 /* Folders - Level 1 */
 @sidenavFolderFontSize: @font-size-2;
 @sidenavFolderFontWeight: @font-weight-7;
-@sidenavFolderItemPadding: @rem-space-4 0 @rem-space-4 @rem-space-4;
+@sidenavFolderItemPadding: @rem-space-4;
+
+/* Item - Level 2 */
+@sidenavLevelTwoItemFontWeight: @font-weight-4;
+@sidenavLevelTwoItemPadding: 0.5rem 1.5rem;