Function Sidebar

src/components/navs/Sidebar.jsx:346–561

()

// ─── Main Component ──────────────────────────────────────────────────────────
const Sidebar = () => {
  // State
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const [isSponsorsOpen, setSponsorsOpen] = useState(false);
  const [linePosition, setLinePosition] = useState(null);
  const [isLineVisible, setIsLineVisible] = useState(false);
  const [hoverLinePosition, setHoverLinePosition] = useState(null);
  const [isHoverLineVisible, setIsHoverLineVisible] = useState(false);
  const [pendingActivePath, setPendingActivePath] = useState(null);

  // Refs
  const sidebarRef = useRef(null);
  const sidebarContainerRef = useRef(null);
  const itemRefs = useRef({});
  const hoverTimeoutRef = useRef(null);
  const hoverDelayTimeoutRef = useRef(null);

  // Hooks
  const location = useLocation();
  const navigate = useNavigate();
  const { toggleSearch } = useSearch();
  const { startTransition, isTransitioning } = useTransition();
  const savedSet = useFavoritesSync();
  const isScrolledToBottom = useScrolledToBottom(sidebarContainerRef);

  // Helpers
  const findActiveElement = useCallback(() => {
    const activePath = pendingActivePath || location.pathname;
    for (const category of CATEGORIES) {
      const activeItem = category.subcategories.find(sub => activePath === `/${slug(category.name)}/${slug(sub)}`);
      if (activeItem) return itemRefs.current[`/${slug(category.name)}/${slug(activeItem)}`];
    }
    return null;
  }, [location.pathname, pendingActivePath]);

  const updateLinePosition = useCallback(el => {
    if (!el || !sidebarRef.current?.offsetParent) return null;
    const sidebarRect = sidebarRef.current.getBoundingClientRect();
    const elRect = el.getBoundingClientRect();
    return elRect.top - sidebarRect.top + elRect.height / 2;
  }, []);

  const scrollActiveItemIntoView = useCallback(() => {
    const activeEl = findActiveElement();
    if (!activeEl || !sidebarContainerRef.current) return;

    const containerRect = sidebarContainerRef.current.getBoundingClientRect();
    const elementRect = activeEl.getBoundingClientRect();

    const isOutOfView =
      elementRect.top < containerRect.top + SCROLL_OFFSET || elementRect.bottom > containerRect.bottom - SCROLL_OFFSET;

    if (isOutOfView) {
      sidebarContainerRef.current.scrollTo({
        top: sidebarContainerRef.current.scrollTop + (elementRect.top - containerRect.top) - SCROLL_OFFSET,
        behavior: 'smooth'
      });
    }