72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { Sidebar } from './sidebar';
|
|
import { MobileNav } from './mobile-nav';
|
|
import { UserMenu } from './user-menu';
|
|
import { NotificationBell } from '@/components/notifications/notification-bell';
|
|
import { EmojiSpriteProvider } from '@/components/chat/emoji-sprite-provider';
|
|
import { FamilyOverlayProvider } from '@/components/family/family-overlay-provider';
|
|
import { MiniFamilyChat } from '@/components/family/mini-family-chat';
|
|
import { BrandLogo } from '@/components/id/brand-logo';
|
|
import Link from 'next/link';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const MOBILE_HEADER_HEIGHT = 'calc(3.5rem + env(safe-area-inset-top))';
|
|
|
|
export function IdShell({
|
|
active,
|
|
children,
|
|
wide = false,
|
|
fullBleed = false
|
|
}: {
|
|
active: string;
|
|
children: React.ReactNode;
|
|
wide?: boolean;
|
|
fullBleed?: boolean;
|
|
}) {
|
|
return (
|
|
<FamilyOverlayProvider>
|
|
<EmojiSpriteProvider />
|
|
<div className="min-h-screen bg-white">
|
|
<Sidebar active={active} />
|
|
{!fullBleed ? (
|
|
<div
|
|
className="fixed left-0 right-0 top-0 z-40 flex h-[var(--mobile-header-height)] items-center justify-between border-b border-[#eceef4] bg-white/95 px-4 backdrop-blur lg:hidden"
|
|
style={{ ['--mobile-header-height' as string]: MOBILE_HEADER_HEIGHT, paddingTop: 'env(safe-area-inset-top)' }}
|
|
>
|
|
<Link href="/" className="shrink-0">
|
|
<BrandLogo size="sm" variant="dark" />
|
|
</Link>
|
|
<div className="flex items-center gap-2">
|
|
<NotificationBell />
|
|
<UserMenu />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="fixed right-4 top-4 z-40 hidden items-center gap-2 lg:right-8 lg:top-6 lg:flex">
|
|
<NotificationBell />
|
|
<UserMenu />
|
|
</div>
|
|
<main
|
|
className={cn(
|
|
'min-w-0 pb-[calc(4.5rem+env(safe-area-inset-bottom))] lg:pb-8 lg:pl-[220px] lg:pr-8 lg:mt-5',
|
|
fullBleed ? 'px-0 pt-0 lg:pt-8' : 'px-0 pt-[var(--mobile-header-height)] lg:pt-8'
|
|
)}
|
|
style={fullBleed ? undefined : ({ ['--mobile-header-height' as string]: MOBILE_HEADER_HEIGHT } as React.CSSProperties)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'mx-auto w-full min-w-0',
|
|
fullBleed ? 'max-w-none' : wide ? 'max-w-[920px] px-4 sm:px-5 lg:px-0' : 'max-w-[560px] px-4 sm:px-5 lg:px-0'
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</main>
|
|
<MobileNav active={active} />
|
|
<MiniFamilyChat />
|
|
</div>
|
|
</FamilyOverlayProvider>
|
|
);
|
|
}
|