@eeacms/volto-eea-design-system 1.14.0 → 1.16.0

package/CHANGELOG.md

@@ -4,6 +4,73 @@ 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.16.0](https://github.com/eea/volto-eea-design-system/compare/1.15.0...1.16.0) - 17 August 2023
+
+#### :rocket: New Features
+
+- feat(banner): allow Banner.Action to be a link #254325 #378 from eea/banner_link [ichim-david - [`144f71f`](https://github.com/eea/volto-eea-design-system/commit/144f71fdbf24aec8c35ae7cbb93cd719271a4413)]
+- feat(accordion): eea design filtering support and theme refactoring #379 from eea/accordion-filter [ichim-david - [`7e82454`](https://github.com/eea/volto-eea-design-system/commit/7e82454490777a42bc032646483fee59e7236df4)]
+
+#### :bug: Bug Fixes
+
+- fix: use quanta-toolbar class as trigger #256275 [andreiggr - [`5ede47d`](https://github.com/eea/volto-eea-design-system/commit/5ede47dcc2bd9211ee963c7e881f9ee5663d9d1a)]
+- fix: ensure rule only on quanta-toolbar #256275 [andreiggr - [`4b3e0a4`](https://github.com/eea/volto-eea-design-system/commit/4b3e0a4b6414aac5a9c21686043bc293a194afbd)]
+- fix: teaserGrid controls move only on quanta-toolbar #256275 [andreiggr - [`90c9736`](https://github.com/eea/volto-eea-design-system/commit/90c973679e189587ed3d9afeb5e6a0eb84fa5852)]
+- fix(popup): handle click outside popup area to close the popup [David Ichim - [`a6da52d`](https://github.com/eea/volto-eea-design-system/commit/a6da52d8e03f28fa851b841397e0f896223144b8)]
+- fix(popup): ref error and make sure that all .popup-container .popup get their position fixed [David Ichim - [`4435c1f`](https://github.com/eea/volto-eea-design-system/commit/4435c1fd10f81c9366955567fc1bc6a2c5364ba7)]
+- fix(carousel): lower opacity of arrows when we don't use infinite option [David Ichim - [`b8964c0`](https://github.com/eea/volto-eea-design-system/commit/b8964c0b5637da266c42e3785cfdf3f38babcdae)]
+
+#### :nail_care: Enhancements
+
+- change(accordion): use real icons for active and inactive panel icons #380 from eea/accordion-filtering [ichim-david - [`bb9e20c`](https://github.com/eea/volto-eea-design-system/commit/bb9e20ca9b68890852baae4f7a06c35db6136286)]
+- change(accordion): simplify change of icon for filter icons [David Ichim - [`a1cb797`](https://github.com/eea/volto-eea-design-system/commit/a1cb797929ddda6513dcc7027f32ebad6992ee14)]
+- change(accordion): make use of css variables for text and background colors [David Ichim - [`a6cddd5`](https://github.com/eea/volto-eea-design-system/commit/a6cddd542abb3d1aba3e985107410a60b697744e)]
+- change(site): use css variable values for inputs for easier customization [David Ichim - [`7a085e2`](https://github.com/eea/volto-eea-design-system/commit/7a085e26496420a503ba5c21b3791e66af96c96c)]
+- change(accordion): use the right selector for accordion panels hovering [dana-cfc4 - [`3b041b2`](https://github.com/eea/volto-eea-design-system/commit/3b041b29a4c871a50844f1054c7c39d3a468a7ae)]
+- change(accordion): use a css variable for icon active and inactive [David Ichim - [`a11bf76`](https://github.com/eea/volto-eea-design-system/commit/a11bf76c8ba5d3f58f330a75e673a0eed7c10c7e)]
+- change(popup): use a functional component for popup component using react-popper [David Ichim - [`3fe2629`](https://github.com/eea/volto-eea-design-system/commit/3fe26294162966d3815d74384f5e53071ad80b26)]
+- change(carousel): modified setting of current dot based on parent li slick-active class [David Ichim - [`4ac957e`](https://github.com/eea/volto-eea-design-system/commit/4ac957ed7fcba588f56ba65f9405ad4e39b568b7)]
+
+#### :house: Internal changes
+
+- chore(accordion): Improve accordion filter styling -refs#254324 [dana-cfc4 - [`d3ca98e`](https://github.com/eea/volto-eea-design-system/commit/d3ca98e494a4e0a68880dd87ed0f90967c431d50)]
+- chore: Add filter to accordion story -refs #254324 [dana-cfc4 - [`fdc906a`](https://github.com/eea/volto-eea-design-system/commit/fdc906a2e065e250bda198311e4e3b20b0880169)]
+
+#### :house: Documentation changes
+
+- docs: add links to docusaurus and storybook - refs #253277 [ana-oprea - [`9f7ba84`](https://github.com/eea/volto-eea-design-system/commit/9f7ba848d2e54ea7cd9d9eb92a0171274077e307)]
+- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`df303a5`](https://github.com/eea/volto-eea-design-system/commit/df303a56e90581d6ed554e839343a359727bb166)]
+
+#### :hammer_and_wrench: Others
+
+- bump package release version [David Ichim - [`fff4264`](https://github.com/eea/volto-eea-design-system/commit/fff4264d5a91fbf2fc5fe52fb2cc530c77ea43b1)]
+- Refs #254325; allow setting a Banner.Action to be a link [Tiberiu Ichim - [`18b00bf`](https://github.com/eea/volto-eea-design-system/commit/18b00bf355d8180d7ed4f43810e95fb6cef0e95c)]
+### [1.15.0](https://github.com/eea/volto-eea-design-system/compare/1.14.0...1.15.0) - 26 July 2023
+
+#### :rocket: New Features
+
+- feat(carousel): added story example on how to customize the dots to contain accessibility labels [David Ichim - [`fe5eb46`](https://github.com/eea/volto-eea-design-system/commit/fe5eb46dc94abfeaaa2c79022e507b452b4bb36a)]
+
+#### :bug: Bug Fixes
+
+- fix(storybook): controls that broke after the Hero stories [David Ichim - [`f8e995d`](https://github.com/eea/volto-eea-design-system/commit/f8e995d30e971163677a198846b1314222dbe408)]
+- fix: hover and focused border for block child - refs #255840 [Claudia Ifrim - [`fdd7783`](https://github.com/eea/volto-eea-design-system/commit/fdd7783b0658711674d251cce498900d9add52af)]
+- fix(storybook): popup story react import [David Ichim - [`18888f9`](https://github.com/eea/volto-eea-design-system/commit/18888f95888f1e3c89d9d1814462e1f27e85ea87)]
+- fix(accessibility): of carousel arrows, dots and role of carousel as a carousel region [David Ichim - [`00257fc`](https://github.com/eea/volto-eea-design-system/commit/00257fcfd0cd3b9959f2f3c68f0b2725c2d96f09)]
+
+#### :nail_care: Enhancements
+
+- change(carousel): set aria current to current dot button to indicate which slide we are on [David Ichim - [`e711ec8`](https://github.com/eea/volto-eea-design-system/commit/e711ec806be8b45b122a56b84717a0c45057cbbe)]
+- refactor: Use EEA countup instead of react-countup - refs #254634 [dobri1408 - [`146d8c2`](https://github.com/eea/volto-eea-design-system/commit/146d8c2d9d7d55530b39261bfabf7cebd9c8ac0b)]
+- change(search): added search icon as button for proper accessibility support [ACCESSIBILITY 2.1.1.1]  #360 from eea/refactor-search-input-icon [ichim-david - [`8f932ff`](https://github.com/eea/volto-eea-design-system/commit/8f932ffba42a96f7d6665c593ff3ad22c3b362fc)]
+- change(search): style icon class instead of i.icon [David Ichim - [`f96a590`](https://github.com/eea/volto-eea-design-system/commit/f96a590beb15ca6b577a169773b740b171b5e3c0)]
+- change(header): use a real button for search submit [David Ichim - [`37e491b`](https://github.com/eea/volto-eea-design-system/commit/37e491ba4af37f16a40bf6377d220d984be17656)]
+- change(header): move handling of key press that checks for enter key to a generic function [David Ichim - [`8df5c8a`](https://github.com/eea/volto-eea-design-system/commit/8df5c8a03f0fb0ad462605df283e622f5b6daf3f)]
+- refactor(SearchBox): add key down handler for search icon [Antonis Tarantilis - [`4f46ba5`](https://github.com/eea/volto-eea-design-system/commit/4f46ba5d3c2457a24e705bf7f34e1cfde2e2f79d)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.15.0 [Alin Voinea - [`30152fc`](https://github.com/eea/volto-eea-design-system/commit/30152fcdfffa4ec2262ebf78c1c8a885e222e73c)]
 ### [1.14.0](https://github.com/eea/volto-eea-design-system/compare/1.13.2...1.14.0) - 24 July 2023
 
 #### :rocket: New Features

package/DEVELOP.md

@@ -2,6 +2,28 @@
 
 ## Develop
 
+1. Make sure you have `docker` and `docker compose` installed and running on your machine:
+
+    ```Bash
+    git clone https://github.com/eea/volto-eea-design-system.git
+    cd volto-eea-design-system
+    git checkout -b bugfix-123456 develop
+    make
+    make start
+    ```
+
+1. Wait for `Volto started at 0.0.0.0:3000` meesage
+
+1. Go to http://localhost:3000
+
+1.  Happy hacking!
+
+    ```Bash
+    cd src/addons/volto-eea-design-system/
+    ```
+
+### Or add @eeacms/volto-eea-design-system to your Volto project
+
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
@@ -49,3 +71,37 @@ Before starting make sure your development environment is properly set. See [Vol
 1.  Happy hacking!
 
         cd src/addons/volto-eea-design-system/
+
+## Cypress
+
+To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.
+
+You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
+project where you added `volto-eea-design-system` to `mrs.developer.json`
+
+Go to:
+
+  ```BASH
+  cd src/addons/volto-eea-design-system/
+  ```
+
+Start:
+
+  ```Bash
+  make
+  make start
+  ```
+
+This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-eea-design-system` block installed.
+
+Open Cypress Interface:
+
+  ```Bash
+  make cypress-open
+  ```
+
+Or run it:
+
+  ```Bash
+  make cypress-run
+  ```

package/README.md

@@ -27,10 +27,23 @@ This package provides the following features:
 
 ## Getting started
 
+### Try volto-eea-design-system with Docker
+
+      git clone https://github.com/eea/volto-eea-design-system.git
+      cd volto-eea-design-system
+      make
+      make start
+
+Go to http://localhost:3000
+
 ### Add volto-eea-design-system to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
 
+   ```Bash
+   docker compose up backend
+   ```
+
 1. Start Volto frontend
 
 - If you already have a volto project, just update `package.json`:
@@ -76,6 +89,11 @@ Checkout the docs found within the [mockups](https://github.com/eea/volto-eea-de
 
 See [RELEASE.md](https://github.com/eea/volto-eea-design-system/blob/master/RELEASE.md).
 
+## Docusaurus and Storybook
+
+See [Docusaurus](https://eea.github.io/).
+See [Storybook](https://eea.github.io/eea-storybook/).
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-eea-design-system/blob/develop/DEVELOP.md).

package/docker-compose.yml

@@ -0,0 +1,28 @@
+version: "3"
+services:
+  backend:
+    image: plone/plone-backend:${PLONE_VERSION:-6}
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/it/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/ro/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/volto.pot

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,9 +20,9 @@
     "@eeacms/volto-corsproxy"
   ],
   "dependencies": {
+    "@eeacms/countup": "*",
     "@eeacms/volto-corsproxy": "*",
     "@fontsource/roboto": "4.5.8",
-    "react-countup": "^6.3.0",
     "react-lazy-load-image-component": "1.5.6",
     "react-slick": "^0.28.1",
     "remixicon": "2.5.0",

package/src/helpers/eventHandlers.js

@@ -0,0 +1,6 @@
+export default function handleEnterKeyPress(event, callback) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    callback(event);
+  }
+}

package/src/helpers/index.js

@@ -1,3 +1,4 @@
 export useClickOutside from './useClickOutside';
 export usePrevious from './usePrevious';
 export useFirstVisited from './useFirstVisited';
+export handleEnterKeyPress from './eventHandlers';

package/src/ui/Accordion/Accordion.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, Icon, Container } from 'semantic-ui-react';
+import { Accordion, Icon, Container, Input } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Accordion',
@@ -30,11 +30,20 @@ export default {
         type: { summary: 'string' },
       },
     },
+    enable_filtering: {
+      name: 'Enable filtering',
+      defaultValue: false,
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
   },
 };
 
 function AccordionContainer({ ...args }) {
   const [activeIndex, setActiveIndex] = useState([0]);
+  const [filterValue, setFilterValue] = useState('');
 
   const handleClick = (e, titleProps) => {
     const { index } = titleProps;
@@ -43,33 +52,68 @@ function AccordionContainer({ ...args }) {
     setActiveIndex(newIndex);
   };
 
+  const handleFilteredValueChange = (value) => {
+    setFilterValue(value);
+  };
+
   return (
     <Container>
       <div className="accordion-block">
-        {args.panels.map((panel, index) => {
-          return (
-            <Accordion className={args.variant} key={index}>
-              <Accordion.Title
-                index={index}
-                tabIndex={0}
-                active={activeIndex === index}
-                onClick={handleClick}
-                as={args.title_size === 'no value' ? '' : args.title_size}
-                onKeyDown={(e) => {
-                  if (e.nativeEvent.keyCode === 13) {
-                    handleClick(e, { index });
-                  }
-                }}
-              >
-                <span>{panel.title}</span>
-                <Icon className="ri-arrow-down-s-line" />
-              </Accordion.Title>
-              <Accordion.Content active={activeIndex === index}>
-                {panel.content}
-              </Accordion.Content>
-            </Accordion>
-          );
-        })}
+        {args.enable_filtering && (
+          <Accordion className={args.variant}>
+            <Accordion.Title className={'filter'}>
+              <Input
+                fluid
+                className="input-accordion-title"
+                transparent
+                placeholder="Type to filter..."
+                value={filterValue}
+                onChange={(e) => handleFilteredValueChange(e.target.value)}
+              />
+              <Icon
+                className={filterValue ? 'ri-close-line' : 'ri-filter-3-line'}
+                onClick={() => handleFilteredValueChange('')}
+              />
+            </Accordion.Title>
+          </Accordion>
+        )}
+        {args.panels
+          .filter(
+            (panel) =>
+              !args.enable_filtering ||
+              filterValue === '' ||
+              (filterValue !== '' &&
+                panel.title?.toLowerCase().includes(filterValue.toLowerCase())),
+          )
+          .map((panel, index) => {
+            const active = activeIndex === index;
+            return (
+              <Accordion className={args.variant} key={index}>
+                <Accordion.Title
+                  index={index}
+                  tabIndex={0}
+                  active={active}
+                  onClick={handleClick}
+                  as={args.title_size === 'no value' ? '' : args.title_size}
+                  onKeyDown={(e) => {
+                    if (e.nativeEvent.keyCode === 13) {
+                      handleClick(e, { index });
+                    }
+                  }}
+                >
+                  <span>{panel.title}</span>
+                  <Icon
+                    className={
+                      active ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'
+                    }
+                  />
+                </Accordion.Title>
+                <Accordion.Content active={active}>
+                  {panel.content}
+                </Accordion.Content>
+              </Accordion>
+            );
+          })}
       </div>
     </Container>
   );
@@ -80,6 +124,7 @@ export const Default = Template.bind({});
 Default.args = {
   variant: 'secondary',
   title_size: 'no value',
+  enable_filtering: false,
   panels: [
     {
       title: 'Water and marine environment',

package/src/ui/Banner/Banner.jsx

@@ -67,12 +67,19 @@ function Banner({ image, metadata, properties, children, ...rest }) {
 }
 
 Banner.Action = React.forwardRef(function (
-  { id, title, titleClass, icon, onClick, className, color },
+  { id, title, titleClass, icon, onClick, className, color, ...rest },
   ref,
 ) {
   return (
     <div className="action" ref={ref}>
-      <Button className={className} basic icon inverted onClick={onClick}>
+      <Button
+        className={className}
+        basic
+        icon
+        inverted
+        onClick={onClick}
+        {...rest}
+      >
         <Icon className={icon} color={color}></Icon>
         <span className={titleClass || 'mobile hidden'}>{title}</span>
       </Button>

package/src/ui/Card/Card.stories.jsx

@@ -394,50 +394,73 @@ FluidGrid.args = {
   fluid: true,
   cards: [...cardModels],
 };
+const PrevArrow = (props) => {
+  const { onClick } = props;
 
-const Arrows = (props) => {
-  const { slider = {} } = props;
+  return (
+    <Button
+      aria-label="Previous slide"
+      className="slider-arrow prev-arrow tablet or lower hidden"
+      icon
+      onClick={onClick}
+    >
+      <Icon className="ri-arrow-left-s-line" />
+    </Button>
+  );
+};
+
+const NextArrow = (props) => {
+  const { onClick } = props;
 
   return (
-    <>
-      <Button
-        aria-label="Previous slide"
-        className="slider-arrow prev-arrow tablet or lower hidden"
-        icon
-        onClick={() => {
-          if (slider.current) {
-            slider.current.slickPrev();
-          }
-        }}
-      >
-        <Icon className="ri-arrow-left-s-line" />
-      </Button>
-      <Button
-        aria-label="Next slide"
-        className="slider-arrow next-arrow tablet or lower hidden"
-        icon
-        onClick={() => {
-          if (slider.current) {
-            slider.current.slickNext();
-          }
-        }}
-      >
-        <Icon className="ri-arrow-right-s-line" />
-      </Button>
-    </>
+    <Button
+      aria-label="Next slide"
+      className="slider-arrow next-arrow tablet or lower hidden"
+      icon
+      onClick={onClick}
+    >
+      <Icon className="ri-arrow-right-s-line" />
+    </Button>
   );
 };
 
 function CarouselCardsContent(args) {
   const slider = React.useRef(null);
+  const dots_parent = React.useRef(null);
+  const settings = {
+    ...args.settings,
+    customPaging: (i) => (
+      <button className={'slider-dots-button'} aria-current={i === 0}>
+        <span className="slick-dot-icon" aria-hidden="true" />
+        <span className="slick-sr-only">Go to slide {i + 1}</span>
+      </button>
+    ),
+    appendDots: (dots) => (
+      <ul ref={dots_parent} className={'slick-dots'}>
+        {dots}
+      </ul>
+    ),
+    afterChange: (currentSlide) => {
+      const dots = dots_parent.current;
+      if (dots) {
+        dots
+          .querySelectorAll('.slider-dots-button')
+          .forEach(function (el, idx) {
+            el.setAttribute(
+              'aria-current',
+              el.parentElement.className === 'slick-active',
+            );
+          });
+      }
+    },
+  };
   return (
-    <div className="cards-carousel">
-      <Slider {...args.settings} ref={slider}>
+    <div className="cards-carousel" role={'region'} aria-label={'carousel'}>
+      <Slider {...settings} ref={slider}>
         {args.cards.slice(0, args.numberOfCards).map((card, index) => (
           <CardTemplate {...args} card={card} key={index} />
         ))}
       </Slider>
-      <Arrows slider={slider} />
     </div>
   );
 }
@@ -464,7 +487,9 @@ CarouselCards.args = {
     infinite: true,
     slidesToShow: 4,
     slidesToScroll: 1,
-    arrows: false,
+    arrows: true,
+    nextArrow: <NextArrow />,
+    prevArrow: <PrevArrow />,
     responsive: [
       {
         breakpoint: tabletBreakpoint,

package/src/ui/Header/Header.jsx

@@ -17,6 +17,7 @@ import HeaderMenuPopUp from './HeaderMenuPopUp';
 import PropTypes from 'prop-types';
 
 import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 Header.propTypes = {
   transparency: PropTypes.bool,
@@ -143,6 +144,7 @@ const TopDropdownMenu = ({
 const Main = ({
   logo,
   menuItems,
+  menuItemsLayouts,
   renderMenuItem,
   renderGlobalMenuItem,
   headerSearchBox,
@@ -159,6 +161,7 @@ const Main = ({
   const [burger, setBurger] = React.useState('');
   const searchInputRef = React.useRef(null);
   const [isClient, setIsClient] = React.useState();
+  const itemsLayouts = menuItemsLayouts || config.settings?.menuItemsLayouts;
 
   React.useEffect(() => setIsClient(true), []);
 
@@ -357,6 +360,7 @@ const Main = ({
         renderMenuItem={renderMenuItem}
         activeItem={activeItem}
         menuItems={menuItems}
+        menuItemsLayouts={itemsLayouts}
         pathName={pathname}
         onClose={menuOnClickOutside}
         triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}