fix(ui): 修复响应式侧边栏重复渲染问题
移动端抽屉和桌面端侧边栏分别用 md:hidden 和 hidden md:flex 控制显示
This commit is contained in:
@@ -247,7 +247,7 @@ export function Sidebar({
|
||||
<Menu size={20} />
|
||||
</motion.button>
|
||||
|
||||
{/* 遮罩层 */}
|
||||
{/* 遮罩层 - 仅移动端 */}
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
@@ -261,24 +261,14 @@ export function Sidebar({
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 侧边栏 */}
|
||||
{/* 移动端抽屉式侧边栏 */}
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ x: isOpen ? 0 : '-100%' }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
className={cn(
|
||||
'fixed md:static inset-y-0 left-0 z-50',
|
||||
'w-64 bg-gray-800 border-r border-gray-700 flex flex-col',
|
||||
'md:transform-none md:translate-x-0'
|
||||
)}
|
||||
style={{ transform: 'none' }}
|
||||
className="fixed inset-y-0 left-0 z-50 w-64 bg-gray-800 border-r border-gray-700 flex flex-col md:hidden"
|
||||
>
|
||||
<div className="hidden md:flex flex-col h-full">
|
||||
<SidebarContent />
|
||||
</div>
|
||||
<div className="flex md:hidden flex-col h-full">
|
||||
<SidebarContent />
|
||||
</div>
|
||||
<SidebarContent />
|
||||
</motion.div>
|
||||
|
||||
{/* 桌面端固定侧边栏 */}
|
||||
|
||||
Reference in New Issue
Block a user