feat: support the linkage between the menu drawer and the ai input drawer in mobile
This commit is contained in:
@@ -52,8 +52,8 @@ const LayoutWrapper: React.FC = () => {
|
||||
<Layout className="layout-wrapper app-root">
|
||||
{/* 顶部标题栏,位于左侧菜单栏之上 */}
|
||||
<TopBar
|
||||
onToggleMenu={() => setMobileMenuOpen((v) => !v)}
|
||||
onToggleInput={() => isHome && setInputOpen((v) => !v)}
|
||||
onToggleMenu={() => {setInputOpen(false); setMobileMenuOpen((v) => !v);}}
|
||||
onToggleInput={() => {if (isHome) {setMobileMenuOpen(false); setInputOpen((v) => !v);}}}
|
||||
isHome={isHome}
|
||||
/>
|
||||
{/* 下方为主布局:左侧菜单 + 右侧内容 */}
|
||||
|
||||
@@ -19,6 +19,18 @@ const SiderMenu: React.FC<Props> = ({ onNavigate, selectedKey, mobileOpen, onMob
|
||||
const [collapsed, setCollapsed] = React.useState(false);
|
||||
const [selectedKeys, setSelectedKeys] = React.useState<string[]>(['home']);
|
||||
const [internalMobileOpen, setInternalMobileOpen] = React.useState(false);
|
||||
const [topbarHeight, setTopbarHeight] = React.useState<number>(56);
|
||||
|
||||
React.useEffect(() => {
|
||||
const update = () => {
|
||||
const el = document.querySelector('.topbar') as HTMLElement | null;
|
||||
const h = el?.clientHeight || 56;
|
||||
setTopbarHeight(h);
|
||||
};
|
||||
update();
|
||||
window.addEventListener('resize', update);
|
||||
return () => window.removeEventListener('resize', update);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
setCollapsed(isMobile);
|
||||
@@ -57,7 +69,8 @@ const SiderMenu: React.FC<Props> = ({ onNavigate, selectedKey, mobileOpen, onMob
|
||||
width="100%"
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
styles={{ body: { padding: 0 } }}
|
||||
rootStyle={{ top: topbarHeight, height: `calc(100% - ${topbarHeight}px)` }}
|
||||
styles={{ body: { padding: 0 }, header: { display: 'none' } }}
|
||||
>
|
||||
<div className="sider-header">
|
||||
<HeartOutlined style={{ fontSize: 22 }} />
|
||||
|
||||
Reference in New Issue
Block a user