rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Sidebar overlapping content

Browse Source 
Adjust the sidebar's positioning to prevent it from overlapping content on the screen.
This commit is contained in:
gpt-engineer-app[bot] 2025-05-20 20:02:46 +00:00
parent ff772429f7
commit ecaa65fdf5
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/layout/Layout.tsx
View File

@ -38,7 +38,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
{isMobile ? ( {isMobile ? (
<Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}> <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
<SheetTrigger asChild> <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" /> <Menu className="h-5 w-5" />
<span className="sr-only">Menu</span> <span className="sr-only">Menu</span>
</Button> </Button>
@ -48,11 +48,13 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
</SheetContent> </SheetContent>
</Sheet> </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"> <div className="flex flex-col flex-1 overflow-hidden">
<Header /> <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} {children}
</main> </main>
</div> </div>

5
src/components/layout/Sidebar.tsx
View File

@ -34,9 +34,8 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
return ( return (
<aside className={cn( <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", "flex h-full w-64 flex-col border-r bg-background shadow-sm",
isOpen ? 'translate-x-0' : '-translate-x-full', isMobile ? 'fixed left-0 top-0 z-50 w-full transition-all duration-300' : 'relative'
isMobile ? 'w-full' : 'w-64'
)}> )}>
<div className="flex items-center justify-between px-4 py-2"> <div className="flex items-center justify-between px-4 py-2">
<Link to="/" className="flex items-center space-x-2 font-semibold"> <Link to="/" className="flex items-center space-x-2 font-semibold">