Hide main menu after scrolling down

* Show it again when scrolling up. * Holarchy and Cost Benefit modal are changed to cover the entire page instead of starting under the main menu. * Holarchy and Cost Benefit modal respond to back button Closes #971
Zenmo · Jun 27, 2024 · dbb5321 · dbb5321
1 parent 50f916e
commit dbb5321
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 19 deletions.
diff --git a/frontend/components/Blocks/SectionBlock/CostBenefitModal/CostBenefitModal.tsx b/frontend/components/Blocks/SectionBlock/CostBenefitModal/CostBenefitModal.tsx
@@ -50,12 +50,17 @@ export default function CostBenefitModal({
 
   useEffect(() => {
     costBenefitData.detail && setSubgroup(Object.keys(costBenefitData.detail)[0]);
-  }, []);
 
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    handleClose();
-  };
+      window.location.hash = "#kosten-baten-" + Math.round(Math.random() * 10_000)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const handlePopState = (event: PopStateEvent) => {
+          handleClose()
+      }
+
+      window.addEventListener('popstate', handlePopState)
+
+      return () => window.removeEventListener('popstate', handlePopState)
+  }, []);
 
   const convertGraphData = data => {
     const returnArr: unknown[] = [];
@@ -78,7 +83,9 @@ export default function CostBenefitModal({
 
   return (
     <div className="h-screen bg-white">
-      <div className="bg-white py-6 px-10 lg:px-16 fixed top-[4.5rem] min-[699px]:top-[5rem] inset-x-0 mx-auto h-[calc(100%-5rem)] md:h-[calc(100%-5.5rem)] z-30">
+      <div className="bg-white py-6 px-10 top-0 lg:px-16 fixed inset-x-0 mx-auto z-50" style={{
+          height: "100%",
+      }}>
         <div className="block h-full w-full">
           <div className="flex flex-1 flex-col h-full">
             <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
@@ -134,7 +141,7 @@ export default function CostBenefitModal({
                     ))}
                 </div>
                 <div className="xl:w-[28%] flex flex-row-reverse">
-                  <CloseButton onClick={handleClick} />
+                  <CloseButton onClick={() => history.back()} />
                 </div>
               </div>
 

diff --git a/frontend/components/Blocks/SectionBlock/HolarchyTab/HolarchyTab.tsx b/frontend/components/Blocks/SectionBlock/HolarchyTab/HolarchyTab.tsx
@@ -13,6 +13,7 @@ import {WikiLink} from "@/containers/types"
 import InteractiveInputPopover, {
     PopoverHorizontalPosition,
 } from "@/components/InteractiveInputs/InteractiveInputPopover"
+import {useEffect} from "react"
 
 type HolarchyTab = {
   pagetitle: string;
@@ -49,14 +50,26 @@ export default function HolarchyTab({
 }: HolarchyTab) {
   const levels = ["national", "intermediate", "local"];
 
+  useEffect(() => {
+      window.location.hash = "#holarchie-" + Math.round(Math.random() * 10_000)
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const handlePopState = (event: PopStateEvent) => {
+          closeHolarchyModal()
+      }
+
+      window.addEventListener('popstate', handlePopState)
+
+      return () => window.removeEventListener('popstate', handlePopState)
+  })
+
   return (
     <div
-        className="bg-white fixed top-[4.7rem] min-[700px]:top-[4.7rem] overflow-auto md:overflow-hidden inset-x-0 mx-auto w-screen"
+        className="bg-white fixed top-0 overflow-auto md:overflow-hidden inset-x-0 mx-auto w-screen"
         style={{
-            height: "calc(100vh - 4.7rem)",
+            height: "100vh",
             display: "flex",
             flexDirection: "column",
-            zIndex: 25,
+            zIndex: 50,
         }}
     >
         <div
@@ -65,11 +78,11 @@ export default function HolarchyTab({
                 justifyContent: "space-between",
             }}
         >
-          <button onClick={closeHolarchyModal} style={{display: "flex", alignItems: "center"}}>
+          <button onClick={() => history.back()} style={{display: "flex", alignItems: "center"}}>
               <ChevronLeftIcon style={{width: "2rem"}}/>
               Terug naar {pagetitle}
           </button>
-          <CloseButton onClick={closeHolarchyModal} style={{
+          <CloseButton onClick={() => history.back()} style={{
             padding: ".5rem",
             height: "100%",
             width: "3rem",

diff --git a/frontend/components/Blocks/SectionBlock/SectionBlock.tsx b/frontend/components/Blocks/SectionBlock/SectionBlock.tsx
@@ -173,14 +173,9 @@ export default function SectionBlock({
 
   function openHolarchyModal() {
     setHolarchyModal(true);
-    sectionContainerRef.current.classList.add("h-screen");
-    setTimeout(() => {
-      sectionContainerRef.current.scrollIntoView();
-    }, 0);
   }
 
   function closeHolarchyModal() {
-    sectionContainerRef.current.classList.remove("h-screen");
     setHolarchyModal(false);
   }
 

diff --git a/frontend/components/Header/Header.tsx b/frontend/components/Header/Header.tsx
@@ -1,6 +1,6 @@
 import { NavItem } from "@/api/types";
 import Link from "next/link";
-import { useState } from "react";
+import {useEffect, useRef, useState} from "react"
 import Navbar from "./Navbar";
 
 export default function Header({ navigation }: { navigation: NavItem[] }) {
@@ -10,8 +10,28 @@ export default function Header({ navigation }: { navigation: NavItem[] }) {
     setMenuOpen(!menuOpen);
   };
 
+    const prevScrollPos = useRef(0)
+    const [visible, setVisible] = useState(true)
+
+    const handleScroll = () => {
+        const currentScrollPos = window.scrollY
+
+        setVisible(currentScrollPos < prevScrollPos.current)
+
+        prevScrollPos.current = currentScrollPos
+    }
+
+    useEffect( () => {
+        window.addEventListener('scroll', handleScroll);
+
+        return () => window.removeEventListener('scroll', handleScroll)
+    })
+
+
   return (
-    <nav className="sticky top-0 z-50 bg-white py-4 rounded dark:bg-gray-900 shadow-sm">
+    <nav className="sticky top-0 z-50 bg-white py-4 rounded dark:bg-gray-900 shadow-sm" style={{
+        position: visible ? "sticky" : "static",
+    }}>
       <div className="holonContentContainer px-10 lg:px-16">
         <div className="flex flex-wrap justify-between items-center mx-auto">
           <Link href="/" className="flex items-center text-left uppercase text-2xl font-bold text-holon-blue-900 dark:text-white">