Gradient Sidebar

1"use client"
2 
3import * as React from "react"
4import { motion, AnimatePresence } from "motion/react"
5import { cn } from "@/lib/utils"
6 
7const EASE_OUT_QUART: [number, number, number, number] = [0.25, 1, 0.5, 1]
8 
9// ── Types ────────────────────────────────────────────────────────────
10 
11interface GradientSidebarItem {
12  id: string
13  label: string
14  icon?: React.ReactNode
15  href?: string
16  children?: GradientSidebarItem[]
17  badge?: string | number
18}
19 
20interface GradientSidebarSection {
21  title?: string
22  items: GradientSidebarItem[]
23}
24 
25interface GradientSidebarProps {
26  sections: GradientSidebarSection[]
27  activeId?: string
28  onItemClick?: (item: GradientSidebarItem) => void
29  header?: React.ReactNode
30  footer?: React.ReactNode
31  defaultCollapsed?: boolean
32  collapsed?: boolean
33  onCollapsedChange?: (collapsed: boolean) => void
34  width?: number
35  collapsedWidth?: number
36  colorA?: string
37  colorB?: string
38  colorC?: string
39  overlayOpacity?: number
40  className?: string
41}
42 
43// ── Gradient Background ──────────────────────────────────────────────
44 
45function GradientBackground({
46  colorA = "rgba(0,130,116,0.85)",
47  colorB = "rgba(108,80,190,0.8)",
48  colorC = "rgba(0,155,140,0.65)",
49  overlayOpacity = 0.55,
50}: {
51  colorA?: string
52  colorB?: string
53  colorC?: string
54  overlayOpacity?: number
55}) {
56  return (
57    <>
58      <div className="pointer-events-none absolute inset-0 overflow-hidden">
59        <div
60          className="absolute rounded-full"
61          style={{
62            width: "130%",
63            height: "110%",
64            top: "-40%",
65            right: "-50%",
66            background: `radial-gradient(circle, ${colorA} 0%, transparent 65%)`,
67            filter: "blur(40px)",
68            animation: "gradient-sidebar-blob-1 23s ease-in-out infinite",
69          }}
70        />
71        <div
72          className="absolute rounded-full"
73          style={{
74            width: "120%",
75            height: "100%",
76            bottom: "-35%",
77            left: "-40%",
78            background: `radial-gradient(circle, ${colorB} 0%, transparent 65%)`,
79            filter: "blur(45px)",
80            animation: "gradient-sidebar-blob-2 29s ease-in-out infinite",
81          }}
82        />
83        <div
84          className="absolute rounded-full"
85          style={{
86// … truncated