feat: enhance layout and sidebar functionality with new PageHeader and SidebarContext

src/components/AppSidebar.tsx

@@ -9,6 +9,7 @@ import {
   SidebarNavItem 
 } from '@/components/ui/sidebar'
 import { useAuth } from '@/contexts/AuthContext'
+import { useSidebar } from '@/contexts/SidebarContext'
 import { 
   Home, 
   Settings, 
@@ -45,6 +46,7 @@ const adminNavigationItems = [
 
 export function AppSidebar() {
   const { user, logout } = useAuth()
+  const { isOpen } = useSidebar()
   const location = useLocation()
 
   const handleLogout = async () => {
@@ -63,16 +65,18 @@ export function AppSidebar() {
   ]
 
   return (
-    <Sidebar className="w-64 border-r">
+    <Sidebar className={`border-r transition-all duration-300 ${isOpen ? 'w-64' : 'w-16'}`}>
       <SidebarHeader>
         <div className="flex items-center space-x-2">
           <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
             <span className="text-primary-foreground font-bold text-sm">SB</span>
           </div>
-          <div>
-            <h2 className="text-lg font-semibold">Soundboard</h2>
-            <p className="text-xs text-muted-foreground">v2.0</p>
-          </div>
+          {isOpen && (
+            <div>
+              <h2 className="text-lg font-semibold">Soundboard</h2>
+              <p className="text-xs text-muted-foreground">v2.0</p>
+            </div>
+          )}
         </div>
       </SidebarHeader>
 
@@ -84,9 +88,12 @@ export function AppSidebar() {
             
             return (
               <Link key={item.href} to={item.href}>
-                <SidebarNavItem active={isActive}>
+                <SidebarNavItem 
+                  active={isActive}
+                  title={!isOpen ? item.title : undefined}
+                >
                   <Icon className="h-4 w-4" />
-                  {item.title}
+                  {isOpen && item.title}
                 </SidebarNavItem>
               </Link>
             )
@@ -103,19 +110,21 @@ export function AppSidebar() {
               className="w-8 h-8 rounded-full"
             />
           )}
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium truncate">{user.name}</p>
-            <p className="text-xs text-muted-foreground truncate">{user.email}</p>
-          </div>
+          {isOpen && (
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">{user.name}</p>
+              <p className="text-xs text-muted-foreground truncate">{user.email}</p>
+            </div>
+          )}
         </div>
         
         <Button 
           variant="ghost" 
           onClick={handleLogout}
-          className="w-full justify-start"
+          className={`w-full ${isOpen ? 'justify-start' : 'justify-center'}`}
         >
-          <LogOut className="h-4 w-4 mr-2" />
-          Sign out
+          <LogOut className="h-4 w-4" />
+          {isOpen && <span className="ml-2">Sign out</span>}
         </Button>
       </SidebarFooter>
     </Sidebar>