diff --git a/components/layout/footer-menu.tsx b/components/layout/footer-menu.tsx
index 4f6387edd..c43f8f180 100644
--- a/components/layout/footer-menu.tsx
+++ b/components/layout/footer-menu.tsx
@@ -4,15 +4,10 @@ import clsx from 'clsx';
import { Menu } from 'lib/shopify/types';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
const FooterMenuItem = ({ item }: { item: Menu }) => {
const pathname = usePathname();
- const [active, setActive] = useState(pathname === item.path);
-
- useEffect(() => {
- setActive(pathname === item.path);
- }, [pathname, item.path]);
+ const active = pathname === item.path;
return (
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index 6d798370e..5f1fcc181 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -16,6 +16,17 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
const openMobileMenu = () => setIsOpen(true);
const closeMobileMenu = () => setIsOpen(false);
+ const [prevPathname, setPrevPathname] = useState(pathname);
+ const [prevSearchParams, setPrevSearchParams] = useState(searchParams);
+ if (prevPathname !== pathname) {
+ setPrevPathname(pathname);
+ setIsOpen(false);
+ }
+ if (!Object.is(prevSearchParams, searchParams)) {
+ setIsOpen(false);
+ setPrevSearchParams(searchParams);
+ }
+
useEffect(() => {
const handleResize = () => {
if (window.innerWidth > 768) {
@@ -26,10 +37,6 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
return () => window.removeEventListener('resize', handleResize);
}, [isOpen]);
- useEffect(() => {
- setIsOpen(false);
- }, [pathname, searchParams]);
-
return (
<>