From 5dc7715dca81fb295d8610a300028fdb33f4a39d Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Fri, 5 Jul 2024 12:00:31 -0700
Subject: [PATCH] feat(website): Add shadow to navbar on scroll (#5768)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prevents problems with it blending in to content.

### Before
<img width="855" alt="Screenshot 2024-07-05 at 11 59 52 AM"
src="https://github.com/firezone/firezone/assets/167144/b5f4a595-26a6-4c48-8195-28dd26a6264e">


### After

<img width="836" alt="Screenshot 2024-07-05 at 11 59 26 AM"
src="https://github.com/firezone/firezone/assets/167144/cb2de469-6717-4991-9c79-b8daf68c5578">
---
 website/src/components/RootNavbar/index.tsx | 17 +++++++++++++++--
 website/src/hooks/useScrollPosition.ts      | 19 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 website/src/hooks/useScrollPosition.ts

diff --git a/website/src/components/RootNavbar/index.tsx b/website/src/components/RootNavbar/index.tsx
index 983c19106..7ae8f29b7 100644
--- a/website/src/components/RootNavbar/index.tsx
+++ b/website/src/components/RootNavbar/index.tsx
@@ -17,10 +17,11 @@ import { HiChevronDown } from "react-icons/hi2";
 import type { CustomFlowbiteTheme } from "flowbite-react";
 import { HiBars3 } from "react-icons/hi2";
 import { useDrawer } from "@/components/Providers/DrawerProvider";
+import { useScrollPosition } from "@/hooks/useScrollPosition";
 
 const navbarTheme: CustomFlowbiteTheme["navbar"] = {
   root: {
-    base: "fixed top-0 left-0 right-0 z-50 items-center bg-white px-2 py-2.5 sm:px-4",
+    base: "fixed top-0 left-0 right-0 z-50 items-center bg-white px-2 py-2.5 sm:px-4 transition-shadow",
     rounded: {
       on: "rounded",
       off: "",
@@ -150,9 +151,21 @@ function SidebarToggle() {
   }
 }
 
+function applyTheme(scrollPosition: number) {
+  return {
+    ...navbarTheme,
+    root: {
+      ...navbarTheme?.root,
+      base: `${navbarTheme?.root?.base} ${scrollPosition > 0 ? "shadow" : "shadow-none"}`,
+    },
+  };
+}
+
 export default function RootNavbar() {
+  const scrollPosition = useScrollPosition();
+
   return (
-    <Navbar theme={navbarTheme} fluid>
+    <Navbar theme={applyTheme(scrollPosition)} fluid>
       <SidebarToggle />
       <NavbarBrand as={Link} href="/">
         <Image
diff --git a/website/src/hooks/useScrollPosition.ts b/website/src/hooks/useScrollPosition.ts
new file mode 100644
index 000000000..6fae39887
--- /dev/null
+++ b/website/src/hooks/useScrollPosition.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export const useScrollPosition = () => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  useEffect(() => {
+    const updatePosition = () => {
+      setScrollPosition(window.pageYOffset);
+    };
+
+    window.addEventListener("scroll", updatePosition);
+
+    updatePosition();
+
+    return () => window.removeEventListener("scroll", updatePosition);
+  }, []);
+
+  return scrollPosition;
+};