@kitconcept/volto-light-theme 7.6.7 → 7.7.0

package/src/components/StickyMenu/MobileCarouselArrowButton.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { EmblaCarouselType } from 'embla-carousel';
+import type { ComponentPropsWithRef } from 'react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+import leftArrowSVG from '@plone/volto/icons/left-key.svg';
+
+type UsePrevNextButtonsType = {
+  prevBtnDisabled: boolean;
+  nextBtnDisabled: boolean;
+  onPrevButtonClick: () => void;
+  onNextButtonClick: () => void;
+};
+
+export const usePrevNextButtons = (
+  emblaApi: EmblaCarouselType | undefined,
+): UsePrevNextButtonsType => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollPrev();
+  }, [emblaApi]);
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollNext();
+  }, [emblaApi]);
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev());
+    setNextBtnDisabled(!emblaApi.canScrollNext());
+  }, []);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onSelect).on('select', onSelect);
+  }, [emblaApi, onSelect]);
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  };
+};
+
+type PropType = ComponentPropsWithRef<'button'>;
+
+export const PrevButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--prev"
+      type="button"
+      {...restProps}
+    >
+      <Icon name={leftArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};
+
+export const NextButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--next"
+      type="button"
+      {...restProps}
+    >
+      <Icon name={rightArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};

package/src/components/StickyMenu/MobileStickyMenu.tsx

@@ -0,0 +1,76 @@
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import { IconLinkListTemplate } from '@kitconcept/volto-light-theme/primitives/IconLinkList';
+import type { StickyMenuSettings } from '../../types';
+import useEmblaCarousel from 'embla-carousel-react';
+import type { EmblaOptionsType } from 'embla-carousel';
+
+import {
+  usePrevNextButtons,
+  PrevButton,
+  NextButton,
+} from './MobileCarouselArrowButton';
+import type { Content } from '@plone/types';
+
+const MobileStickyMenu = ({ content }: { content: Content }) => {
+  const options: EmblaOptionsType = {};
+  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi);
+  const showMobileStickyMenu = useLiveData<StickyMenuSettings['sticky_menu']>(
+    content,
+    'kitconcept.sticky_menu',
+    'enable_mobile_sticky_menu',
+  );
+  const menuData = useLiveData<StickyMenuSettings['sticky_menu']>(
+    content,
+    'kitconcept.sticky_menu',
+    'sticky_menu',
+  );
+
+  const sticky_menu_color = useLiveData<
+    StickyMenuSettings['sticky_menu_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_color');
+
+  const sticky_menu_foreground_color = useLiveData<
+    StickyMenuSettings['sticky_menu_foreground_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_foreground_color');
+
+  if (!showMobileStickyMenu) {
+    return null;
+  }
+
+  return (
+    <div
+      className="mobile-sticky-menu"
+      role="navigation"
+      aria-label="Mobile Sticky menu"
+      style={
+        {
+          '--sticky-menu-color': sticky_menu_color,
+          '--sticky-menu-foreground-color': sticky_menu_foreground_color,
+        } as React.CSSProperties
+      }
+    >
+      <section className="embla">
+        <div className="embla__viewport" ref={emblaRef}>
+          <div className="embla__container">
+            {menuData &&
+              menuData.map((item) => (
+                <ul className="embla__slide" key={item['@id']}>
+                  <IconLinkListTemplate item={item} />
+                </ul>
+              ))}
+          </div>
+        </div>
+        <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+        <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+      </section>
+    </div>
+  );
+};
+
+export default MobileStickyMenu;

package/src/config/slots.ts

@@ -5,6 +5,7 @@ import FollowUsLogoAndLinks from '../components/Footer/slots/FollowUsLogoAndLink
 import Colophon from '../components/Footer/slots/Colophon';
 import CoreFooter from '../components/Footer/slots/CoreFooter';
 import StickyMenu from '../components/StickyMenu/StickyMenu';
+import MobileStickyMenu from '../components/StickyMenu/MobileStickyMenu';
 import Anontools from '../components/Anontools/Anontools';
 import type { Content } from '@plone/types';
 
@@ -57,5 +58,11 @@ export default function install(config: ConfigType) {
     component: Colophon,
   });
 
+  config.registerSlotComponent({
+    name: 'MobileStickyMenu',
+    slot: 'preFooter',
+    component: MobileStickyMenu,
+  });
+
   return config;
 }

package/src/primitives/IconLinkList.tsx

@@ -6,6 +6,58 @@ type IconLinkListProps = {
   iconLinks: Array<iconLink>;
 };
 
