Function Sidebar

src/components/Sidebar.jsx:26–246

({
  activeTab = 'home', // 'home' | 'detail' | 'settings'
  // Sort props
  isSortMenuOpen,
  setIsSortMenuOpen,
  sortOrder,
  setSortOrder,
  setRandomSeed,
  // Actions
  onRefresh,
  // I18n
  language,
  setLanguage,
  // Theme
  isDarkMode,
  themeMode,
  setThemeMode,
  t
})

 * Sidebar 组件 - 通用侧边导航栏
 */
export const Sidebar = ({
  activeTab = 'home', // 'home' | 'detail' | 'settings'
  // Sort props
  isSortMenuOpen,
  setIsSortMenuOpen,
  sortOrder,
  setSortOrder,
  setRandomSeed,
  // Actions
  onRefresh,
  // I18n
  language,
  setLanguage,
  // Theme
  isDarkMode,
  themeMode,
  setThemeMode,
  t
}) => {
  const location = useLocation();
  // const [isSponsorModalOpen, setIsSponsorModalOpen] = useState(false);
  // 统一的容器样式
  // TODO: 渐变填充和描边暂时设为透明，保留结构以便后续调整
  const containerStyle = isDarkMode ? {
    width: '62px',
    height: '100%',
    borderRadius: '16px',
    border: '1px solid transparent',
    background: 'transparent',
    // 原渐变样式 (暂时禁用)
    // backgroundImage: 'linear-gradient(180deg, #3B3B3B 0%, #242120 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)',
    // backgroundOrigin: 'border-box',
    // backgroundClip: 'padding-box, border-box',
  } : {
    width: '62px',
    height: '100%',
    borderRadius: '16px',
    border: '1px solid transparent',
    background: 'transparent',
  };

  return (
    <aside 
      style={containerStyle}
      className="relative flex flex-col justify-between items-center py-1 mr-4 flex-shrink-0"
    >
      {/* 上部分：Logo + 导航按钮 */}
      <div className="flex flex-col items-center gap-5 w-full">
        {/* Logo */}
        <div>
          <img src="/Logo_icon.svg" alt="提示词填空器 (Prompt Fill) - AI 提示词管理工具" className="w-9 h-9" />
        </div>

        {/* 导航按钮组 */}
        <div className="flex flex-col items-center gap-4">
          <Tooltip content="主页" isDarkMode={isDarkMode}>
            <Link
              to="/explore"