Nested Sidebar

"use client";

// A sidebar for deep navigation: items with children open and close in place
// beside a guide line, and a search field (press / to focus) filters the whole
// tree as you type, opening whatever holds a match and marking the matched
// letters. Clearing the search puts every folder back as it was. The header
// toggle (or ⌘B) folds it to a rail of top-level icons; picking one opens the
// sidebar again with that section expanded.

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  IconBook,
  IconBox,
  IconCode,
  IconLayoutSidebarLeftCollapse,
  IconLayoutSidebarLeftExpand,
  IconPalette,
  IconRocket,
  IconSearch,
  IconSelector,
  IconX,
} from "@tabler/icons-react";
import { createContext, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactNode } from "react";
import { cn } from "@/lib/utils";