Add for leave family

apps/frontend/components/id/shell.tsx

@@ -1,25 +1,61 @@
 '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 }: { active: string; children: React.ReactNode; wide?: boolean }) {
+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">
+      <div className="min-h-screen overflow-x-hidden bg-white">
         <Sidebar active={active} />
-        <div className="fixed right-4 top-4 z-40 flex items-center gap-2 lg:right-8 lg:top-6">
+        <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>
+        <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="px-5 py-8 lg:pl-[220px] lg:pr-8">
-          <div className={wide ? 'mx-auto max-w-[920px]' : 'mx-auto max-w-[560px]'}>{children}</div>
+        <main
+          className={cn(
+            'pb-[calc(4.5rem+env(safe-area-inset-bottom))] pt-14 lg:pb-8 lg:pt-8 lg:pl-[220px] lg:pr-8',
+            fullBleed && 'px-0 pb-[calc(4.5rem+env(safe-area-inset-bottom))] pt-14 lg:px-8'
+          )}
+        >
+          <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>