@eeacms/volto-eea-design-system 1.38.3 → 1.39.0

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.39.0](https://github.com/eea/volto-eea-design-system/compare/1.38.3...1.39.0) - 20 August 2025
+
+#### :rocket: New Features
+
+- feat: Control Navigation Settings TTW - refs #288509 [dobri1408 - [`6b151e4`](https://github.com/eea/volto-eea-design-system/commit/6b151e46dc8f8e23e0933c882e45552ab1a3c547)]
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [David Ichim - [`4389bce`](https://github.com/eea/volto-eea-design-system/commit/4389bcefad69ffbcccd567fcb1c08611e3599877)]
 ### [1.38.3](https://github.com/eea/volto-eea-design-system/compare/1.38.2...1.38.3) - 31 July 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.38.3",
+  "version": "1.39.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -6,9 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Breadcrumb, Container, Image, Icon, Segment } from 'semantic-ui-react';
-
-import homeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/home-icon.svg';
+import { Breadcrumb, Container, Icon, Segment } from 'semantic-ui-react';
 
 const Breadcrumbs = ({
   root,
@@ -22,9 +20,9 @@ const Breadcrumbs = ({
       <Container>
         <Breadcrumb size={size} as="nav" aria-label={'Breadcrumbs'}>
           <ol aria-label="Breadcrumbs navigation">
-            <li>
+            <li className="breadcrumbs-home-item">
               <Link to={root || '/'} className="section" title={'Home'}>
-                <Image src={homeIcon} alt="" />
+                <Icon className="ri-home-2-line breadcrumbs-home-icon" />
               </Link>
             </li>
             {sections.map((item, index, items) => {

package/src/ui/Header/Header.jsx

@@ -158,7 +158,9 @@ const Main = ({
   const [burger, setBurger] = React.useState('');
   const searchInputRef = React.useRef(null);
   const [isClient, setIsClient] = React.useState();
-  const itemsLayouts = menuItemsLayouts || config.settings?.menuItemsLayouts;
+
+  const itemsLayouts =
+    menuItemsLayouts || config.settings?.menuItemsLayouts || {};
 
   React.useEffect(() => setIsClient(true), []);
 

package/src/ui/Header/HeaderMenuPopUp.js

@@ -8,10 +8,17 @@ import {
   Transition,
 } from 'semantic-ui-react';
 
-import { cloneDeep } from 'lodash';
+import { cloneDeep, kebabCase } from 'lodash';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
+const generateCssClassFromUrl = (url) => {
+  if (!url) return '';
+  return kebabCase(
+    url.replace(/\//g, '-').replace(/\./g, '-').replace(/@/g, '-'),
+  );
+};
+
 const createColumns = (item, renderMenuItem, item_id) => {
   return item.items.map((item, index) => (
     <React.Fragment key={index}>
@@ -120,17 +127,30 @@ export const StandardMegaMenuGrid = ({ menuItem, renderMenuItem, layout }) => {
 
   const renderColumns = () => (
     <Grid>
-      {menuItemColumns.map((section, columnIndex) => (
-        <div className={layout.menuItemColumns[columnIndex]} key={columnIndex}>
-          {columnIndex !== menuItemColumnsLength
-            ? renderColumnContent(menuItem.items[columnIndex], columnIndex)
-            : menuItem.items
-                .slice(menuItemColumnsLength)
-                .map((section, _idx) =>
-                  renderColumnContent(section, columnIndex),
-                )}
-        </div>
-      ))}
+      {menuItemColumns.map((section, columnIndex) => {
+        const sectionItem =
+          columnIndex !== menuItemColumnsLength
+            ? menuItem.items[columnIndex]
+            : menuItem.items.slice(menuItemColumnsLength)[0];
+        const urlClass = sectionItem?.url
+          ? generateCssClassFromUrl(sectionItem.url)
+          : '';
+        const classNames = `${layout.menuItemColumns[columnIndex]}${
+          urlClass ? ` ${urlClass}` : ''
+        }`;
+
+        return (
+          <div className={classNames} key={columnIndex}>
+            {columnIndex !== menuItemColumnsLength
+              ? renderColumnContent(menuItem.items[columnIndex], columnIndex)
+              : menuItem.items
+                  .slice(menuItemColumnsLength)
+                  .map((section, _idx) =>
+                    renderColumnContent(section, columnIndex),
+                  )}
+          </div>
+        );
+      })}
     </Grid>
   );
 
@@ -346,7 +366,6 @@ function HeaderMenuPopUp({
   const menuItem = menuItems.find(
     (current) => current.url === activeItem || current['@id'] === activeItem,
   );
-
   // Get layout for current menu item and fallback to a * layout that can
   // be used for all menu items that don't have a specific layout
   const layout =
@@ -360,7 +379,6 @@ function HeaderMenuPopUp({
         ])) ||
     (!!menuItemsLayouts && menuItemsLayouts['*']) ||
     {};
-
   return (
     <Transition visible={visible} animation="slide down" duration={300}>
       <div id="mega-menu" ref={nodeRef}>

package/theme/themes/eea/collections/breadcrumb.overrides

@@ -6,9 +6,11 @@
   display: flex;
   align-items: center;
   line-height: @lineHeight;
-
-  .home.icon {
-    margin-right: 0;
+  .breadcrumbs-home-item {
+    line-height: 1;
+  }
+  .breadcrumbs-home-icon {
+    --breadcrumbIconFontSize: @breadcrumbIconWidth;
   }
 }
 
@@ -49,6 +51,6 @@
 
   i.icon {
     width: @breadcrumbIconWidth;
-    font-size: @breadcrumbIconFontSize;
+    font-size: var(--breadcrumbIconFontSize, @breadcrumbIconFontSize);
   }
 }

package/theme/themes/eea/extras/contextNavigation.less

@@ -10,6 +10,7 @@
   padding-left: @sidenavPaddingLeft;
   overflow: @sidenavOverflow;
 }
+
 @media (max-width: @largeMonitorBreakpoint) {
   .context-navigation {
     max-width: @sidenavMaxWidth;
@@ -63,12 +64,12 @@
   padding: @sidenavFolderItemPadding;
 }
 
-.context-navigation .ui.list > .item > .content {
+.context-navigation .ui.list>.item>.content {
   border-bottom: @sidenavContentBorderBottom;
 }
 
 // Hide last border
-.context-navigation .ui.list > .item:last-child > .content {
+.context-navigation .ui.list>.item:last-child>.content {
   border-bottom: none;
 }
 
@@ -103,12 +104,13 @@
 }
 
 // Active indicator
-.context-navigation .active.item > .content > a {
+.context-navigation .active.item>.content>a {
   color: @sidenavItemActiveColor;
   font-weight: @sidenavItemActiveFontWeight;
 }
-.context-navigation .active.item > .content > a:hover,
-.context-navigation .active.item > .content > a:focus-visible {
+
+.context-navigation .active.item>.content>a:hover,
+.context-navigation .active.item>.content>a:focus-visible {
   color: @sidenavItemActiveColorHover;
 }
 
@@ -130,9 +132,11 @@
     align-items: center;
     gap: 0.15rem;
   }
+
   .list-item {
     padding: 0.25rem 0;
   }
+
   .list-item:has(> .context-navigation-detail) {
     list-style-type: none;
   }
@@ -150,6 +154,7 @@
   background-color: @sidenavAccordionHeaderBackgroundColor;
   box-shadow: @sidenavBoxShadow;
 }
+
 @media only screen and (max-width: 991px) {
   .view-viewview.light-header .eea-side-menu:not(.fixed) .accordion-header {
     color: white;
@@ -163,6 +168,7 @@
   box-shadow: @sidenavBoxShadow;
   background-color: @sidenavBackground;
 }
+
 .context-navigation-list .title-link {
   display: block;
   color: @sidenavItemColor;
@@ -170,9 +176,11 @@
   font-size: @sidenavItemFontSize;
   font-weight: @sidenavItemFontWeight;
 }
+
 .context-navigation-list .content .title-link {
   font-weight: @sidenavLevelTwoItemFontWeight;
 }
+
 .context-navigation {
   .current {
     color: @sidenavItemActiveColor;
@@ -183,7 +191,16 @@
     flex-wrap: wrap;
     margin: 0 !important;
   }
-  .ui.accordion > .title {
+
+  .navigation_home .icon {
+    font-size: 1rem !important;
+    font-weight: inherit;
+    margin-right: 0;
+    margin-left: -4px; // align icon with title text
+    margin-left: 2px;
+  }
+
+  .ui.accordion>.title {
     --text-color: @sidenavItemColor;
     --text-color-hover: @sidenavItemColor;
     font-size: @sidenavItemFontSize;
@@ -192,22 +209,21 @@
     text-align: left;
     line-height: @sidenavFolderItemLineHeight;
     margin: 0;
+    display: flex;
+    align-items: normal;
+
+    .icon {
+      margin-top: 4px;
+    }
   }
 
   // add border-bottom only on first level titles
-  .context-navigation-list
-    > .accordion-list-item
-    > .accordion
-    > .title:not([aria-expanded='true']) {
+  .context-navigation-list>.accordion-list-item>.accordion>.title:not([aria-expanded='true']) {
     border-bottom: @sidenavContentBorderBottom;
   }
 
   // add border-bottom to content of first level expanded accordion
-  .context-navigation-list
-    > .accordion-list-item
-    > .accordion
-    > .title[aria-expanded='true']
-    + .content {
+  .context-navigation-list>.accordion-list-item>.accordion>.title[aria-expanded='true']+.content {
     border-bottom: @sidenavContentBorderBottom;
   }
 
@@ -216,7 +232,14 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
+
   .accordion-list {
+    &.level-0 {
+      >.accordion-list-title .title-link {
+        font-weight: @sidenavItemFontWeight;
+      }
+    }
+
     .accordion-list .accordion-list-item .title {
       padding-left: @secondLevelItemPaddingLeft;
     }
@@ -224,24 +247,22 @@
     .accordion-list .accordion-list .accordion-list-item .title {
       padding-left: @thirdLevelItemPaddingLeft;
     }
+
     .accordion-list .accordion-list-item .accordion-list-title .title-link {
       padding-left: @thirdLevelItemPaddingLeft;
     }
 
-    .accordion-list
-      .accordion-list
-      .accordion-list-item
-      .accordion-list-title
-      .title-link {
+    .accordion-list .accordion-list .accordion-list-item .accordion-list-title .title-link {
       padding-left: @fourthLevelItemPaddingLeft;
     }
+
     margin-top: 0;
     margin-bottom: 0;
     list-style: none;
     padding-left: 0;
   }
 
-  .context-navigation-list > .accordion-list-title {
+  .context-navigation-list>.accordion-list-title {
     border-bottom: @sidenavContentBorderBottom;
 
     .title-link {
@@ -261,4 +282,4 @@
   }
 }
 
-.loadUIOverrides();
+.loadUIOverrides();

package/theme/themes/eea/extras/contextNavigation.variables

@@ -54,10 +54,10 @@
 
 /* Item - Level 2 */
 @sidenavLevelTwoItemFontWeight: @font-weight-4;
-@sidenavLevelTwoItemPadding: 0.5rem 1.5rem;
-@secondLevelItemPaddingLeft: @rem-space-6;
+@sidenavLevelTwoItemPadding: 0.5rem 1rem 0.5rem 2rem;
+@secondLevelItemPaddingLeft: @rem-space-8;
 
 /* Item - Level 3 */
 @subparItemPaddingLeft: @rem-space-12;
-@thirdLevelItemPaddingLeft: @rem-space-8;
-@fourthLevelItemPaddingLeft: @rem-space-10;
+@thirdLevelItemPaddingLeft: @rem-space-12;
+@fourthLevelItemPaddingLeft: @rem-space-14;

package/theme/themes/eea/globals/site.overrides

@@ -47,6 +47,7 @@ h6 {
 
 .content-area {
   color: @contentAreaColor;
+  min-height: 100px;
 }
 
 [id='page-document']>*,
@@ -210,10 +211,12 @@ a {
     size: A4;
     margin: 1cm;
   }
+
   * {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }
+
   .skiplinks-wrapper,
   .slider-arrow,
   #footer,
@@ -260,4 +263,4 @@ a {
   .grid-block-teaser .card {
     page-break-inside: auto;
   }
-}
+}

package/theme/themes/eea/modules/accordion.overrides

@@ -197,6 +197,16 @@
   --text-color-hover: @tertiaryColorCSSVar;
 }
 
+/* Remove padding from navigation settings accordion content */
+.navigation-objectlist-widget .ui.styled.accordion .content, .navigation-objectlist-widget  .ui.styled.accordion .accordion .content {
+  padding: 0 !important;
+  margin: 0 !important
+}
+
+navigation-objectlist-widget .ui.styled.accordion{
+   margin: 0 !important
+}
+
 @media only screen and (max-width: @largestMobileScreen) {
   .accordion-block h1 * {
     font-size: @mobileH1;