fix: update SideNav to conditionally render buttons and version status based on collapsed state

This commit is contained in:
shiyu
2025-12-12 17:05:46 +08:00
parent d7260e8863
commit 49a4300fc3
+29 -27
View File
@@ -166,7 +166,7 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
}} }}
> >
{/* 最小化应用 Dock */} {/* 最小化应用 Dock */}
{minimized.length > 0 && ( {!collapsed && minimized.length > 0 && (
<div <div
style={{ style={{
width: '100%', width: '100%',
@@ -224,7 +224,7 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
<Tag icon={<CheckCircleOutlined />} color="success" style={{ marginInlineEnd: 0 }} /> <Tag icon={<CheckCircleOutlined />} color="success" style={{ marginInlineEnd: 0 }} />
) : ( ) : (
<Tag icon={<CheckCircleOutlined />} color="success"> <Tag icon={<CheckCircleOutlined />} color="success">
{t('Up to date')} {status?.version}
</Tag> </Tag>
)} )}
</Tooltip> </Tooltip>
@@ -233,31 +233,33 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
) )
)} )}
</div> </div>
<div style={{ display: 'flex', flexDirection: collapsed ? 'column' : 'row', gap: 8 }}> {!collapsed && (
<Button <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
shape="circle" <Button
icon={<GithubOutlined />} shape="circle"
href="https://github.com/DrizzleTime/Foxel" icon={<GithubOutlined />}
target="_blank" href="https://github.com/DrizzleTime/Foxel"
/> target="_blank"
<Button />
shape="circle" <Button
icon={<WechatOutlined />} shape="circle"
onClick={() => setIsModalOpen(true)} icon={<WechatOutlined />}
/> onClick={() => setIsModalOpen(true)}
<Button />
shape="circle" <Button
icon={<SendOutlined />} shape="circle"
href="https://t.me/+thDsBfyqJxZkNTU1" icon={<SendOutlined />}
target="_blank" href="https://t.me/+thDsBfyqJxZkNTU1"
/> target="_blank"
<Button />
shape="circle" <Button
icon={<FileTextOutlined />} shape="circle"
href="https://foxel.cc" icon={<FileTextOutlined />}
target="_blank" href="https://foxel.cc"
/> target="_blank"
</div> />
</div>
)}
</div> </div>
</Sider> </Sider>