import { useIsNarrow } from '../hooks/useIsNarrow';
import { useUIStore } from '../stores/uiStore';
import { MenuIcon } from './icons';

/**
 * 窄屏下打开抽屉式侧栏的按钮。
 *
 * 只在窄屏渲染 —— 宽屏侧栏是常驻的，放个汉堡按钮点了什么也不会发生。
 * 侧栏里有底部导航没放的入口（退出登录等）。
 */
export default function NavToggle() {
  const narrow = useIsNarrow();
  const toggleNav = useUIStore(s => s.toggleNav);

  if (!narrow) return null;

  return (
    <button
      onClick={toggleNav}
      className="-ml-1 mr-0.5 p-1 rounded text-gray-500 active:bg-gray-100"
      aria-label="打开导航"
    >
      <MenuIcon className="w-4 h-4" />
    </button>
  );
}