Albert
f0284ef813
- Increase logo size (48x48 desktop, 56x56 mobile) for better visibility - Add logo as favicon - Add logo to mobile header - Move user menu to navigation bars (sidebar on desktop, bottom bar on mobile) - Fix desktop chat layout - container structure prevents voice controls cutoff - Fix mobile bottom bar - use icon-only ActionIcons instead of truncated text buttons - Hide Create Node/New Conversation buttons on mobile to save header space - Make fixed header and voice controls work properly with containers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* AppLayout Component
|
|
*
|
|
* Wraps the application with:
|
|
* - AppStateMachineProvider (state management)
|
|
* - Mantine AppShell (responsive layout)
|
|
* - Navigation (mobile bottom bar / desktop sidebar)
|
|
*/
|
|
|
|
import { AppShell } from '@mantine/core';
|
|
import { useMediaQuery } from '@mantine/hooks';
|
|
import { AppStateMachineProvider } from './AppStateMachine';
|
|
import { MobileBottomBar } from './Navigation/MobileBottomBar';
|
|
import { MobileHeader } from './Navigation/MobileHeader';
|
|
import { DesktopSidebar } from './Navigation/DesktopSidebar';
|
|
|
|
export function AppLayout({ children }: { children: React.ReactNode }) {
|
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
|
|
|
return (
|
|
<AppStateMachineProvider>
|
|
{/* Mobile Header - only on mobile */}
|
|
{isMobile && <MobileHeader />}
|
|
|
|
<AppShell
|
|
navbar={{
|
|
width: isMobile ? 0 : 200,
|
|
breakpoint: 'sm',
|
|
}}
|
|
padding={isMobile ? 0 : 'md'}
|
|
style={{ height: '100vh' }}
|
|
>
|
|
{/* Desktop Sidebar - only on desktop */}
|
|
{!isMobile && (
|
|
<AppShell.Navbar>
|
|
<DesktopSidebar />
|
|
</AppShell.Navbar>
|
|
)}
|
|
|
|
{/* Main Content */}
|
|
<AppShell.Main
|
|
style={{
|
|
height: '100vh',
|
|
overflow: 'auto',
|
|
paddingTop: isMobile ? '64px' : '0', // Space for mobile header
|
|
paddingBottom: isMobile ? '80px' : '0', // Space for mobile bottom bar
|
|
}}
|
|
>
|
|
{children}
|
|
</AppShell.Main>
|
|
|
|
{/* Mobile Bottom Bar - only on mobile */}
|
|
{isMobile && <MobileBottomBar />}
|
|
</AppShell>
|
|
</AppStateMachineProvider>
|
|
);
|
|
}
|