From ecaa65fdf5f0ca2ce1c8d46c6c5f696e74baacdf Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 20 May 2025 20:02:46 +0000
Subject: [PATCH] Fix: Sidebar overlapping content

Adjust the sidebar's positioning to prevent it from overlapping content on the screen.
---
 src/components/layout/Layout.tsx  | 8 +++++---
 src/components/layout/Sidebar.tsx | 5 ++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 2e554e1..b77ece5 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -38,7 +38,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       {isMobile ? (
         <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
           <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="md:hidden fixed top-2 left-2 z-20">
+            <Button variant="ghost" size="icon" className="md:hidden fixed top-4 left-4 z-20">
               <Menu className="h-5 w-5" />
               <span className="sr-only">Menu</span>
             </Button>
@@ -48,11 +48,13 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           </SheetContent>
         </Sheet>
       ) : (
-        <Sidebar isOpen={true} onClose={() => {}} />
+        <div className="hidden md:block w-64 flex-shrink-0">
+          <Sidebar isOpen={true} onClose={() => {}} />
+        </div>
       )}
       <div className="flex flex-col flex-1 overflow-hidden">
         <Header />
-        <main className="flex-1 overflow-auto p-4 md:p-6">
+        <main className="flex-1 overflow-auto p-4 pt-16 md:pt-4 md:p-6">
           {children}
         </main>
       </div>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index e12e781..aaa4098 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -34,9 +34,8 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
 
   return (
     <aside className={cn(
-      "fixed left-0 top-0 z-50 flex h-full w-64 flex-col border-r bg-background shadow-sm transition-all duration-300 ease-in-out",
-      isOpen ? 'translate-x-0' : '-translate-x-full',
-      isMobile ? 'w-full' : 'w-64'
+      "flex h-full w-64 flex-col border-r bg-background shadow-sm",
+      isMobile ? 'fixed left-0 top-0 z-50 w-full transition-all duration-300' : 'relative'
     )}>
       <div className="flex items-center justify-between px-4 py-2">
         <Link to="/" className="flex items-center space-x-2 font-semibold">