0

我一直在尝试使用 Next JS 和 Chakra UI 构建一个网站，我想让它具有响应性。所以我使用了 react-responsive 包来做到这一点。我最初的目标是制作一个响应式导航栏。工作如下：

在桌面模式下，这是我期望的输出：

光模式桌面 深色模式桌面

从亮模式到暗模式的切换完美。对于移动模式，我想要一个汉堡包而不是导航栏，点击它有一个 Drawer Chakra UI 元素来显示所有导航栏内容。

移动汉堡包

虽然所有这些都已按预期实现，但似乎发生了一个小错误。每次在桌面模式下刷新页面时，我都会得到汉堡包图标而不是月亮图标。

这是我一直面临的问题的快速演示

在此处输入图像描述

我已经附上了这部分的相应代码

导入包和分配变量，我们关心的isBigScreen

import { SunIcon, MoonIcon, HamburgerIcon } from '@chakra-ui/icons';
import { useMediaQuery } from 'react-responsive';


const { colorMode, toggleColorMode } = useColorMode();
const bg = useColorModeValue(navBgColor.light, navBgColor.dark);
const isBigScreen = useMediaQuery({ minWidth: 600 });
const { isOpen, onOpen, onClose } = useDisclosure();

然后我返回一个 NavContainer，它本质上是一个带有一些配置的 Flex。

return (
        <NavContainer
            flexDirection="row"
            justifyContent="space-between"
            alignItems="center"
            maxWidth="900px"
            width="100%"
            bg={bg}
            as="nav"
            p={8}
            mt={[0, 8]}
            mb={8}
            mx="auto"
        >
             .
             .
             .
        // Code inside this is mentioned below
             . 
             . 

        </NavContainer>
    );

这部分代码在左侧设置颜色切换器。这取自 react-responsive 自述文件中的示例代码


            {isBigScreen && (
                <IconButton
                    aria-label="toggle dark mode"
                    icon={colorMode == 'dark' ? <SunIcon /> : <MoonIcon />}
                    onClick={toggleColorMode}
                />
            )}

这是我认为导致问题的代码部分

这部分代码确保如果屏幕是桌面，则在同一行显示带有链接（主页、关于、项目、博客）的导航栏，如图 1 和 2 所示，如果这不是桌面模式，则显示一个汉堡图标。

            {isBigScreen ? (
                    <Box>{LINKS.map(getLink)}</Box> 
                ) : (
                    <IconButton
                        aria-label="toggle ham"
                        icon={<HamburgerIcon />}
                        onClick={onOpen}
                    />                    
                )}

这部分代码处理了抽屉从左侧滑动的移动模式时的情况。这也很完美。

            <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
                <DrawerOverlay>
                    <DrawerContent>
                        <DrawerCloseButton />
                        <DrawerBody>
                            <Flex
                                direction="column"
                                justifyContent="center"
                                height="100%"
                                alignItems="center"
                            >
                                <IconButton
                                    boxSize="50px"
                                    mb="6"
                                    aria-label="toggle dark mode"
                                    icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
                                    onClick={toggleColorMode}
                                />
                                {LINKS.map(getLink)}
                            </Flex>
                        </DrawerBody>
                    </DrawerContent>
                </DrawerOverlay>
            </Drawer>

如果需要进一步澄清，我很乐意提供帮助。提前致谢。

4

0 回答 0