Zhou Weidong
ecfbd3b8b5
- 按 app / shared / entities / features 分层，路由懒加载并抽出布局组件 - 请求层改为可插拔拦截器，统一错误类型、超时取消与端点拆分 - 抽取播放器、骨架屏、网格等复用组件，点赞收藏接入统一交互反馈 - 关于页重做为无边框极光风格，补充 iOS / Google Play 下载入口 - 修复播放页滚轮切集吞事件、页面误滚动、后台持续播放与声音记忆问题 - 语言按本地偏好与 IP 识别，国旗改为内联 SVG - 清理未使用的旧站点文件，补充 ESLint 配置
59 lines
2.0 KiB
React
59 lines
2.0 KiB
React
// Author: fruit.com.cn
|
|
import { Compass, History, Home, Info, ListVideo, UserRound } from 'lucide-react';
|
|
import { NavLink, useLocation } from 'react-router-dom';
|
|
import { useLocale, useUi } from '../../app/providers/AppProviders';
|
|
|
|
export function Sidebar() {
|
|
const { locale } = useLocale();
|
|
const { sidebarOpen, setSidebarOpen } = useUi();
|
|
const location = useLocation();
|
|
|
|
const primaryItems = [
|
|
[Home, locale.home, '/'],
|
|
[Compass, locale.shorts, '/shorts'],
|
|
[ListVideo, locale.subscriptions, '/subscriptions'],
|
|
];
|
|
|
|
const navClass = (to) => {
|
|
if (location.pathname !== to) return '';
|
|
return 'active';
|
|
};
|
|
|
|
// 移动端为抽屉式侧边栏，点击任一菜单项后必须收起
|
|
const closeOnNavigate = (event) => {
|
|
if (!event.target.closest?.('a')) return;
|
|
if (window.matchMedia('(max-width: 760px)').matches) setSidebarOpen(false);
|
|
};
|
|
|
|
return (
|
|
<aside className={`sidebar ${sidebarOpen ? 'open' : 'closed'}`} onClick={closeOnNavigate}>
|
|
<nav className="sidebar-group">
|
|
{primaryItems.map(([Icon, label, to]) => (
|
|
<NavLink to={to} className={() => navClass(to)} key={to}>
|
|
<Icon size={19} />
|
|
<span className="sidebar-label">{label}</span>
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
<div className="nav-rule" />
|
|
<div className="sidebar-group">
|
|
<NavLink to="/library" className={() => navClass('/library')}>
|
|
<UserRound size={19} />
|
|
<span className="sidebar-label">{locale.you}</span>
|
|
</NavLink>
|
|
<NavLink to="/history" className={() => navClass('/history')}>
|
|
<History size={19} />
|
|
<span className="sidebar-label">{locale.history}</span>
|
|
</NavLink>
|
|
</div>
|
|
<div className="nav-rule" />
|
|
<div className="sidebar-group">
|
|
<NavLink to="/about" className={() => navClass('/about')}>
|
|
<Info size={19} />
|
|
<span className="sidebar-label">{locale.about}</span>
|
|
</NavLink>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|