Spaces:
Sleeping
Sleeping
File size: 2,828 Bytes
d97b8f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { cn } from "@/lib/utils";
import Header from "./header";
import Sidebar from "./sidebar";
import Footer from "./watermark-footer";
import { useIsMobile } from "@/hooks/use-mobile";
import useKeyboardShortcuts from "@/hooks/useKeyboardShortcuts";
import { useAuth } from "@/lib/auth-context";
import GlobalWorkNotifications from "@/components/GlobalWorkNotifications";
interface LayoutProps {
children: React.ReactNode;
}
const Layout = ({ children }: LayoutProps) => {
const isMobile = useIsMobile();
const [isSidebarOpen, setIsSidebarOpen] = useState(!isMobile);
const location = useLocation();
const { isAuthenticated } = useAuth();
// Check if we're on the download app page
const isDownloadPage = location.pathname === "/download-app";
const isLoginPage = location.pathname === "/login";
// Initialize keyboard shortcuts
useKeyboardShortcuts();
// Close sidebar on mobile when route changes
useEffect(() => {
if (isMobile) {
setIsSidebarOpen(false);
}
}, [location, isMobile]);
// Update sidebar state when screen size changes
useEffect(() => {
setIsSidebarOpen(!isMobile);
}, [isMobile]);
// Update sidebar state when authentication changes
useEffect(() => {
if (isAuthenticated && !isMobile) {
setIsSidebarOpen(true);
}
}, [isAuthenticated, isMobile]);
return (
<div className="relative flex h-full bg-background">
{/* Only show sidebar when authenticated */}
{isAuthenticated && (
<Sidebar isOpen={isSidebarOpen} setIsOpen={setIsSidebarOpen} />
)}
<div
className={cn(
"flex-1 flex flex-col transition-all duration-300 ease-in-out",
isSidebarOpen && !isMobile && isAuthenticated ? "ml-64" : "ml-0"
)}
>
<Header
toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
isSidebarOpen={isSidebarOpen}
/>
<main className="flex-1 pt-16 overflow-x-hidden">
<div className={cn(
"px-4 py-6 md:p-6 mx-auto animate-fadeIn",
isDownloadPage ? "max-w-5xl" : "max-w-7xl"
)}>
{children}
</div>
</main>
<Footer />
</div>
{/* Overlay for mobile sidebar */}
{isSidebarOpen && isMobile && (
<div
className="fixed inset-0 bg-black/50 z-30"
onClick={() => setIsSidebarOpen(false)}
/>
)}
{/* Global Work Notifications - Show on all pages when authenticated */}
{isAuthenticated && <GlobalWorkNotifications />}
</div>
);
};
export default Layout;
|