Skip to content

Commit

Permalink
Merge pull request #12 from jwenger100/consulting-site-updates
Browse files Browse the repository at this point in the history 
Completely change header, pin header after user scrolls 300px
  • Loading branch information
@kylejoe
kylejoe authored Mar 4, 2024
2 parents 3991f70 + 08552a8 commit 8fd7f97
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 128 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down
98 changes: 53 additions & 45 deletions src/app/components/HeaderMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useEffect } from "react";
import {
Group,
Burger,
Expand All @@ -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" },
Expand All @@ -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
Expand Down Expand Up @@ -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 (
<>
<StickyHeadroom scrollHeight={56} zIndex={2} pinStart={300}>
<header className={classes.header}>
<Container size="lg">
<div className={classes.inner}>
<Link
href="/"
onClick={() => {
setActive(-1);
}}
>
<Image
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/cc-main-logo-green.svg`}
alt="Colchuck Consulting Logo"
width={120}
height={30}
priority={true} // Load this image before others
className={classes.logo}
style={{ marginTop: "7px" }}
/>
</Link>
<Group gap={0} justify="flex-end" visibleFrom="sm">
{items}
</Group>
<Burger
opened={opened}
onClick={toggle}
size="sm"
hiddenFrom="sm"
<header
className={classes.header}
style={{
position: "fixed",
top: 0,
left: 0,
right: 0,
height: rem(56),
zIndex: 2,
transition: "transform 400ms ease",
backgroundColor: "var(--mantine-color-body)",
}}
>
<Container size="lg">
<div className={classes.inner}>
<Link
href="/"
onClick={() => {
setActive(-1);
}}
>
<Image
src={`${process.env.NEXT_PUBLIC_BASE_PATH}/cc-main-logo-green.svg`}
alt="Colchuck Consulting Logo"
width={120}
height={30}
priority={true} // Load this image before others
className={classes.logo}
style={{ marginTop: "7px" }}
/>
</div>
</Container>
</header>
</StickyHeadroom>
</Link>
<Group gap={0} justify="flex-end" visibleFrom="sm">
{items}
</Group>
<Burger
opened={opened}
onClick={toggle}
size="sm"
hiddenFrom="sm"
/>
</div>
</Container>
</header>
<Drawer
opened={opened}
onClose={toggle}
Expand Down
81 changes: 0 additions & 81 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,6 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==

"@emotion/[email protected]":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
dependencies:
"@emotion/memoize" "^0.8.1"

"@emotion/memoize@^0.8.1":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
Expand Down Expand Up @@ -132,11 +125,6 @@
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==

"@emotion/[email protected]":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==

"@emotion/unitless@^0.8.1":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
Expand Down Expand Up @@ -249,11 +237,6 @@
resolved "https://registry.yarnpkg.com/@icons-pack/react-simple-icons/-/react-simple-icons-9.3.0.tgz#a3901d7eb0f2f4109d8f2c584f537cea056aa238"
integrity sha512-e2VRDFrhI9rCkEdkuAUhf/Ool0cwusWnwKqMACbIRMLHXxnHp1SdnGlRaEEjDeF4R0pQaEkmVNs2x2vn1sl+7A==

"@integreat-app/react-sticky-headroom@^2.2.0":
version "2.2.0"
resolved "https://registry.yarnpkg.com/@integreat-app/react-sticky-headroom/-/react-sticky-headroom-2.2.0.tgz#2b16b06f632f785c2a882983143dd3274c89c67a"
integrity sha512-PqeQ8dm51f3rSZIT+XpnAHl7t2kI3bp/X3gnb6OGW6bQy8loFa5uUcSgiTZ8yRN/XoQv5mtUBStz3DaHfS9vmQ==

"@isaacs/cliui@^8.0.2":
version "8.0.2"
resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
Expand Down Expand Up @@ -447,11 +430,6 @@
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==

"@types/[email protected]":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==

"@typescript-eslint/parser@^5.4.2 || ^6.0.0":
version "6.20.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.20.0.tgz#17e314177304bdf498527e3c4b112e41287b7416"
Expand Down Expand Up @@ -758,11 +736,6 @@ camelcase-css@^2.0.1:
resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==

camelize@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==

caniuse-lite@^1.0.30001579:
version "1.0.30001581"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz#0dfd4db9e94edbdca67d57348ebc070dece279f4"
Expand Down Expand Up @@ -859,30 +832,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2:
shebang-command "^2.0.0"
which "^2.0.1"

css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==

[email protected]:
version "3.2.0"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
dependencies:
camelize "^1.0.0"
css-color-keywords "^1.0.0"
postcss-value-parser "^4.0.2"

cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==

[email protected]:
version "3.1.2"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

csstype@^3.0.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
Expand Down Expand Up @@ -2382,11 +2336,6 @@ postcss-simple-vars@^7.0.0:
resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz#836b3097a54dcd13dbd3c36a5dbdd512fad2954c"
integrity sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==

postcss-value-parser@^4.0.2:
version "4.2.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

[email protected]:
version "8.4.31"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
Expand Down Expand Up @@ -2643,11 +2592,6 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
functions-have-names "^1.2.3"
has-property-descriptors "^1.0.0"

[email protected]:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==

shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
Expand Down Expand Up @@ -2786,21 +2730,6 @@ strip-outer@^1.0.1:
dependencies:
escape-string-regexp "^1.0.2"

styled-components@^6.1.8:
version "6.1.8"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201"
integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==
dependencies:
"@emotion/is-prop-valid" "1.2.1"
"@emotion/unitless" "0.8.0"
"@types/stylis" "4.2.0"
css-to-react-native "3.2.0"
csstype "3.1.2"
postcss "8.4.31"
shallowequal "1.1.0"
stylis "4.3.1"
tslib "2.5.0"

[email protected]:
version "5.1.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
Expand All @@ -2813,11 +2742,6 @@ [email protected]:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==

[email protected]:
version "4.3.1"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==

sugarss@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-4.0.1.tgz#128a783ed71ee0fc3b489ce1f7d5a89bc1e24383"
Expand Down Expand Up @@ -2896,11 +2820,6 @@ tsconfig-paths@^3.15.0:
minimist "^1.2.6"
strip-bom "^3.0.0"

[email protected]:
version "2.5.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==

tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
Expand Down

0 comments on commit 8fd7f97

Please sign in to comment.