#23 added labs layout

src/components/containers/Sticky/index.tsx

@@ -1,42 +1,15 @@
-import React, { DetailsHTMLAttributes, FC, useEffect, useRef } from 'react';
-import styles from './styles.module.scss';
+import React, { DetailsHTMLAttributes, FC } from 'react';
+import StickyBox from 'react-sticky-box/dist/esnext';
 
-import ResizeSensor from 'resize-sensor';
-(window as any).ResizeSensor = ResizeSensor;
-
-import StickySidebar from 'sticky-sidebar';
-(window as any).StickySidebar = StickySidebar;
-
-import classnames from 'classnames';
-
-interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {}
-
-const Sticky: FC<IProps> = ({ children }) => {
-  const ref = useRef(null);
-  const sb = useRef<StickySidebar>(null);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    sb.current = new StickySidebar(ref.current, {
-      resizeSensor: true,
-      topSpacing: 72,
-      bottomSpacing: 10,
-    });
-
-    return () => sb.current?.destroy();
-  }, [ref.current, sb.current, children]);
-
-  if (sb) {
-    sb.current?.updateSticky();
-  }
+interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
+  offsetTop?: number;
+}
 
+const Sticky: FC<IProps> = ({ children, offsetTop = 65 }) => {
   return (
-    <div className={classnames(styles.wrap, 'sidebar_container')}>
-      <div className="sidebar" ref={ref}>
-        <div className={classnames(styles.sticky, 'sidebar__inner')}>{children}</div>
-      </div>
-    </div>
+    <StickyBox offsetTop={offsetTop} offsetBottom={10}>
+      {children}
+    </StickyBox>
   );
 };
 

src/components/containers/Sticky/styles.module.scss

@@ -1,17 +0,0 @@
-@import "src/styles/variables";
-
-.wrap {
-  height: 100%;
-  width: 100%;
-  position: relative;
-
-  :global(.sidebar) {
-    will-change: min-height;
-  }
-
-  :global(.sidebar__inner) {
-    transform: translate(0, 0); /* For browsers don't support translate3d. */
-    transform: translate3d(0, 0, 0);
-    will-change: position, transform;
-  }
-}