From d75fee0b1dc75dee2ef2e38d51688c77d2b0e3ba Mon Sep 17 00:00:00 2001 From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com> Date: Thu, 16 Jan 2025 07:24:22 +0100 Subject: [PATCH] Fix mobile header flickering issue Fixes #1391 Update the `Navbar` component to use responsive Tailwind classes for mobile and desktop layouts. * Remove the `useIsMobile` hook import from `src/components/Header/Navbar.component.tsx`. * Replace the conditional rendering in `Navbar` with responsive Tailwind classes. * Delete the `src/utils/hooks/useIsMobile.ts` file. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/w3bdesign/nextjs-woocommerce/issues/1391?shareId=XXXX-XXXX-XXXX-XXXX). --- src/components/Header/Navbar.component.tsx | 81 ++++++++++------------ src/utils/hooks/useIsMobile.ts | 27 -------- 2 files changed, 35 insertions(+), 73 deletions(-) delete mode 100644 src/utils/hooks/useIsMobile.ts diff --git a/src/components/Header/Navbar.component.tsx b/src/components/Header/Navbar.component.tsx index b933a2f7d..4d498ce81 100644 --- a/src/components/Header/Navbar.component.tsx +++ b/src/components/Header/Navbar.component.tsx @@ -1,70 +1,59 @@ -// Imports import Link from 'next/link'; -// Components import Cart from './Cart.component'; import AlgoliaSearchBox from '../AlgoliaSearch/AlgoliaSearchBox.component'; import MobileSearch from '../AlgoliaSearch/MobileSearch.component'; -// Utils -import useIsMobile from '@/utils/hooks/useIsMobile'; - /** * Navigation for the application. * Includes mobile menu. */ const Navbar = () => { - const isMobile = useIsMobile(); return (
diff --git a/src/utils/hooks/useIsMobile.ts b/src/utils/hooks/useIsMobile.ts deleted file mode 100644 index 4bfdc8cd4..000000000 --- a/src/utils/hooks/useIsMobile.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useEffect, useState } from 'react'; -import debounce from 'lodash/debounce'; - -const useIsMobile = (): boolean => { - // Initialize with null to avoid hydration mismatch - const [isMobile, setIsMobile] = useState(null); - - useEffect(() => { - // Skip effect on server side - if (typeof window === 'undefined') return; - - const updateSize = debounce((): void => { - setIsMobile(window.innerWidth < 768); - }, 250); - - // Initial check - updateSize(); - - window.addEventListener('resize', updateSize); - return (): void => window.removeEventListener('resize', updateSize); - }, []); - - // Return false during SSR, actual value after hydration - return isMobile ?? false; -}; - -export default useIsMobile;