Function Header

src/components/navs/Header.jsx:394–510

()

// ─── Main Component ──────────────────────────────────────────────────────────
const Header = () => {
  const location = useLocation();
  const isToolsPage = location.pathname.startsWith('/tools');

  const langCollection = useMemo(() => createListCollection({ items: ['JS', 'TS'] }), []);
  const styleCollection = useMemo(() => createListCollection({ items: ['CSS', 'TW'] }), []);

  const { languagePreset, setLanguagePreset, stylePreset, setStylePreset } = useOptions();
  const [isDrawerOpen, setDrawerOpen] = useState(false);
  const { toggleSearch } = useSearch();
  const stars = useStars();

  const starCountRef = useRef(null);
  const prefsTimeoutRef = useRef(null);
  const toolsTimeoutRef = useRef(null);
  const [prefsOpen, setPrefsOpen] = useState(false);
  const [toolsOpen, setToolsOpen] = useState(false);

  const closeDrawer = useCallback(() => setDrawerOpen(false), []);

  const handlePrefsEnter = useCallback(() => {
    if (prefsTimeoutRef.current) clearTimeout(prefsTimeoutRef.current);
    setPrefsOpen(true);
  }, []);

  const handlePrefsLeave = useCallback(() => {
    prefsTimeoutRef.current = setTimeout(() => setPrefsOpen(false), PREFS_CLOSE_DELAY);
  }, []);

  const handleToolsEnter = useCallback(() => {
    if (toolsTimeoutRef.current) clearTimeout(toolsTimeoutRef.current);
    setToolsOpen(true);
  }, []);

  const handleToolsLeave = useCallback(() => {
    toolsTimeoutRef.current = setTimeout(() => setToolsOpen(false), PREFS_CLOSE_DELAY);
  }, []);

  const openGitHub = useCallback(() => window.open(GITHUB_URL, '_blank'), []);

  return (
    <Box zIndex={100} className="main-nav">
      <Flex className="nav-items" h={20} alignItems="center" justifyContent="space-between" px={4}>
        <RouterLink to="/" className="logo">
          <Image src={Logo} alt="Logo" className="cursor-target" />
        </RouterLink>

        <IconButton
          aria-label="Open Menu"
          size="md"
          display={{ md: 'none' }}
          onClick={() => setDrawerOpen(true)}
          bg="transparent"
          color={colors.accent}
          _hover={{ bg: colors.bgElevated }}
        >
          <MenuIcon size="1.3em" />
        </IconButton>