Lead nav w fixed items & dimensions

eea · Nov 18, 2021 · a8c810e · a8c810e
1 parent 818f24e
commit a8c810e
Show file tree

Hide file tree

Showing 2 changed files with 154 additions and 27 deletions.
diff --git a/src/components/theme/Header/HeaderNavigation.jsx b/src/components/theme/Header/HeaderNavigation.jsx
@@ -8,6 +8,28 @@ 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 Card = ({ children, itemId }) => {
+  return (
+    <div
+      role="button"
+      style={{
+        border: '1px solid',
+        display: 'inline-block',
+        margin: '0 10px',
+        width: '160px',
+        userSelect: 'none',
+      }}
+      tabIndex={0}
+      className="card"
+    >
+      {children}
+    </div>
+  );
+};
+
 const MobileNav = ({ items, activeItem }) => {
   const [expanded, setExpanded] = React.useState(false);
 
@@ -22,23 +44,25 @@ const MobileNav = ({ items, activeItem }) => {
           {items &&
             items.length > 0 &&
             items.map((item, i) => (
-              <Link key={i} to={item.url}>
-                <p
-                  className={`lead-nav-item ${
-                    activeItem.title === item.title ? 'active-mobile-nav' : ''
-                  }`}
-                >
-                  {item.title}
-                  {item.url === activeItem.url && (
-                    <Icon
-                      className="lead-nav-icon"
-                      name={closeIcon}
-                      size="35px"
-                      onClick={() => setExpanded(false)}
-                    />
-                  )}
-                </p>
-              </Link>
+              <Card>
+                <Link key={i} to={item.url}>
+                  <p
+                    className={`lead-nav-item ${
+                      activeItem.title === item.title ? 'active-mobile-nav' : ''
+                    }`}
+                  >
+                    {item.title}
+                    {item.url === activeItem.url && (
+                      <Icon
+                        className="lead-nav-icon"
+                        name={closeIcon}
+                        size="35px"
+                        onClick={() => setExpanded(false)}
+                      />
+                    )}
+                  </p>
+                </Link>
+              </Card>
             ))}
         </div>
       ) : (
@@ -61,12 +85,53 @@ const MobileNav = ({ items, activeItem }) => {
   );
 };
 
+function onWheel(apiObj, ev) {
+  const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15;
+
+  if (isThouchpad) {
+    ev.stopPropagation();
+    return;
+  }
+
+  if (ev.deltaY < 0) {
+    apiObj.scrollNext();
+  } else if (ev.deltaY > 0) {
+    apiObj.scrollPrev();
+  }
+}
+
 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]);
+
+  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,
     );
@@ -82,24 +147,49 @@ const HeaderNavigation = ({ items, pageWidth }) => {
     // 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>

diff --git a/theme/site/globals/site.overrides b/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;
     }