Albert
032f6bc4be
- Update navigation labels: 'Navigation' → 'Ponderants', 'Edit Node' → 'Manual', 'Conversation' → 'Convo', 'Galaxy View' → 'Galaxy' - Improve logo visibility with CSS transform scale(3.5) and higher contrast colors (#E0E0E0, #909296) - Make logo square (viewBox 60x60) for better favicon display - Enhance mobile UX with vertical navigation buttons and text labels - Add 'Profile' label to user menu in navigation - Improve sidebar highlighting with blue color, bold font, and rounded corners - Fix layout issues: adjust chat padding for sidebar (260px) and bottom bar (90px) - Make borders more subtle (#373A40 instead of #dee2e6) - Increase sidebar width to 260px to accommodate logo and text - Remove desktop top bar for cleaner layout - Use IconChartBubbleFilled for galaxy navigation 🤖 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 : 260,
|
|
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 ? '72px' : '0', // Space for mobile header
|
|
paddingBottom: isMobile ? '90px' : '0', // Space for mobile bottom bar
|
|
}}
|
|
>
|
|
{children}
|
|
</AppShell.Main>
|
|
|
|
{/* Mobile Bottom Bar - only on mobile */}
|
|
{isMobile && <MobileBottomBar />}
|
|
</AppShell>
|
|
</AppStateMachineProvider>
|
|
);
|
|
}
|