chakraUIを用いた左メニュー作成

はじめに

この記事は2023年度の振り返りです。

chakraUIを利用しています。
これだけで色々なデザインを再現でき、今のところ困っていないので重宝しています
ただ、この場合どうするんだっけ？というのがあったので、その時の備忘録です。

目標レイアウト

PCアプリのLINEの様な左メニューがあるレイアウト

イメージ図

抜粋のソース

main.tsx

  <Grid
    templateAreas={`"nav main"`}
    gridTemplateRows={'100% 1fr 30px'}
    gridTemplateColumns={'50px 1fr'}
    h="100vh"
    gap="0"
  >
    <GridItem bg="teal.400" area={'nav'} p={0}>
      <Stack
        height="100vh"
        direction="column"
        alignItems="center"
        justifyContent="space-between"
      >
        <Box p={2}>
          <NavMenu />
        </Box>
        <Box p={2}>
          <NavConfig />
        </Box>
      </Stack>
    </GridItem>
    <GridItem
      bg="white"
      area={'main'}
      p={2}
      overflowY="scroll"
      borderTop="1px solid"
      borderColor="gray.200"
    >
      <Outlet />
    </GridItem>
  </Grid>

NavMenu.tsx

   <VStack>
    <NavLink to="/">
      <Button colorScheme="gray" variant="solid" size="sm" w="100%">
        <FontAwesomeIcon icon={faHouse} />
      </Button>
    </NavLink>
    <NavLink to="/todo">
      <Button colorScheme="gray" variant="solid" size="sm" w="100%">
        <FontAwesomeIcon icon={faRectangleList} />
      </Button>
    </NavLink>
  </VStack>

NavConfig.tsx

  <VStack>
    <ConfigTabs />
    <ChangeLogDrawer />
  </VStack>

完成図

さいごに

chakraUI色々できて、いいですよね。。。
react以外の対応版も出てくれると嬉しいのですが