From 1cf89bacba59c1edbc5a65d3f6e3ea2b575b89c4 Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Thu, 29 May 2025 01:50:36 +0530 Subject: fix: Improved UI and NavBar Menu - Fixed alignment issues in the frontend - Fixed the box border hover selection in the menu bar (mobile) - Changed the theme toggle button color to standard frontend theme - Enhanced UI components --- frontend/src/app/globals.css | 63 +++++ frontend/src/components/header.tsx | 421 +++++++++++++++++++------------ frontend/src/components/theme-toggle.tsx | 35 ++- 3 files changed, 340 insertions(+), 179 deletions(-) diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 5210ba7..0b2a4b4 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -708,6 +708,55 @@ a.nav-button-transparent:not(:hover):not(:focus):not(:active) { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } + + /* Hide scrollbar in mobile menu while maintaining scroll functionality */ + [data-radix-dialog-content] { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* Internet Explorer and Edge */ + } + + [data-radix-dialog-content]::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ + width: 0; + height: 0; + } + + /* Specifically target Sheet content scrolling areas */ + [data-radix-dialog-content] .overflow-y-auto, + [data-radix-dialog-content] .overflow-auto { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* Internet Explorer and Edge */ + } + + [data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar, + [data-radix-dialog-content] .overflow-auto::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera */ + width: 0; + height: 0; + } + + /* Mobile navigation specific scrollbar hiding */ + .mobile-nav-scroll { + scrollbar-width: none !important; /* Firefox */ + -ms-overflow-style: none !important; /* Internet Explorer and Edge */ + } + + .mobile-nav-scroll::-webkit-scrollbar { + display: none !important; /* Chrome, Safari, Opera */ + width: 0 !important; + height: 0 !important; + background: transparent !important; + } + + /* Additional scrollbar hiding for all mobile menu elements */ + [data-radix-dialog-content] *, + [data-radix-dialog-content] *::-webkit-scrollbar { + scrollbar-width: none !important; + -ms-overflow-style: none !important; + display: none !important; + width: 0 !important; + height: 0 !important; + } } /* Small mobile optimizations */ @@ -756,3 +805,17 @@ a.nav-button-transparent:not(:hover):not(:focus):not(:active) { outline: 2px solid var(--ring) !important; outline-offset: 2px !important; } + +/* Mobile menu icon stroke uniformity */ +.mobile-nav-scroll svg, +[data-radix-dialog-content] svg { + stroke-linecap: round !important; + stroke-linejoin: round !important; +} + +/* Force consistent stroke width for mobile quick action icons */ +@media (max-width: 768px) { + [data-radix-dialog-content] button svg { + stroke-width: inherit !important; + } +} diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx index a8ddadc..b792767 100644 --- a/frontend/src/components/header.tsx +++ b/frontend/src/components/header.tsx @@ -3,6 +3,7 @@ import { useState, useEffect, useRef } from "react"; import Link from "next/link"; import Image from "next/image"; +import { useTheme } from "next-themes"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; @@ -34,13 +35,17 @@ import { RefreshCw, Shield, Globe, + Sun, + Moon, } from "lucide-react"; export function Header() { const [cartItems] = useState(3); const [wishlistItems] = useState(5); const [isMounted, setIsMounted] = useState(false); + const [sheetError, setSheetError] = useState(false); const sheetRef = useRef(null); + const { setTheme, theme } = useTheme(); const categories = [ { @@ -81,14 +86,31 @@ export function Header() { // Add global error handler for scroll-related errors const handleError = (event: ErrorEvent) => { if (event.error?.message?.includes('parameter 1 is not of type \'Node\'') || - event.error?.message?.includes('handleScroll')) { + event.error?.message?.includes('handleScroll') || + event.error?.message?.includes('RemoveScrollSideCar') || + event.error?.message?.includes('shouldCancelEvent') || + event.error?.message?.includes('shouldPrevent')) { console.warn('Scroll handling error caught and suppressed:', event.error); event.preventDefault(); + setSheetError(true); + return false; + } + }; + + // Also add an unhandled rejection handler for async scroll errors + const handleUnhandledRejection = (event: PromiseRejectionEvent) => { + if (event.reason?.message?.includes('handleScroll') || + event.reason?.message?.includes('RemoveScrollSideCar') || + event.reason?.message?.includes('parameter 1 is not of type \'Node\'')) { + console.warn('Scroll promise rejection caught and suppressed:', event.reason); + event.preventDefault(); + setSheetError(true); return false; } }; window.addEventListener('error', handleError); + window.addEventListener('unhandledrejection', handleUnhandledRejection); const preloadLogos = () => { if (typeof window !== 'undefined') { @@ -103,9 +125,31 @@ export function Header() { return () => { window.removeEventListener('error', handleError); + window.removeEventListener('unhandledrejection', handleUnhandledRejection); }; }, []); + // Add scroll error prevention + useEffect(() => { + const sheetElement = sheetRef.current; + if (sheetElement) { + const handleScroll = (event: Event) => { + try { + // Allow default scroll behavior but catch any errors + } catch (error) { + console.warn('Sheet scroll error caught:', error); + event.preventDefault(); + } + }; + + sheetElement.addEventListener('scroll', handleScroll, { passive: false }); + + return () => { + sheetElement.removeEventListener('scroll', handleScroll); + }; + } + }, [isMounted]); + // Prevent hydration issues with Sheet component if (!isMounted) { return ( @@ -127,7 +171,7 @@ export function Header() { {/* Main header */}
-
+
{/* Mobile menu placeholder */}
@@ -206,173 +250,231 @@ export function Header() { {/* Main header */}
-
+
{/* Mobile menu */} - - - - - { - // Prevent auto focus to avoid scroll handling issues - event.preventDefault(); - }} - onCloseAutoFocus={(event) => { - // Prevent auto focus to avoid scroll handling issues - event.preventDefault(); - }} - onEscapeKeyDown={(event) => { - // Handle escape key gracefully - try { - // Default behavior - } catch (error) { - console.warn('Escape key handling error:', error); + {!sheetError ? ( + + + + + { + // Prevent auto focus to avoid scroll handling issues event.preventDefault(); - } - }} - onPointerDownOutside={(event) => { - // Handle pointer events gracefully - try { - // Default behavior - } catch (error) { - console.warn('Pointer down outside error:', error); + }} + onCloseAutoFocus={(event) => { + // Prevent auto focus to avoid scroll handling issues event.preventDefault(); - } - }} - > -
- {/* Header Section */} - - - Menu - - + }} + onEscapeKeyDown={(event) => { + // Handle escape key gracefully + try { + // Default behavior + } catch (error) { + console.warn('Escape key handling error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + onPointerDownOutside={(event) => { + // Handle pointer events gracefully + try { + // Default behavior + } catch (error) { + console.warn('Pointer down outside error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + onInteractOutside={(event) => { + // Additional interaction handler + try { + // Default behavior + } catch (error) { + console.warn('Interact outside error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + onFocusOutside={(event) => { + // Additional focus handler + try { + // Default behavior + } catch (error) { + console.warn('Focus outside error:', error); + event.preventDefault(); + setSheetError(true); + } + }} + > +
+ {/* Header Section */} + + + Menu + + - {/* Navigation Section */} -
- +
- {/* Sale Section */} -
-

- Special -

- +
+ {/* Search Button */} + + + {/* Account Button */} +
- -
- - {/* Footer Section */} -
-
- {/* Search Button */} - - - {/* Account Button */} - -
- - {/* Quick Actions */} -
- - - - + {/* Quick Actions */} +
+ + + + + {/* Theme Toggle in Mobile Menu */} + + + +
-
- - + + + ) : ( + + )} {/* Logo */} -
- - {/* Light theme logo - visible by default, hidden in dark mode */} +
+ blcklst - {/* Dark theme logo - hidden by default, visible in dark mode */} blcklst {/* Action buttons */} -
+
{/* Search icon for mobile */} ) @@ -41,14 +41,11 @@ export function ThemeToggle() { @@ -56,39 +53,39 @@ export function ThemeToggle() { setTheme("light")} - className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item" + className="flex items-center gap-3 nav-dropdown-item cursor-pointer" > - + Light {theme === "light" && ( - ✓ + ✓ )} setTheme("dark")} - className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item" + className="flex items-center gap-3 nav-dropdown-item cursor-pointer" > - + Dark {theme === "dark" && ( - ✓ + ✓ )} setTheme("system")} - className="flex items-center gap-3 nav-dropdown-item cursor-pointer group/item" + className="flex items-center gap-3 nav-dropdown-item cursor-pointer" > - + System {theme === "system" && ( - ✓ + ✓ )} -- cgit v1.2.3-59-g8ed1b