"use client" import React, { createContext, useContext, useRef, useState, useEffect, ReactNode, HTMLAttributes, } from "react" import gsap from "gsap" import { cn } from "@/lib/utils" type SideMenuContextType = { isOpen: boolean openMenu: () => void closeMenu: () => void toggleMenu: () => void menuRef: React.RefObject registerItem: (el: HTMLElement | null) => void unregisterItem: (el: HTMLElement | null) => void registerFooterItem: (el: HTMLElement | null) => void unregisterFooterItem: (el: HTMLElement | null) => void } const SideMenuContext = createContext(null) /* ----------------- SideMenu (provider + controller) ----------------- */ interface SideMenuProps { children: ReactNode /** time for the panel expand */ animationDuration?: number /** easing for the whole timeline (gsap string or cubic) */ easing?: string /** per-item animation timing */ itemStagger?: number itemDuration?: number /** footer items timing */ footerStagger?: number footerDuration?: number className?: string } export function SideMenu({ children, animationDuration = 0.7, easing = "power3.inOut", itemStagger = 0.08, itemDuration = 0.45, footerStagger = 0.08, footerDuration = 0.4, className, }: SideMenuProps) { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) const [items, setItems] = useState([]) const [footerItems, setFooterItems] = useState([]) const tlRef = useRef(null) const openMenu = () => setIsOpen(true) const closeMenu = () => setIsOpen(false) const toggleMenu = () => setIsOpen((s) => !s) // register/unregister helpers used by child item components const registerItem = (el: HTMLElement | null) => { if (!el) return setItems((prev) => { if (prev.includes(el)) return prev return [...prev, el] }) } const unregisterItem = (el: HTMLElement | null) => { if (!el) return setItems((prev) => prev.filter((x) => x !== el)) } const registerFooterItem = (el: HTMLElement | null) => { if (!el) return setFooterItems((prev) => { if (prev.includes(el)) return prev return [...prev, el] }) } const unregisterFooterItem = (el: HTMLElement | null) => { if (!el) return setFooterItems((prev) => prev.filter((x) => x !== el)) } // build timeline whenever the item lists or animation config change useEffect(() => { if (!menuRef.current) return // clean previous timeline if (tlRef.current) { tlRef.current.kill() tlRef.current = null } // ensure arrays are in DOM order if possible (they're registered in mount order) const visibleItems = items.slice() const visibleFooter = footerItems.slice() // initial states gsap.set(menuRef.current, { xPercent: 100, autoAlpha: 0, pointerEvents: "none" }) if (visibleItems.length) gsap.set(visibleItems, { y: 20, autoAlpha: 0 }) if (visibleFooter.length) gsap.set(visibleFooter, { y: 20, autoAlpha: 0 }) const tl = gsap.timeline({ paused: true, defaults: { ease: easing } }) // Panel expand tl.to( menuRef.current, { xPercent: 0, autoAlpha: 1, duration: animationDuration, pointerEvents: "auto", }, 0 ) // After panel expansion, animate items in sequence if (visibleItems.length) { tl.to( visibleItems, { y: 0, autoAlpha: 1, stagger: itemStagger, duration: itemDuration, ease: easing, }, // start slightly after the panel begins; you can tune the overlap by changing this offset animationDuration - Math.min(0.15, animationDuration * 0.2) ) } // Footer items animate shortly after items if (visibleFooter.length) { tl.to( visibleFooter, { y: 0, autoAlpha: 1, stagger: footerStagger, duration: footerDuration, ease: easing, }, // schedule after items animation ends animationDuration + (visibleItems.length ? itemDuration + itemStagger * visibleItems.length : 0) - 0.05 ) } tlRef.current = tl // if menu currently open, ensure timeline is at end; closed => at start if (isOpen) tlRef.current.play(0) else tlRef.current.pause(0) return () => { tl.kill() tlRef.current = null } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ items.length, footerItems.length, animationDuration, easing, itemStagger, itemDuration, footerStagger, footerDuration, ]) // control play / reverse for open/close useEffect(() => { const tl = tlRef.current if (!tl) return if (isOpen) { tl.play() } else { // reverse to close; keep reversed animation smooth tl.reverse() } }, [isOpen]) return ( , registerItem, unregisterItem, registerFooterItem, unregisterFooterItem, }} >

