From 0f0da5fb8f9c463741baadafb92b15b9ffbf52bb Mon Sep 17 00:00:00 2001
From: Carlos Gutierrez <ingecarlos.gutierrez@gmail.com>
Date: Tue, 2 Sep 2025 19:52:01 -0400
Subject: [PATCH] feat: fixing sidebar on mobile

---
 client/src/components/organisms/Sidebar.tsx   | 19 ++++++++++++++++---
 .../src/components/templates/MainLayout.tsx   |  3 ++-
 client/src/index.css                          | 13 ++++++++++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/client/src/components/organisms/Sidebar.tsx b/client/src/components/organisms/Sidebar.tsx
index d894a17..5f0af55 100644
--- a/client/src/components/organisms/Sidebar.tsx
+++ b/client/src/components/organisms/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Clock, BarChart3, Settings, Sun, Moon } from "lucide-react";
+import { Clock, BarChart3, Settings, Sun, Moon, X } from "lucide-react";
 import { Button } from "@/components/atoms/Button";
 import { useTheme } from "@/lib/theme";
 import { useStore } from "@/lib/store";
@@ -10,12 +10,14 @@ interface SidebarProps {
   className?: string;
   isMobile?: boolean;
   onNavigate?: () => void;
+  onClose?: () => void;
 }
 
 export function Sidebar({
   className = "",
   isMobile = false,
   onNavigate,
+  onClose,
 }: SidebarProps) {
   const { theme, toggleTheme } = useTheme();
   const [location] = useLocation();
@@ -44,19 +46,30 @@ export function Sidebar({
 
   return (
     <aside
-      className={`w-64 bg-card border-r border-border flex-shrink-0 sidebar-transition ${
+      className={`w-64 bg-card border-r border-border flex-shrink-0 sidebar-transition h-screen ${
         isMobile ? "sidebar-mobile" : ""
       } ${className}`}
     >
       <div className="flex flex-col h-full">
         {/* Logo/Brand */}
-        <div className="p-6 border-b border-border">
+        <div className="p-6 border-b border-border flex items-center justify-between">
           <div className="flex items-center space-x-3">
             <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
               <Clock className="text-primary-foreground text-sm" />
             </div>
             <h1 className="text-xl font-semibold">Pomodorian</h1>
           </div>
+          {isMobile && onClose && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              className="md:hidden"
+              data-testid="button-sidebar-close"
+            >
+              <X className="w-5 h-5" />
+            </Button>
+          )}
         </div>
 
         {/* Navigation Menu */}
diff --git a/client/src/components/templates/MainLayout.tsx b/client/src/components/templates/MainLayout.tsx
index 42ad7a4..5152d1e 100644
--- a/client/src/components/templates/MainLayout.tsx
+++ b/client/src/components/templates/MainLayout.tsx
@@ -63,9 +63,10 @@ export function MainLayout({ children, title, subtitle }: MainLayoutProps) {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar Navigation */}
       <Sidebar 
-        className={`md:translate-x-0 ${sidebarOpen ? 'open' : ''}`}
+        className={`${sidebarOpen ? 'open' : ''}`}
         isMobile={true}
         onNavigate={closeSidebar}
+        onClose={closeSidebar}
       />
 
       {/* Mobile Sidebar Overlay */}
diff --git a/client/src/index.css b/client/src/index.css
index 6cab9bf..d748482 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -113,15 +113,26 @@
   transition: transform 0.3s ease-in-out;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .sidebar-mobile {
     transform: translateX(-100%);
+    position: fixed;
+    z-index: 50;
+    height: 100vh;
+    top: 0;
+    left: 0;
   }
   .sidebar-mobile.open {
     transform: translateX(0);
   }
 }
 
+@media (min-width: 768px) {
+  .sidebar-mobile {
+    transform: translateX(0);
+  }
+}
+
 div,
 p {
   text-wrap: auto !important;