"use client"; import { useEffect, useId, useState } from "react"; import { AnimatePresence, LayoutGroup, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"; import { ArrowDown01Icon, ArrowRight01Icon, ChartHistogramIcon, CreditCardIcon, DashboardSquare01Icon, File01Icon, FolderIcon, Home01Icon, Image01Icon, Menu01Icon, Notification03Icon, SettingsIcon, UserIcon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; const spring = { type: "spring" as const, stiffness: 420, damping: 34, mass: 0.75, }; const widthTween = { type: "tween" as const, duration: 0.28, ease: [0.32, 0.72, 0, 1] as [number, number, number, number], }; const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; type NavLeaf = { id: string; label: string; icon: IconSvgElement; }; type NavBranch = { id: string; label: string; icon: IconSvgElement; children: NavLeaf[]; }; type NavItem = NavLeaf | NavBranch; function isBranch(item: NavItem): item is NavBranch { return "children" in item && Array.isArray(item.children); } const NAV: NavItem[] = [ { id: "home", label: "خانه", icon: Home01Icon }, { id: "dashboard", label: "داشبورد", icon: DashboardSquare01Icon }, { id: "workspace", label: "فضای کار", icon: FolderIcon, children: [ { id: "projects", label: "پروژه‌ها", icon: FolderIcon }, { id: "files", label: "فایل‌ها", icon: File01Icon }, { id: "media", label: "رسانه", icon: Image01Icon }, ], }, { id: "insights", label: "تحلیل", icon: ChartHistogramIcon, children: [ { id: "reports", label: "گزارش‌ها", icon: File01Icon }, { id: "billing", label: "صورتحساب", icon: CreditCardIcon }, ], }, { id: "team", label: "تیم", icon: UserIcon }, { id: "alerts", label: "اعلان‌ها", icon: Notification03Icon }, { id: "settings", label: "تنظیمات", icon: SettingsIcon }, ]; function ActiveBar({ layoutId }: { layoutId: string }) { return ( ); } export function SoftSidebarRail({ className, }: { className?: string; }) { const reduce = useReducedMotion() ?? false; const uid = useId(); const [expanded, setExpanded] = useState(true); const [active, setActive] = useState("home"); const [openBranch, setOpenBranch] = useState("workspace"); useEffect(() => { if (expanded) return; setOpenBranch(null); }, [expanded]); return (

{expanded ? (

ترهک

استودیو طراحی

) : null}

{NAV.map((item) => { const branch = isBranch(item); const selected = active === item.id || (branch && item.children.some((c) => c.id === active)); const open = openBranch === item.id; return (

{expanded ? ( {open && branch ? ( ) : null} ) : null} {open && branch && !expanded ? ( ) : null}

); })}

); } const SHELL = "fill-muted-foreground/70 font-[family-name:var(--font-estedad),Tahoma,Arial,sans-serif] tracking-normal"; export default function AnimatedSidebars() { return (

); }