feature: sticky toc

package.json

@@ -21,8 +21,8 @@
     "smoothscroll-polyfill": "^0.4.4"
   },
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },

src/AnchorLink.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Sticky } from 'semantic-ui-react';
 
 class AnchorLink extends Component {
   constructor(props) {

src/Block/HorizontalMenu.jsx

@@ -3,16 +3,19 @@
  * @module components/manage/Blocks/ToC/View
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import { Menu } from 'semantic-ui-react';
+import { Menu, Sticky } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from '@eeacms/volto-block-toc/AnchorLink';
+// import { StickyContainer, Sticky } from 'react-sticky';
 
 const RenderMenuItems = ({ items }) => {
+  // console.log('items', items);
   return map(items, (item) => {
     const { id, level, title } = item;
+    console.log('id, level, items', id, level, title);
     return (
       item && (
         <React.Fragment key={id}>
@@ -32,6 +35,8 @@ const RenderMenuItems = ({ items }) => {
  * @extends Component
  */
 const View = ({ data, tocEntries }) => {
+  console.log('toc entries', tocEntries);
+  const stickyRef = useRef(null);
   return (
     <>
       {data.title && !data.hide_title ? (
@@ -46,9 +51,15 @@ const View = ({ data, tocEntries }) => {
       ) : (
         ''
       )}
-      <Menu>
-        <RenderMenuItems items={tocEntries} />
-      </Menu>
+      <Sticky
+        onUnstick={(e) => console.log('HERE', e)}
+        ref={stickyRef}
+        offset={40}
+      >
+        <Menu>
+          <RenderMenuItems items={tocEntries} />
+        </Menu>
+      </Sticky>
     </>
   );
 };