feat(website): Add shadow to navbar on scroll (#5768)

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,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

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;
+};