Lead navigation responsive updates

CHANGELOG.md

@@ -4,9 +4,17 @@ 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).
 
+#### [0.1.14](https://github.com/eea/volto-forests-theme/compare/0.1.13...0.1.14)
+
+- NavigationLead variable items dep on width & fixed widths [`8283528`](https://github.com/eea/volto-forests-theme/commit/82835288bce93dc00f6ebb9f097f6675e4a74fe9)
+- Lead nav w fixed items & dimensions [`a8c810e`](https://github.com/eea/volto-forests-theme/commit/a8c810efc9f6fa8f73b366750df41236798b6464)
+- Lead navigation responsive updates [`818f24e`](https://github.com/eea/volto-forests-theme/commit/818f24ea100f4a67581f9a679a26aa0f4819d178)
+
 #### [0.1.13](https://github.com/eea/volto-forests-theme/compare/0.1.12...0.1.13)
 
-- Lead Image updates [`2aededb`](https://github.com/eea/volto-forests-theme/commit/2aededbef9bb439e37d63132af8a21d424ca1327)
+> 18 November 2021
+
+- Lead Image updates [`#17`](https://github.com/eea/volto-forests-theme/pull/17)
 
 #### [0.1.12](https://github.com/eea/volto-forests-theme/compare/0.1.11...0.1.12)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/theme/Header/HeaderNavigation.jsx

@@ -8,6 +8,9 @@ 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);
 
@@ -64,9 +67,34 @@ 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(5);
+
+  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,
     );
@@ -79,27 +107,55 @@ const HeaderNavigation = ({ items, pageWidth }) => {
     if (pageWidth && pageWidth > 768) {
       setIsMobile(false);
     }
+    if (pageWidth && pageWidth > 1240) {
+      setItemsPerPage(7);
+    }
     // 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">
-          {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>
+          {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}
+              >
+                {item.title}
               </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>

theme/site/globals/site.overrides

@@ -181,6 +181,35 @@ body.has-toolbar {
   left: 5px;
   display: flex;
   color: white;
+  width: 99%;
+
+  .navigation-prev {
+    position: absolute;
+    bottom: 50px;
+    left: 0px;
+    cursor: pointer;
+  }
+
+  .navigation-prev:hover{
+    fill: #cd4200 !important;
+  }
+
+  .navigation-next {
+    position: absolute;
+    bottom: 50px;
+    right: 0px;
+    cursor: pointer;
+  }
+
+  .navigation-next:hover{
+    fill: #cd4200 !important;
+  }
+
+  .lead-nav-wrapper{
+    overflow-x: scroll;
+    overflow-y: hidden;
+    white-space:nowrap
+  }
 
   .active-lead-nav {
     background: white !important;
@@ -190,22 +219,30 @@ body.has-toolbar {
   }
 
   .lead-navigation-item {
+    height: 50px;
     padding: 12px 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     border: 2px solid #f7f7f5;
 
     margin: 0 2px;
 
     background-color: #f7f7f5;
     border-radius: 3px 3px 0 0;
+    text-decoration: none;
+    text-align: center;
 
     color: #554535;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
     text-decoration: none;
 
+
     @media (max-width: @computerBreakpoint) {
+      height: 40px;
       padding: 8px 10px;
       font-size: 14px;
     }

theme/site/globals/workspace.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "../../.."
+		}
+	],
+	"settings": {}
+}