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/components/header.tsx | 421 +++++++++++++++++++------------ frontend/src/components/theme-toggle.tsx | 35 ++- 2 files changed, 277 insertions(+), 179 deletions(-) (limited to 'frontend/src/components') 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