68 lines
2.2 KiB
TypeScript
68 lines
2.2 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';
|
|
|
|
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 overflow-x-hidden bg-white">
|
|
<Sidebar active={active} />
|
|
{!fullBleed ? (
|
|
<div className="fixed left-0 right-0 top-0 z-40 flex items-center justify-between border-b border-[#eceef4] bg-white/95 px-4 py-3 backdrop-blur lg:hidden">
|
|
<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(
|
|
'pb-[calc(4.5rem+env(safe-area-inset-bottom))] lg:pb-8 lg:pt-8 lg:pl-[220px] lg:pr-8',
|
|
fullBleed
|
|
? 'px-0 pt-0 lg:px-8'
|
|
: 'px-0 pt-14 lg:px-0'
|
|
)}
|
|
>
|
|
<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>
|
|
);
|
|
}
|