如何在gatsby中有条件地渲染移动导航？

import React, { useState, useEffect } from "react";
import ResponsiveNavigation from "react-responsive-navigation";

const MyPage = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768); // 根据窗口宽度设置设备类型
    };

    window.addEventListener("resize", handleResize);
    handleResize(); // 初始化设备类型

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <div>
      {isMobile ? (
        <ResponsiveNavigation>
          {/* 移动导航内容 */}
        </ResponsiveNavigation>
      ) : (
        <nav>
          {/* 其他导航内容 */}
        </nav>
      )}
      {/* 页面内容 */}
    </div>
  );
};

export default MyPage;