From 92dde3a824a295483bf4bee2c9ab0568d60e9315 Mon Sep 17 00:00:00 2001
From: Raunak <raunakkumar6437@gmail.com>
Date: Wed, 22 Oct 2025 23:54:09 +0530
Subject: [PATCH] feat: Added hamburger icon for smaller screen

---
 frontend/src/components/CurrencySelector.jsx |  2 +-
 frontend/src/components/Layout.jsx           | 89 +++++++++++++++++---
 2 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/CurrencySelector.jsx b/frontend/src/components/CurrencySelector.jsx
index b190ba2..f7cc64b 100644
--- a/frontend/src/components/CurrencySelector.jsx
+++ b/frontend/src/components/CurrencySelector.jsx
@@ -23,7 +23,7 @@ const CurrencySelector = () => {
     <div className="relative">
       <button 
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-3 py-2 bg-gray-100 rounded-md hover:bg-gray-200"
+        className="flex items-center gap-2 md:px-3 md:py-2 px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200"
       >
         <span>{currency.flag}</span>
         <span className="font-medium text-sm">{currency.code}</span>
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index f99bf29..7bb2000 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import { Outlet, NavLink, useNavigate } from 'react-router-dom'; // 1. Import Link
+import React, { useState } from 'react';
+import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import useAuth from '../hooks/useAuth';
 import CurrencySelector from './CurrencySelector';
 import ThemeToggle from './ThemeToggle';
+import { Menu, X } from 'lucide-react';
 
 const Layout = () => {
   const { logout } = useAuth();
   const navigate = useNavigate();
-
+  const [menuOpen, setMenuOpen] = useState(false);
 
   const getNavLinkClass = ({ isActive }) => {
     const baseClasses = 'px-3 py-2 rounded-md text-sm font-medium';
@@ -17,14 +18,13 @@ const Layout = () => {
     return `${baseClasses} text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white`;
   };
 
-  const handleClick = (e) => {
-   navigate("/");
+  const handleClick = () => {
+    navigate("/");
   };
 
-
   return (
     <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
-      <nav className="bg-white dark:bg-gray-800 shadow-md">
+      <nav className="bg-white dark:bg-gray-800 shadow-md relative z-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">
@@ -36,7 +36,6 @@ const Layout = () => {
     >
       Paisable
     </span>
-
               <div className="hidden md:block">
                 <div className="ml-10 flex items-baseline space-x-4">
                   <NavLink to="/dashboard" className={getNavLinkClass}>
@@ -64,17 +63,79 @@ const Layout = () => {
               </div>
             </div>
             <div className="flex items-center gap-4">
-              <ThemeToggle />
               <CurrencySelector />
+              <div className="hidden md:flex items-center gap-4">
+                <ThemeToggle />
+                <button
+                  onClick={logout}
+                  className="bg-red-500 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-red-600"
+                >
+                  Logout
+                </button>
+              </div>
+
+              <div className="md:hidden flex items-center">
+                <button
+                  onClick={() => setMenuOpen(!menuOpen)}
+                  className="text-gray-700 dark:text-gray-200 focus:outline-none"
+                >
+                  {menuOpen ? <X size={24} /> : <Menu size={24} />}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {menuOpen && (
+          <>
+            <div
+              onClick={() => setMenuOpen(false)}
+              className="fixed inset-0 bg-black bg-opacity-50 z-40"
+            ></div>
+
+            <div className="fixed top-0 right-0  w-1/2 h-full bg-white dark:bg-gray-800 z-50 shadow-2xl rounded-l-2xl p-6 flex flex-col gap-6 transition-transform duration-300">
+              
+
               <button
-                onClick={logout}
-                className="bg-red-500 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-red-600"
+                onClick={() => setMenuOpen(false)}
+                className="absolute top-4 right-4 text-gray-700 dark:text-gray-200 focus:outline-none"
               >
-                Logout
+                <X size={22} />
               </button>
+
+              <div className="flex flex-col gap-4 mt-10">
+                <NavLink to="/dashboard" onClick={() => setMenuOpen(false)} className={getNavLinkClass}>
+                  Dashboard
+                </NavLink>
+                <NavLink to="/transactions" onClick={() => setMenuOpen(false)} className={getNavLinkClass}>
+                  Transactions
+                </NavLink>
+                <NavLink to="/receipts" onClick={() => setMenuOpen(false)} className={getNavLinkClass}>
+                  Receipts
+                </NavLink>
+                <NavLink to="/settings" onClick={() => setMenuOpen(false)} className={getNavLinkClass}>
+                  Settings
+                </NavLink>
+                <NavLink to="/budgets" onClick={() => setMenuOpen(false)} className={getNavLinkClass}>
+                  Budgets
+                </NavLink>
+                <NavLink to="/recurring-transactions" onClick={() => setMenuOpen(false)} className={getNavLinkClass}>
+                  Recurring Transactions
+                </NavLink>
+              </div>
+
+              <div className="mt-auto flex flex-col items-center gap-4">
+                <ThemeToggle />
+                <button
+                  onClick={logout}
+                  className="w-24 bg-red-500 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-red-600"
+                >
+                  Logout
+                </button>
+              </div>
             </div>
-          </div>
-        </div>
+          </>
+        )}
       </nav>
 
       <main>