In-page navbar

1"use client";
2import React from "react";
3import {
4  AnimatePresence,
5  motion,
6  useScroll,
7  useTransform,
8  type Variants,
9  type MotionValue,
10} from "motion/react";
11import { EqualIcon, XIcon } from "lucide-react";
12import { useIsServer } from "@/hooks/use-is-server";
13import { cn } from "@/lib/utils";
14 
15const fadeVariants: Variants = {
16  fadeIn: { opacity: 1 },
17  fadeOut: { opacity: 0 },
18};
19 
20interface NavSection extends Omit<React.ComponentProps<"a">, "href"> {
21  label: string;
22  id: string;
23}
24 
25export interface InPageNavbarProps extends React.ComponentProps<"div"> {
26  logo: React.ReactElement;
27  sections: NavSection[];
28}
29 
30export function InPageNavbar({
31  logo,
32  sections,
33  className,
34  ...rest
35}: InPageNavbarProps) {
36  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
37  const [isSmallScreen, setIsSmallScreen] = React.useState(false);
38  const isServer = useIsServer();
39 
40  const navButtons = (
41    <NavButtonGroup
42      sections={sections}
43      isServer={isServer}
44      className="gap-x-1.5 gap-y-1 max-sm:mx-auto max-sm:grid max-sm:max-w-fit max-sm:grid-rows-3 max-sm:py-8 max-sm:text-sm sm:flex sm:items-center"
45    />
46  );
47 
48  React.useEffect(() => {
49    const handleMediaQuery = ({ matches }: { matches: boolean }) =>
50      setIsSmallScreen(matches);
51    const mediaQuery = window.matchMedia("(max-width:639px)");
52    mediaQuery.addEventListener("change", handleMediaQuery);
53    return () => mediaQuery.removeEventListener("change", handleMediaQuery);
54  }, []);
55 
56  return (
57    <>
58      <div
59        className={cn(
60          "pointer-events-none fixed inset-x-4.5 top-1.5 z-[100]",
61          "[&_a,button]:focus-visible:ring-offset-background [&_a,button]:focus-visible:ring-ring [&_a,button]:transition-opacity [&_a,button]:duration-150 [&_a,button]:ease-out [&_a,button]:hover:opacity-70 [&_a,button]:focus-visible:opacity-70 [&_a,button]:focus-visible:ring-1 [&_a,button]:focus-visible:ring-offset-1 [&_a,button]:focus-visible:outline-0",
62          className,
63        )}
64        {...rest}
65      >
66        <motion.div
67          initial={false}
68          animate={isSidebarOpen && isSmallScreen ? "fadeOut" : "fadeIn"}
69          variants={fadeVariants}
70          className="bg-card/85 border-border/50 pointer-events-auto mx-auto flex max-w-xl items-center justify-between rounded-lg border p-3 text-sm font-medium shadow-md backdrop-blur-[2px] sm:rounded-xl"
71        >
72          <a
73            href="#"
74            tabIndex={1}
75            onClick={(e) => {
76// … truncated