一旦モバイル幅は非対応で

Author: hirohiro-sys

src/components/layout/MainLayout.tsx

@@ -19,6 +19,7 @@ import {
   AlertDialogHeader,
   AlertDialogBody,
   AlertDialogFooter,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import { FiMenu } from "react-icons/fi";
 import { IconType } from "react-icons";
@@ -45,6 +46,7 @@ export default function SimpleSidebar() {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
   const [selectedPath, setSelectedPath] = useState("/");
+  const isMobile = useBreakpointValue({ base: true, md: false });
   const bg = useColorModeValue("gray.100", "gray.900");
   const sidebarBg = useColorModeValue("white", "gray.900");
   const borderColor = useColorModeValue("gray.200", "gray.700");
@@ -53,43 +55,60 @@ export default function SimpleSidebar() {
 
   return (
     <Box minH="100vh" bg={bg}>
-      <SidebarContent
-        onClose={onClose}
-        display={{ base: "none", md: "block" }}
-        navigate={navigate}
-        selectedPath={selectedPath}
-        setSelectedPath={setSelectedPath}
-        bg={sidebarBg}
-        borderColor={borderColor}
-      />
-      <Drawer
-        isOpen={isOpen}
-        placement="left"
-        onClose={onClose}
-        returnFocusOnClose={false}
-        onOverlayClick={onClose}
-        size="full"
-      >
-        <DrawerContent>
+      {isMobile ? (
+        <Flex
+          direction="column"
+          align="center"
+          justify="center"
+          h="100vh"
+          w="100vw"
+          bg="gray.200"
+        >
+          <Text fontSize="xl" mb="4">
+            現在モバイル幅での表示はサポートしていません。
+          </Text>
+        </Flex>
+      ) : (
+        <>
           <SidebarContent
             onClose={onClose}
+            display={{ base: "none", md: "block" }}
             navigate={navigate}
             selectedPath={selectedPath}
             setSelectedPath={setSelectedPath}
             bg={sidebarBg}
             borderColor={borderColor}
           />
-        </DrawerContent>
-      </Drawer>
-      <MobileNav
-        display={{ base: "flex", md: "none" }}
-        onOpen={onOpen}
-        bg={mobileNavBg}
-        borderColor={mobileBorderColor}
-      />
-      <Box ml={{ base: 0 }} p="4">
-        {/* ここで各コンポーネントの中身を表示 */}
-      </Box>
+          <Drawer
+            isOpen={isOpen}
+            placement="left"
+            onClose={onClose}
+            returnFocusOnClose={false}
+            onOverlayClick={onClose}
+            size="full"
+          >
+            <DrawerContent>
+              <SidebarContent
+                onClose={onClose}
+                navigate={navigate}
+                selectedPath={selectedPath}
+                setSelectedPath={setSelectedPath}
+                bg={sidebarBg}
+                borderColor={borderColor}
+              />
+            </DrawerContent>
+          </Drawer>
+          <MobileNav
+            display={{ base: "flex", md: "none" }}
+            onOpen={onOpen}
+            bg={mobileNavBg}
+            borderColor={mobileBorderColor}
+          />
+          <Box ml={{ base: 0 }} p="4">
+            {/* ここで各コンポーネントの中身を表示 */}
+          </Box>
+        </>
+      )}
     </Box>
   );
 }