fix

src/components/theme/Header/HeaderNavigation.jsx

@@ -8,9 +8,6 @@ import closeIcon from '@plone/volto/icons/clear.svg';
 import { Icon } from '@plone/volto/components';
 import { connect } from 'react-redux';
 
-import circleLeft from '@plone/volto/icons/circle-left.svg';
-import circleRight from '@plone/volto/icons/circle-right.svg';
-
 const MobileNav = ({ items, activeItem }) => {
   const [expanded, setExpanded] = React.useState(false);
 
@@ -67,36 +64,9 @@ const MobileNav = ({ items, activeItem }) => {
 const HeaderNavigation = ({ items, pageWidth }) => {
   const [activeItem, setActiveItem] = React.useState('');
   const [isMobile, setIsMobile] = React.useState(false);
-  const [itemsIncrement, setItemsIncrement] = React.useState(0);
-  const [itemsPerPage, setItemsPerPage] = React.useState(
-    items && items.length < 4 ? items.length : 4,
-  );
-
-  const [displayedItems, setDisplayedItems] = React.useState([]);
   const history = useHistory();
 
-  const noPrev = displayedItems && items && items[0] === displayedItems[0];
-  const noNext =
-    displayedItems &&
-    items &&
-    items[items.length - 1] === displayedItems[displayedItems.length - 1];
-
-  React.useEffect(() => {
-    //init items
-    const first = itemsIncrement * 3;
-    const last = first + itemsPerPage;
-    const itemsInit = items.slice(first, last);
-    setDisplayedItems(itemsInit);
-  }, [itemsIncrement, itemsPerPage, items]);
-
   React.useEffect(() => {
-    //init items
-    const first = itemsIncrement * 3;
-    const last = first + itemsPerPage;
-    const itemsInit = items.slice(first, last);
-
-    setDisplayedItems(itemsInit);
-
     const activeRouteDetected = items.filter(
       (item) => item.url === history.location.pathname,
     );
@@ -109,61 +79,27 @@ const HeaderNavigation = ({ items, pageWidth }) => {
     if (pageWidth && pageWidth > 768) {
       setIsMobile(false);
     }
-    if (pageWidth && pageWidth > 1240) {
-      if (items.length >= 6) {
-        setItemsPerPage(6);
-      }
-      if (items.length < 6) {
-        setItemsPerPage(items.length);
-      }
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, pageWidth]);
 
-  const handlePrev = () => {
-    setItemsIncrement(itemsIncrement - 1);
-  };
-
-  const handleNext = () => {
-    setItemsIncrement(itemsIncrement + 1);
-  };
-
   return (
     <React.Fragment>
       {isMobile ? (
         <MobileNav activeItem={activeItem} items={items} />
       ) : (
         <div className="header-navigation-lead">
-          {displayedItems.length > 0 &&
-            displayedItems.map((item, index) => (
-              <Link
-                style={{ width: `${100 / itemsPerPage}%` }}
-                className={`lead-navigation-item ${
-                  activeItem.title === item.title ? 'active-lead-nav' : ''
-                }`}
-                key={index}
-                to={item.url}
-                title={item.title}
-              >
-                {item.title}
+          {items.length > 0 &&
+            items.map((item, index) => (
+              <Link key={index} to={item.url}>
+                <p
+                  className={`lead-navigation-item ${
+                    activeItem.title === item.title ? 'active-lead-nav' : ''
+                  }`}
+                >
+                  {item.title}
+                </p>
               </Link>
             ))}
-          {!noPrev && (
-            <Icon
-              className="navigation-prev"
-              name={circleLeft}
-              size="34px"
-              onClick={handlePrev}
-            />
-          )}
-          {!noNext && (
-            <Icon
-              className="navigation-next"
-              name={circleRight}
-              size="34px"
-              onClick={handleNext}
-            />
-          )}
         </div>
       )}
     </React.Fragment>