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 ? (
<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>

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

@ -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">