Collapsible Sidebar

"use client";

// An app sidebar that folds to an icon rail. Icons stay exactly where they are
// while the labels fade, so the eye never has to find them again; in the rail,
// each item names itself in a tooltip and counts become dots. A highlight
// slides to the current page. Toggle with the button or ⌘B / Ctrl+B.

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  IconCalendar,
  IconChartBar,
  IconFileText,
  IconFolder,
  IconHome,
  IconInbox,
  IconLayoutKanban,
  IconLayoutSidebarLeftCollapse,
  IconLayoutSidebarLeftExpand,
  IconSelector,
  IconSettings,
  IconUsers,
} from "@tabler/icons-react";
import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactNode } from "react";
import { cn } from "@/lib/utils";