Directional Menu

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3"use client";
4 
5import { DirectionalMegaMenu } from "./DirectionalMegaMenu";
6import { Menu1 } from "./Menu1";
7import { Menu2 } from "./Menu2";
8import { Menu3 } from "./Menu3";
9import { MobileDirectionalMenu } from "./MobileDirectionalMenu";
10 
11const menuItems = [
12  {
13    label: "Products",
14    customContent: <Menu1 />,
15  },
16  {
17    label: "Solutions",
18    customContent: <Menu2 />,
19  },
20  {
21    label: "Developers",
22    customContent: <Menu3 />,
23  },
24  {
25    label: "About",
26    href: "#",
27  },
28];
29 
30export default function DirectionalMenu() {
31  return (
32    <div className="relative h-screen overflow-hidden bg-black text-white max-md:h-full max-md:overflow-visible max-md:pb-10">
33      {/* Navbar */}
34      <header className="relative z-50 border-b border-white/10">
35        <div className="max-w-7xl mx-auto max-[1025px]:hidden h-19 flex items-center justify-between">
36          {/* Logo */}
37          <div className="flex items-center gap-3">
38            <a href="/" className="flex items-center gap-3 cursor-pointer">
39              <svg width="30" height="30" viewBox="0 0 58 65" fill="none" xmlns="http://www.w3.org/2000/svg">
40                <path d="M0 0H9.02977V28.5943H0V0Z" fill="#ffffff"/>
41                <path d="M57.1895 64.7134H48.1597V36.1192H57.1895V64.7134Z" fill="#ffffff"/>
42                <path d="M0.0195312 36.1192V64.7135H9.0493V42.139L21.5405 37.4737V28.7449L0.0195312 36.1192Z" fill="#ffffff"/>
43                <path d="M48.1777 22.5746V0.00012207H57.3579V28.5944L34.332 37.8697V28.5944L48.1777 22.5746Z" fill="#ffffff"/>
44                <path d="M21.9912 29.0459L28.4868 26.8346C28.8573 26.7085 29.2624 26.7316 29.6161 26.8992L34.7834 29.3469M21.9912 29.0459L28.1616 32.2063M21.9912 29.0459V37.1727L28.1616 40.0321M34.7834 29.3469L28.1616 32.2063M34.7834 29.3469C34.7834 32.3443 34.7834 34.1753 34.7834 37.1727L28.1616 40.0321M28.1616 32.2063V40.0321" stroke="#ffffff" strokeWidth="0.902977"/>
45              </svg>
46 
47              <div className="flex items-center gap-2 text-white">
48                <svg width="156" height="45" viewBox="0 0 351 43" fill="none" xmlns="http://www.w3.org/2000/svg">
49                  <path d="M315.441 6.10352e-05H306.862L320.055 15.9603L324.019 21.0695L306.862 42.139H315.591L332.597 21.0695L328.555 15.9603L315.441 6.10352e-05Z" fill="white"/>
50                  <path d="M350.055 6.10352e-05H341.326L332.598 10.6853L336.962 15.9527L350.055 6.10352e-05Z" fill="white"/>
51// … truncated