+export const IconLinkListTemplate = ({ item }) => {
+  const itemInfo: {
+    title: string;
+    hrefTitle: string;
+    href: string;
+    itemHref: string;
+    src: string;
+    srcAlt: string;
+  } = {
+    title: '',
+    hrefTitle: '',
+    href: '',
+    itemHref: '',
+    src: '',
+    srcAlt: '',
+  };
+
+  // If the item has title, always set it
+  itemInfo.title = item ? item?.title || item?.href?.[0]?.['title'] || '' : '';
+  if (item?.href?.length > 0) {
+    itemInfo.title = item.title || item.href[0]['title'];
+    itemInfo.href = flattenToAppURL(item.href[0]['@id']);
+  }
+  if (item?.icon && item.icon[0]?.image_scales) {
+    itemInfo.itemHref = item.icon[0]['@id'];
+    itemInfo.srcAlt = item['alt'];
+    itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/${item.icon[0].image_scales[item.icon[0].image_field][0].download}`;
+  } else if (item?.icon && item.icon[0]) {
+    itemInfo.itemHref = item.icon[0]['@id'];
+    itemInfo.srcAlt = item['alt'];
+    itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/@@images/image`;
+  }
+
+  if (!itemInfo.src) return null;
+  return (
+    <li className="item" key={item['@id']}>
+      {/* @ts-ignore */}
+      <ConditionalLink
+        condition={itemInfo.href}
+        to={itemInfo.href}
+        title={itemInfo.hrefTitle || itemInfo.srcAlt}
+        openLinkInNewTab={item.openInNewTab}
+      >
+        <div className="image-wrapper">
+          <img src={itemInfo.src} alt={itemInfo.srcAlt || ''} />
+        </div>
+        <span className="title">{itemInfo.title}</span>
+      </ConditionalLink>
+    </li>
+  );
+};
+
 const IconLinkList = (props: IconLinkListProps) => {
   const { iconLinks } = props;
 
@@ -13,58 +65,7 @@ const IconLinkList = (props: IconLinkListProps) => {
     <ul>
       {iconLinks && Array.isArray(iconLinks)
         ? iconLinks.map((item) => {
-            const itemInfo: {
-              title: string;
-              hrefTitle: string;
-              href: string;
-              itemHref: string;
-              src: string;
-              srcAlt: string;
-            } = {
-              title: '',
-              hrefTitle: '',
-              href: '',
-              itemHref: '',
-              src: '',
-              srcAlt: '',
-            };
-
-            // If the item has title, always set it
-            itemInfo.title = item
-              ? item?.title || item?.href?.[0]?.['title'] || ''
-              : '';
-            if (item?.href?.length > 0) {
-              itemInfo.title = item.title || item.href[0]['title'];
-              itemInfo.href = flattenToAppURL(item.href[0]['@id']);
-            }
-            if (item?.icon && item.icon[0]?.image_scales) {
-              itemInfo.itemHref = item.icon[0]['@id'];
-              itemInfo.srcAlt = item['alt'];
-              itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/${item.icon[0].image_scales[item.icon[0].image_field][0].download}`;
-            } else if (item?.icon && item.icon[0]) {
-              itemInfo.itemHref = item.icon[0]['@id'];
-              itemInfo.srcAlt = item['alt'];
-              itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/@@images/image`;
-            }
-
-            if (!itemInfo.src) return null;
-
-            return (
-              <li className="item" key={item['@id']}>
-                {/* @ts-ignore */}
-                <ConditionalLink
-                  condition={itemInfo.href}
-                  to={itemInfo.href}
-                  title={itemInfo.hrefTitle || itemInfo.srcAlt}
-                  openLinkInNewTab={item.openInNewTab}
-                >
-                  <div className="image-wrapper">
-                    <img src={itemInfo.src} alt={itemInfo.srcAlt || ''} />
-                  </div>
-                  <span>{itemInfo.title}</span>
-                </ConditionalLink>
-              </li>
-            );
+            return <IconLinkListTemplate item={item} key={item['@id']} />;
           })
         : null}
     </ul>

package/src/theme/_mobile-sticky-menu.scss

@@ -0,0 +1,92 @@
+.mobile-sticky-menu {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  display: flex;
+  display: none;
+  width: 100%;
+  height: 100px;
+  flex-direction: column;
+  background-color: var(--sticky-menu-color, #555);
+  @media only screen and (max-width: $narrow-container-width) {
+    display: block;
+  }
+
+  .embla {
+    position: relative;
+    --slide-size: 33%;
+
+    .embla__button {
+      display: flex;
+      height: 100px;
+      align-items: center;
+      padding: 0px;
+      border: none;
+      background-color: transparent;
+      color: var(--sticky-menu-foreground-color, #fff);
+      cursor: pointer;
+      font-size: 30px;
+    }
+    .embla__button--prev {
+      position: absolute;
+      top: 0px;
+      left: -5px;
+    }
+    .embla__button--next {
+      position: absolute;
+      top: 0px;
+      right: -5px;
+    }
+    .embla__viewport {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      width: 85%;
+
+      .embla__container {
+        display: flex;
+        height: 100px;
+        touch-action: pan-y pinch-zoom;
+        touch-action: pan-x;
+
+        .embla__slide {
+          min-width: 0;
+          flex: 0 0 var(--slide-size);
+          padding: 0px;
+          margin: 0px;
+          transform: translate3d(0, 0, 0);
+
+          .image-wrapper {
+            display: block;
+            width: 65px;
+            height: 65px;
+            img {
+              display: block;
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          li {
+            list-style: none;
+          }
+
+          span {
+            display: block;
+            color: var(--sticky-menu-foreground-color, #fff);
+            font-size: 10px;
+            font-weight: 700;
+            line-height: 12px;
+          }
+
+          a {
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            padding: 5px 10px 15px 10px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/theme/main.scss

@@ -38,6 +38,7 @@
 @import 'blocks/eventSearch';
 @import 'blocks/error-boundary';
 @import 'sticky-menu';
+@import 'mobile-sticky-menu';
 @import 'card';
 @import 'insets';
 @import 'person';

package/src/types.d.ts

@@ -81,6 +81,7 @@ export type StickyMenuSettings = {
   sticky_menu: Array<iconLink>;
   sticky_menu_color: string;
   sticky_menu_foreground_color: string;
+  enable_mobile_sticky_menu: boolean;
 };
 
 export type PloneGobrSocialMediaSettings = {