From 08552a8e9aee1fdb442021fb81a4ff14ccf682a1 Mon Sep 17 00:00:00 2001 From: kylejoe Date: Sun, 3 Mar 2024 20:55:05 -0800 Subject: [PATCH] Completely change header, pin header after user scrolls 300px --- package.json | 2 - src/app/components/HeaderMenu.tsx | 98 +++++++++++++++++-------------- yarn.lock | 81 ------------------------- 3 files changed, 53 insertions(+), 128 deletions(-) diff --git a/package.json b/package.json index 89661d3..46740e3 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "dependencies": { "@emotion/react": "^11.11.3", "@icons-pack/react-simple-icons": "^9.3.0", - "@integreat-app/react-sticky-headroom": "^2.2.0", "@mantine/carousel": "^7.5.3", "@mantine/core": "^7.5.0", "@mantine/form": "^7.5.0", @@ -30,7 +29,6 @@ "react-dom": "^18.2.0", "react-simple-typewriter": "^5.0.1", "react-spinners": "^0.13.8", - "styled-components": "^6.1.8", "tabler-icons-react": "^1.56.0", "typescript": "5.3.3" }, diff --git a/src/app/components/HeaderMenu.tsx b/src/app/components/HeaderMenu.tsx index 0b3faf2..733ec3e 100644 --- a/src/app/components/HeaderMenu.tsx +++ b/src/app/components/HeaderMenu.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useEffect } from "react"; import { Group, Burger, @@ -10,19 +10,13 @@ import { Anchor, } from "@mantine/core"; import { useDisclosure, useWindowScroll } from "@mantine/hooks"; +import { useState } from "react"; import { IconChevronDown } from "@tabler/icons-react"; import classes from "./HeaderMenu.module.css"; import Image from "next/image"; import Link from "next/link"; -import dynamic from "next/dynamic"; import { IconBrandFacebook, IconBrandLinkedin } from "@tabler/icons-react"; -// next/dynamic is used to import the StickyHeadroom component dynamically -// This is done to prevent the component from being rendered on the server, which would cause an error. -const StickyHeadroom = dynamic( - () => import("@integreat-app/react-sticky-headroom") -); - const links = [ { link: "/#about", label: "About" }, { link: "/#services", label: "Our Services" }, @@ -45,14 +39,16 @@ export function HeaderMenu() { const [opened, { toggle }] = useDisclosure(false); const [active, setActive] = useState(-1); const [scroll] = useWindowScroll(); // Get the current scroll position - const [showHeader, setShowHeader] = useState(false); // State to control the visibility of the header. + const [showHeader, setShowHeader] = useState(false); useEffect(() => { - // Check if the page has been scrolled (i.e., scroll.y > 300), and update showHeader accordingly. - setShowHeader(scroll.y > 300); - }, [scroll.y]); + // Check if the user has scrolled down 200px and update showHeader accordingly + const handleScroll = () => setShowHeader(scroll.y > 300); + handleScroll(); // Call it on component mount - if (!showHeader) return null; // Do not render the header if showHeader is false. + // Since useWindowScroll hook provides scroll position reactively, + // there's no need to add a separate event listener for scroll events. + }, [scroll.y]); const items = links.map((link, index) => { // This is the code for the DROPDOWN menu @@ -101,41 +97,53 @@ export function HeaderMenu() { ); }); + if (!showHeader) return null; // Do not render the header if the user hasn't scrolled down 200px yet + return ( <> - -
- -
- { - setActive(-1); - }} - > - Colchuck Consulting Logo - - - {items} - - + +
+ { + setActive(-1); + }} + > + Colchuck Consulting Logo -
- -
- + + + {items} + + + + +