-
- Copyright © 2020 — 2022 Learning Machines, Inc. (makers of FakeYou and Storyteller)
-
-
+
- )
+ );
}
-export { Footer }
\ No newline at end of file
+export { Footer };
diff --git a/packages/storyteller-home/src/common/TopNav.tsx b/packages/storyteller-home/src/common/TopNav.tsx
index f6fa68d3bf..8872422bd7 100644
--- a/packages/storyteller-home/src/common/TopNav.tsx
+++ b/packages/storyteller-home/src/common/TopNav.tsx
@@ -1,97 +1,177 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useLocomotiveScroll } from "react-locomotive-scroll";
+import React, { useState, useEffect } from "react";
-interface Props {
-}
+interface Props {}
function TopNav(props: Props) {
+ const { scroll } = useLocomotiveScroll();
+ const [isScrolling, setIsScrolling] = useState(false);
+ const [showTopBtn, setTopBtn] = useState(false);
- const [mobileHamburgerIsActive, setMobileHamburgerIsActive] = useState(false);
+ if (!!scroll) {
+ scroll.on(
+ "scroll",
+ (position: { scroll: { y: number } }, direction: string) => {
+ if (position.scroll.y > 50) {
+ // console.log(">> scroll > 50");
+ if (!isScrolling) {
+ setIsScrolling(true);
+ }
+ } else {
+ // console.log(">> scroll < 50 ");
+ if (isScrolling) {
+ setIsScrolling(false);
+ }
+ }
- const toggleHamburger = () => {
- setMobileHamburgerIsActive(!mobileHamburgerIsActive);
+ if (position.scroll.y > 400) {
+ // console.log(">> scroll > 50");
+ if (!showTopBtn) {
+ setTopBtn(true);
+ }
+ } else {
+ // console.log(">> scroll < 50 ");
+ if (showTopBtn) {
+ setTopBtn(false);
+ }
+ }
+ }
+ );
}
- const closeHamburger = () => {
- // TODO: This is an ergonomic hack.
- // The hamburger ideally should close whenever it is no longer active.
- setMobileHamburgerIsActive(false);
- }
+ const navClassNames = isScrolling
+ ? "container-fluid nav-scroll"
+ : "container-fluid";
- const navbarClasses = mobileHamburgerIsActive ? "navbar-menu is-active" : "navbar-menu";
- const navbarBurgerClasses = mobileHamburgerIsActive ? "navbar-burger is-active" : "navbar-burger";
+ const backToTop = showTopBtn
+ ? "btn-to-top nav-link show"
+ : "btn-to-top nav-link";
+
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ const menuToggle = () => {
+ setMobileMenuOpen(!mobileMenuOpen);
+ };
+
+ const hamburgerClassNames = mobileMenuOpen
+ ? "button_container active"
+ : "button_container";
+
+ const menuClassNames = mobileMenuOpen ? "overlay open" : "overlay";
+
+ useEffect(() => {
+ if (mobileMenuOpen) {
+ document.body.classList.add("lock-scroll");
+ } else {
+ document.body.classList.remove("lock-scroll");
+ }
+ }, [mobileMenuOpen]);
return (
<>
-