shakespeare.diy
a25cbf54c7
- Added timeout-based hover management for reaction quick menu - Menu now closes smoothly when mouse leaves both button and menu - 150ms delay allows user to move from button to menu seamlessly - FAB now only appears on the feed page (Index) - Added showFAB prop to MainLayout for conditional rendering Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { LeftSidebar } from '@/components/LeftSidebar';
|
|
import { RightSidebar } from '@/components/RightSidebar';
|
|
import { MobileTopBar } from '@/components/MobileTopBar';
|
|
import { MobileBottomNav } from '@/components/MobileBottomNav';
|
|
import { MobileDrawer } from '@/components/MobileDrawer';
|
|
import { FloatingComposeButton } from '@/components/FloatingComposeButton';
|
|
|
|
interface MainLayoutProps {
|
|
children: React.ReactNode;
|
|
/** Optional custom right sidebar to replace the default one */
|
|
rightSidebar?: React.ReactNode;
|
|
/** Whether to show the floating compose button (default: false) */
|
|
showFAB?: boolean;
|
|
}
|
|
|
|
export function MainLayout({ children, rightSidebar, showFAB = false }: MainLayoutProps) {
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile top bar - only on small screens */}
|
|
<MobileTopBar onAvatarClick={() => setDrawerOpen(true)} />
|
|
|
|
{/* Mobile drawer */}
|
|
<MobileDrawer open={drawerOpen} onOpenChange={setDrawerOpen} />
|
|
|
|
{/* Main layout - three column on desktop */}
|
|
<div className="flex justify-center min-h-screen mx-auto max-w-[1200px]">
|
|
{/* Desktop left sidebar - hidden below sidebar breakpoint */}
|
|
<div className="hidden sidebar:block">
|
|
<LeftSidebar />
|
|
</div>
|
|
|
|
{/* Main content area */}
|
|
{children}
|
|
|
|
{/* Desktop right sidebar - handled internally with hidden lg:block */}
|
|
{rightSidebar ?? <RightSidebar />}
|
|
</div>
|
|
|
|
{/* Mobile bottom nav - only on small screens */}
|
|
<MobileBottomNav />
|
|
|
|
{/* Mobile floating compose button - only on feed page */}
|
|
{showFAB && <FloatingComposeButton />}
|
|
|
|
{/* Bottom padding spacer for mobile bottom nav */}
|
|
<div className="h-16 sidebar:hidden" />
|
|
</>
|
|
);
|
|
}
|