0

Next JS と Chakra UI を使用して Web サイトを構築しようとしており、レスポンシブにしたいと考えていました。そのため、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();

次に、基本的にいくつかの構成を持つ Flex である NavContainer を返します。

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 readme のサンプル コードから取得したものです。


            {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