-

web/src/App.tsx

@@ -1,20 +1,27 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { AppShell } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import Header from './components/Header';
 import Navigation from './components/Navigation';
 import HomePage from './pages/HomePage';
 import AppLoader from './components/AppLoader';
 
 function App() {
+  const [collapsed, { toggle: toggleNavbar }] = useDisclosure(false);
+
   return (
     <AppShell
       header={{ height: 60 }}
-      navbar={{ width: 300, breakpoint: 'sm' }}
+      navbar={{ 
+        width: 300, 
+        breakpoint: 'sm',
+        collapsed: { mobile: collapsed, desktop: collapsed }
+      }}
       padding="md"
     >
       <AppShell.Header>
-        <Header />
+        <Header onToggleNavbar={toggleNavbar} />
       </AppShell.Header>
       <AppShell.Navbar>
         <Navigation />