{children}

) } /* ----------------- Trigger ----------------- */ export function SideMenuTrigger({ children, className }: { children: ReactNode; className?: string }) { const ctx = useContext(SideMenuContext) if (!ctx) throw new Error("SideMenuTrigger must be used inside SideMenu") return (

{children}

) } /* ----------------- Content ----------------- */ export function SideMenuContent({ children, className }: { children: ReactNode; className?: string }) { const ctx = useContext(SideMenuContext) if (!ctx) throw new Error("SideMenuContent must be used inside SideMenu") // layout: fixed right, full height. width: mobile full, desktop 30vw return (

{children}

) } /* ----------------- Close (composable) ----------------- */ export function SideMenuClose({ children, className }: { children: ReactNode; className?: string }) { const ctx = useContext(SideMenuContext) if (!ctx) throw new Error("SideMenuClose must be used inside SideMenu") return (

{children}

) } /* ----------------- Item ----------------- */ /** SideMenuItem: composable item — hover reveals background top->bottom using scaleY. * Accepts href and className. */ interface SideMenuItemProps extends HTMLAttributes { href?: string className?: string } export function SideMenuItem({ children, href, className }: SideMenuItemProps) { const ctx = useContext(SideMenuContext) if (!ctx) throw new Error("SideMenuItem must be used inside SideMenu") const elRef = useRef(null) const bgRef = useRef(null) useEffect(() => { ctx.registerItem(elRef.current) return () => ctx.unregisterItem(elRef.current) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) // GSAP hover animation for background reveal useEffect(() => { const el = elRef.current const bg = bgRef.current if (!el || !bg) return function onEnter() { gsap.to(bg, { scaleY: 1, transformOrigin: "top", duration: 0.42, ease: "expo.inOut", overwrite: "auto", }) } function onLeave() { gsap.to(bg, { scaleY: 0, transformOrigin: "top", duration: 0.42, ease: "expo.inOut", overwrite: "auto", }) } el.addEventListener("mouseenter", onEnter) el.addEventListener("mouseleave", onLeave) // Set initial state gsap.set(bg, { scaleY: 0, transformOrigin: "top" }) return () => { el.removeEventListener("mouseenter", onEnter) el.removeEventListener("mouseleave", onLeave) } }, []) return (

{/* background reveal (theme controls var(--foreground)) */} {/* content above the bg */} {href ? ( { // Optionally, you can animate text color here with gsap if you want gsap.to(e.currentTarget, { color: "var(--background)", duration: 0.2, overwrite: "auto" }) }} onMouseLeave={e => { gsap.to(e.currentTarget, { color: "", duration: 0.2, overwrite: "auto" }) }} > {children} ) : (

{children}

)}

) } /* ----------------- Footer & FooterItem ----------------- */ export function SideMenuFooter({ children, className }: { children: ReactNode; className?: string }) { return

{children}

} export function SideMenuFooterItem({ children, href, className }: SideMenuItemProps) { const ctx = useContext(SideMenuContext) if (!ctx) throw new Error("SideMenuFooterItem must be used inside SideMenu") const elRef = useRef(null) useEffect(() => { ctx.registerFooterItem(elRef.current) return () => ctx.unregisterFooterItem(elRef.current) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return (

{href ? ( { // Animate text color to foreground on hover gsap.to(e.currentTarget, { color: "var(--foreground)", duration: 0.2, overwrite: "auto" }) }} onMouseLeave={e => { gsap.to(e.currentTarget, { color: "", duration: 0.2, overwrite: "auto" }) }} > {children} ) : (

{children}

)}

) }

Name	Type	Default	Required	Description
children	React.ReactNode	-	Yes	The content to be masked
animationDuration	number	-	No	Animation duration (seconds).
easing	string	-	No	Easing function.
className	string	-	No	Optional wrapper class.

Command Palette

Side Menu

Installation

Install Dependencies

Copy and Paste the component

Unlock with PRO

Usage

Props