shakespeare.diy
d4f5b786a1
- Removed hideMobileTopBar prop from MainLayout entirely - Added STICKY_HEADER_CLASS constant in utils for consistent mobile-aware sticky positioning (top-10 on mobile, top-0 on desktop) - Updated all pages to use the shared constant: Search, KindFeed (Vines), Hashtag, Wallet, Settings, Placeholder, NotFound, Bookmarks, Notifications, and Profile - Back arrows hidden on desktop where sidebar provides navigation Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
51 lines
1.7 KiB
TypeScript
51 lines
1.7 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;
|
|
}
|
|
|
|
export function MainLayout({ children, rightSidebar }: 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 */}
|
|
<FloatingComposeButton />
|
|
|
|
{/* Bottom padding spacer for mobile bottom nav */}
|
|
<div className="h-16 sidebar:hidden" />
|
|
</>
|
|
);
|
|
}
|