From 9523ec5a80f49b0e12aa35f3cf36f27799e47a45 Mon Sep 17 00:00:00 2001 From: Zaiba Machhaliya Date: Mon, 17 Aug 2026 13:49:26 +0530 Subject: [PATCH 1/4] fix: add responsive navigation menu --- src/components/Navbar.jsx | 203 ++++++++++++++++++++++++++------------ src/styles/global.css | 180 +++++++++++++++++++++++++-------- 2 files changed, 278 insertions(+), 105 deletions(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index ce4084f..6f37659 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,9 +1,9 @@ -import React from 'react' +import React, { useState } from 'react' import { NavLink, useNavigate } from 'react-router-dom' -import { FiHeart, FiSettings, FiZap } from 'react-icons/fi' +import { FiHeart, FiSettings, FiZap, FiMenu, FiX } from 'react-icons/fi' import { useApp } from '../context/AppContext' import ThemeToggle from './ThemeToggle' -import Logo from "../assests/og-logo.svg?react"; +import Logo from "../assests/og-logo.svg?react" import { useTheme } from '../context/ThemeContext' const LINKS = [ @@ -17,75 +17,150 @@ const LINKS = [ export default function Navbar() { const { orgs, rateLimit } = useApp() - const { theme } = useTheme(); + const { theme } = useTheme() const navigate = useNavigate() + const hasData = orgs.length > 0 const lowLimit = rateLimit && rateLimit.remaining < 15 + const [menuOpen, setMenuOpen] = useState(false) return ( - + ) -} +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index d6f6d51..68b0798 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,63 +1,91 @@ @import "tailwindcss"; :root { - --bg: #060606; - --surface: #141414; + --bg: #060606; + --surface: #141414; --surface2: #1a1a1a; - --border: #2a2a2a; - --accent: #f5c518; - --text: #ffffff; - --text2: #888888; - --text3: #444444; - --green: #22c55e; - --red: #ef4444; - --blue: #3b82f6; - --amber: #f59e0b; - --purple: #a855f7; - --radius: 8px; + --border: #2a2a2a; + --accent: #f5c518; + --text: #ffffff; + --text2: #888888; + --text3: #444444; + --green: #22c55e; + --red: #ef4444; + --blue: #3b82f6; + --amber: #f59e0b; + --purple: #a855f7; + --radius: 8px; } /* Light Theme */ [data-theme="light"] { - --bg: #ffffff; - --surface: #f5f5f5; + --bg: #ffffff; + --surface: #f5f5f5; --surface2: #ececec; - --border: #d5d5d5; - --accent: #d4a500; - --text: #060606; - --text2: #666666; - --text3: #999999; - --green: #16a34a; - --red: #dc2626; - --blue: #2563eb; - --amber: #d97706; - --purple: #9333ea; - --radius: 8px; -} - -html, body, #root { + --border: #d5d5d5; + --accent: #d4a500; + --text: #060606; + --text2: #666666; + --text3: #999999; + --green: #16a34a; + --red: #dc2626; + --blue: #2563eb; + --amber: #d97706; + --purple: #9333ea; + --radius: 8px; +} + +html, +body, +#root { min-height: 100%; background: var(--bg); color: var(--text); - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.6; } -button { cursor: pointer; font-family: inherit; } -input, select { font-family: inherit; } -a { color: var(--accent); text-decoration: none; } +button { + cursor: pointer; + font-family: inherit; +} +input, +select { + font-family: inherit; +} +a { + color: var(--accent); + text-decoration: none; +} -::-webkit-scrollbar { width: 5px; height: 5px; } -::-webkit-scrollbar-track { background: var(--bg); } -::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } +::-webkit-scrollbar { + width: 5px; + height: 5px; +} +::-webkit-scrollbar-track { + background: var(--bg); +} +::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 3px; +} @keyframes spin { - to { transform: rotate(360deg); } + to { + transform: rotate(360deg); + } } @keyframes fadeUp { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } .fade-up { animation: fadeUp 0.22s ease; @@ -69,7 +97,8 @@ input[type="date"]::-webkit-calendar-picker-indicator { } /* Dark theme */ -:root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator { +:root:not([data-theme="light"]) + input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } @@ -80,4 +109,73 @@ input[type="date"]::-webkit-calendar-picker-indicator { .navbar-link:hover { color: var(--accent) !important; -} \ No newline at end of file +} +/* Navbar desktop navigation */ +.navbar-desktop-links { + display: flex; + gap: 2px; + flex: 1; + overflow-x: auto; +} + +/* Navbar right-side controls */ +.navbar-right { + display: flex; + align-items: center; + gap: 14px; + flex-shrink: 0; +} + +/* Mobile menu button */ +.navbar-menu-button { + display: none; + background: none; + border: 1px solid var(--border); + color: var(--text); + border-radius: 6px; + padding: 6px; + align-items: center; + justify-content: center; +} + +/* Mobile navigation menu */ +.navbar-mobile-menu { + display: none; +} + +/* Mobile navigation links */ +.navbar-mobile-link { + display: block; + color: var(--text2); + text-decoration: none; +} + +.navbar-mobile-link:hover { + color: var(--accent); + background: var(--surface); +} + +/* Responsive navigation */ +@media (max-width: 690px) { + .navbar-desktop-links { + display: none; + } + + .navbar-menu-button { + display: flex; + } + + .navbar-mobile-menu { + display: flex; + flex-direction: column; + position: fixed; + top: 56px; + left: 0; + right: 0; + z-index: 99; + background: var(--bg); + border-bottom: 1px solid var(--border); + padding: 12px 24px; + gap: 8px; + } +} From 7c54a811daf28258130210dec247bd788e879ffd Mon Sep 17 00:00:00 2001 From: Zaiba Machhaliya Date: Mon, 17 Aug 2026 14:56:55 +0530 Subject: [PATCH 2/4] fix: address responsive navigation review comments --- src/components/Navbar.jsx | 7 +++--- src/styles/global.css | 45 ++++++++++++++++++++++++++++++++++++--- 2 files changed, 46 insertions(+), 6 deletions(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 6f37659..9924efc 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -67,12 +67,13 @@ export default function Navbar() { }} > {/* Wordmark */} - navigate('/')} + - + {/* Desktop Nav links */}
diff --git a/src/styles/global.css b/src/styles/global.css index 68b0798..d61b0e6 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -51,10 +51,12 @@ button { cursor: pointer; font-family: inherit; } + input, select { font-family: inherit; } + a { color: var(--accent); text-decoration: none; @@ -64,9 +66,11 @@ a { width: 5px; height: 5px; } + ::-webkit-scrollbar-track { background: var(--bg); } + ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; @@ -77,18 +81,21 @@ a { transform: rotate(360deg); } } -@keyframes fadeUp { + +@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } } + .fade-up { - animation: fadeUp 0.22s ease; + animation: fade-up 0.22s ease; } input[type="date"]::-webkit-calendar-picker-indicator { @@ -110,6 +117,7 @@ input[type="date"]::-webkit-calendar-picker-indicator { .navbar-link:hover { color: var(--accent) !important; } + /* Navbar desktop navigation */ .navbar-desktop-links { display: flex; @@ -156,13 +164,14 @@ input[type="date"]::-webkit-calendar-picker-indicator { } /* Responsive navigation */ -@media (max-width: 690px) { +@media (max-width: 768px) { .navbar-desktop-links { display: none; } .navbar-menu-button { display: flex; + flex-shrink: 0; } .navbar-mobile-menu { @@ -179,3 +188,33 @@ input[type="date"]::-webkit-calendar-picker-indicator { gap: 8px; } } + + +@media (max-width: 480px) { + .navbar-right { + gap: 4px; + min-width: 0; + flex-shrink: 1; + } + + .navbar-right > * { + flex-shrink: 1; + } + + .navbar-right button:last-child { + padding: 6px; + } + + .navbar-right button:last-child { + font-size: 0; + } + + .navbar-right button:last-child svg { + margin: 0; + } + + .navbar-menu-button { + display: flex; + flex-shrink: 0; + } +} \ No newline at end of file From 6da5f292cb7a2e29810059ad15f3613338dcff7e Mon Sep 17 00:00:00 2001 From: Zaiba Machhaliya Date: Mon, 17 Aug 2026 17:25:12 +0530 Subject: [PATCH 3/4] fix: add responsive navigation menu with hamburger toggle --- src/styles/global.css | 171 +++++++++++++++++++----------------------- 1 file changed, 77 insertions(+), 94 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index d61b0e6..31d9155 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,101 +1,66 @@ @import "tailwindcss"; :root { - --bg: #060606; - --surface: #141414; + --bg: #060606; + --surface: #141414; --surface2: #1a1a1a; - --border: #2a2a2a; - --accent: #f5c518; - --text: #ffffff; - --text2: #888888; - --text3: #444444; - --green: #22c55e; - --red: #ef4444; - --blue: #3b82f6; - --amber: #f59e0b; - --purple: #a855f7; - --radius: 8px; + --border: #2a2a2a; + --accent: #f5c518; + --text: #ffffff; + --text2: #888888; + --text3: #444444; + --green: #22c55e; + --red: #ef4444; + --blue: #3b82f6; + --amber: #f59e0b; + --purple: #a855f7; + --radius: 8px; } /* Light Theme */ [data-theme="light"] { - --bg: #ffffff; - --surface: #f5f5f5; + --bg: #ffffff; + --surface: #f5f5f5; --surface2: #ececec; - --border: #d5d5d5; - --accent: #d4a500; - --text: #060606; - --text2: #666666; - --text3: #999999; - --green: #16a34a; - --red: #dc2626; - --blue: #2563eb; - --amber: #d97706; - --purple: #9333ea; - --radius: 8px; -} - -html, -body, -#root { + --border: #d5d5d5; + --accent: #d4a500; + --text: #060606; + --text2: #666666; + --text3: #999999; + --green: #16a34a; + --red: #dc2626; + --blue: #2563eb; + --amber: #d97706; + --purple: #9333ea; + --radius: 8px; +} + +html, body, #root { min-height: 100%; background: var(--bg); color: var(--text); - font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.6; } -button { - cursor: pointer; - font-family: inherit; -} - -input, -select { - font-family: inherit; -} - -a { - color: var(--accent); - text-decoration: none; -} +button { cursor: pointer; font-family: inherit; } +input, select { font-family: inherit; } +a { color: var(--accent); text-decoration: none; } -::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -::-webkit-scrollbar-track { - background: var(--bg); -} - -::-webkit-scrollbar-thumb { - background: var(--border); - border-radius: 3px; -} +::-webkit-scrollbar { width: 5px; height: 5px; } +::-webkit-scrollbar-track { background: var(--bg); } +::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } @keyframes spin { - to { - transform: rotate(360deg); - } + to { transform: rotate(360deg); } } - -@keyframes fade-up { - from { - opacity: 0; - transform: translateY(10px); - } - - to { - opacity: 1; - transform: translateY(0); - } +@keyframes fadeUp { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } } - .fade-up { - animation: fade-up 0.22s ease; + animation: fadeUp 0.22s ease; } input[type="date"]::-webkit-calendar-picker-indicator { @@ -104,8 +69,7 @@ input[type="date"]::-webkit-calendar-picker-indicator { } /* Dark theme */ -:root:not([data-theme="light"]) - input[type="date"]::-webkit-calendar-picker-indicator { +:root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } @@ -118,7 +82,8 @@ input[type="date"]::-webkit-calendar-picker-indicator { color: var(--accent) !important; } -/* Navbar desktop navigation */ +/* Yeh classes missing hain - add karni hain */ + .navbar-desktop-links { display: flex; gap: 2px; @@ -126,7 +91,6 @@ input[type="date"]::-webkit-calendar-picker-indicator { overflow-x: auto; } -/* Navbar right-side controls */ .navbar-right { display: flex; align-items: center; @@ -134,9 +98,8 @@ input[type="date"]::-webkit-calendar-picker-indicator { flex-shrink: 0; } -/* Mobile menu button */ .navbar-menu-button { - display: none; + display: none; /* Hide by default, show on mobile */ background: none; border: 1px solid var(--border); color: var(--text); @@ -144,14 +107,13 @@ input[type="date"]::-webkit-calendar-picker-indicator { padding: 6px; align-items: center; justify-content: center; + cursor: pointer; } -/* Mobile navigation menu */ .navbar-mobile-menu { - display: none; + display: none; /* Hidden by default, shown via JS */ } -/* Mobile navigation links */ .navbar-mobile-link { display: block; color: var(--text2); @@ -163,8 +125,9 @@ input[type="date"]::-webkit-calendar-picker-indicator { background: var(--surface); } -/* Responsive navigation */ -@media (max-width: 768px) { +/* === RESPONSIVE NAVBAR - Add at the end === */ + +@media (max-width: 690px) { .navbar-desktop-links { display: none; } @@ -188,29 +151,49 @@ input[type="date"]::-webkit-calendar-picker-indicator { gap: 8px; } } - - @media (max-width: 480px) { .navbar-right { - gap: 4px; + gap: 6px; min-width: 0; flex-shrink: 1; } - .navbar-right > * { - flex-shrink: 1; + /* Rate limit text ko chhota karo */ + .navbar-right > div:first-child { + font-size: 10px !important; + gap: 3px !important; } - .navbar-right button:last-child { - padding: 6px; + /* Settings button - icon only */ + .navbar-right button:first-of-type { + padding: 6px 8px; + font-size: 0; + } + + .navbar-right button:first-of-type svg { + margin: 0; + font-size: 14px; } + /* Support Us button - icon only */ .navbar-right button:last-child { + padding: 6px 8px; font-size: 0; + background: transparent !important; + color: var(--text) !important; + box-shadow: none !important; + border: 1px solid var(--border); + border-radius: 6px; + } + + .navbar-right button:last-child:hover { + background: var(--surface) !important; } .navbar-right button:last-child svg { margin: 0; + font-size: 16px; + fill: currentColor; } .navbar-menu-button { From 95dfa75a6c598487f354d35d1dc218dd6f8990fa Mon Sep 17 00:00:00 2001 From: Zaiba Machhaliya Date: Mon, 17 Aug 2026 17:34:22 +0530 Subject: [PATCH 4/4] fix: change currentColor to lowercase currentcolor per CodeRabbit suggestion --- src/styles/global.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/global.css b/src/styles/global.css index 31d9155..ed4d33d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -193,7 +193,7 @@ input[type="date"]::-webkit-calendar-picker-indicator { .navbar-right button:last-child svg { margin: 0; font-size: 16px; - fill: currentColor; + fill: currentcolor; } .navbar-menu-button {