awwwards-nav

1"use client";
2 
3import * as React from "react";
4import { useEffect, useRef, useState } from "react";
5import gsap from "gsap";
6import { List, X } from "@phosphor-icons/react";
7import { cn } from "@/lib/utils";
8 
9/**
10 * Awwwards Nav
11 *
12 * A glassmorphic bottom navigation pill with inline links and a "More" button.
13 * Tapping "More" expands the bar upward with a smooth `power4.inOut` motion:
14 * the inline links fade out, the button grows to full width, its icon flips to
15 * an X, and a multi-column mega-menu reveals inside the expanded panel.
16 *
17 * Ported from the vanilla "CodeGrid Awwwards Nav" (GSAP) into a single,
18 * self-contained, prop-driven React component. Positioning is left to the
19 * consumer via `className`, so it works fixed to the viewport or absolutely
20 * inside a positioned container.
21 */
22 
23export interface AwwwardsNavLink {
24  label: string;
25  href: string;
26}
27 
28export interface AwwwardsNavColumn {
29  /** Column heading shown above its links. */
30  title: string;
31  /** Links listed under the heading. */
32  links: AwwwardsNavLink[];
33}
34 
35export interface AwwwardsNavProps {
36  /** Inline links shown in the collapsed bar. Defaults to a sample set. */
37  items?: AwwwardsNavLink[];
38  /** Columns revealed in the expanded mega-menu. Defaults to a sample set. */
39  columns?: AwwwardsNavColumn[];
40  /** Label on the expand/collapse button. Defaults to "More". */
41  moreLabel?: string;
42  /** Called whenever the panel opens (true) or closes (false). */
43  onOpenChange?: (open: boolean) => void;
44  /**
45   * Extra class names for the root nav. Use this to position it —
46   * e.g. `fixed bottom-6 left-1/2 -translate-x-1/2` (default) or
47   * `absolute` inside a positioned parent.
48   */
49  className?: string;
50}
51 
52const DEFAULT_ITEMS: AwwwardsNavLink[] = [
53  { label: "Home", href: "#" },
54  { label: "Nominees", href: "#" },
55  { label: "Directory", href: "#" },
56  { label: "Collections", href: "#" },
57];
58 
59const DEFAULT_COLUMNS: AwwwardsNavColumn[] = [
60  {
61    title: "Awards",
62    links: [
63      { label: "Winners", href: "#" },
64      { label: "Site of the Day", href: "#" },
65      { label: "Nominees", href: "#" },
66    ],
67  },
68  {
69    title: "Inspiration",
70    links: [
71      { label: "Collections", href: "#" },
72      { label: "Elements", href: "#" },
73      { label: "Resources", href: "#" },
74    ],
75  },
76  {
77    title: "Directory",
78    links: [
79      { label: "Professionals", href: "#" },
80      { label: "Agencies", href: "#" },
81      { label: "Freelancers", href: "#" },
82    ],
83  },
84  {
85// … truncated