Elevate Navbar

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3"use client";
4 
5import React, { useEffect, useState } from "react";
6import { ElevateNavbarMobile } from "./ElevateMobileNav";
7import { ElevateNavbarDesktop } from "./ElevateDesktopNav";
8 
9const NAV_CONFIG = {
10  backgroundColor: "#d8b4fe",
11  duration: 0.35,
12  navTextDuration: 0.35,
13  ctaDuration: 0.4,
14  dropdownItemOffsetY: -8,
15  dropdownPointerDelay: 0.03,
16  staggerItems: true,
17  activeColor: "#ffffff",
18  inactiveColor: "rgba(255,255,255,0.5)",
19  ease: "power2.out",
20  ctaBackground: "#ffffff",
21  ctaHoverBackground: "#000000",
22};
23 
24type ElevateNavbarConfig = typeof NAV_CONFIG;
25 
26interface ElevateNavbarProps extends Partial<ElevateNavbarConfig> {
27  navConfig?: Partial<ElevateNavbarConfig>;
28}
29 
30export default function ElevateNavbar({ navConfig = {}, ...props }: ElevateNavbarProps) {
31  const config = { ...NAV_CONFIG, ...navConfig, ...props };
32  const durationValue = config.duration ?? config.navTextDuration;
33  const [isMobile, setIsMobile] = useState(false);
34  const [hasMounted, setHasMounted] = useState(false);
35 
36  useEffect(() => {
37    const checkWidth = () => {
38      setIsMobile(window.innerWidth < 1025);
39    };
40 
41    queueMicrotask(() => {
42      checkWidth();
43      setHasMounted(true);
44    });
45 
46    window.addEventListener("resize", checkWidth);
47 
48    return () => {
49      window.removeEventListener("resize", checkWidth);
50    };
51  }, []);
52 
53  if (!hasMounted) {
54    return null;
55  }
56 
57  return (
58    <div
59      style={{ backgroundColor: config.backgroundColor }}
60      className="relative h-screen w-full font-mono text-[0.75vw]"
61    >
62      {isMobile ? (
63        <ElevateNavbarMobile
64          menuItems={menuItems}
65          cta={cta}
66          duration={durationValue}
67          ease={config.ease}
68          activeColor={config.activeColor}
69          inactiveColor={config.inactiveColor}
70        />
71      ) : (
72        <ElevateNavbarDesktop
73          menuItems={menuItems}
74          cta={cta}
75          navTextDuration={durationValue}
76          ctaDuration={durationValue}
77          dropdownItemOffsetY={config.dropdownItemOffsetY}
78          dropdownPointerDelay={config.dropdownPointerDelay}
79          staggerItems={config.staggerItems}
80          activeColor={config.activeColor}
81          inactiveColor={config.inactiveColor}
82          ease={config.ease}
83          ctaBackground={config.ctaBackground}
84          ctaHoverBackground={config.ctaHoverBackground}
85        />
86      )}
87    </div>
88  );
89}
90 
91const menuItems = [
92  {
93// … truncated