fix: close mobile filter dropdown when menu opens

src/components/MobileBlogFilters/MobileBlogFilters.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useRef, useEffect, useId } from "react";
+import { FC, useState, useRef, useEffect, useId, useCallback } from "react";
 
 import Box from "../Box";
 import Button from "../Button";
@@ -10,6 +10,7 @@ import PostCategoryList, {
   PostCategoryListProps,
   PostCategoryPage,
 } from "../Posts/PostCategoryList/PostCategoryList";
+import { useMenuContext } from "../../context/Menu";
 
 export type MobileBlogFiltersProps = {
   categoryListProps: Omit<PostCategoryListProps, "labelledBy" | "page">;
@@ -19,6 +20,10 @@ export type MobileBlogFiltersProps = {
 const MobileBlogFilters: FC<MobileBlogFiltersProps> = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [categoryListHeight, setCategoryListHeight] = useState<number>(0);
+
+  const { open } = useMenuContext();
+  const menuOpen = open; //rename here to save confusion
+
   const categoryListRef = useRef<HTMLDivElement>(null);
   const checkAndSetHeight = () => {
     if (categoryListRef.current) {
@@ -37,9 +42,16 @@ const MobileBlogFilters: FC<MobileBlogFiltersProps> = (props) => {
   const menuId = useId();
   const triggerId = useId();
 
-  const close = () => {
+  const close = useCallback(() => {
     setIsOpen(false);
-  };
+  }, [setIsOpen]);
+
+  // Close the dropdown if the menu is open
+  useEffect(() => {
+    if (isOpen && menuOpen) {
+      close();
+    }
+  }, [isOpen, menuOpen, close]);
 
   return (
     <Flex