【Chakra V3】Drawerのwidthを変更する

はじめに

Chakra V3にてDrawer（サイドバー）の幅を変更する方法を特定するのに時間がかかったため備忘として残します。

問題

サイドバーの幅が大きすぎるため小さくする必要がありました。

ソースは次の通りです。

修正前

  return (
    <Drawer.Root
      open={open}
      onOpenChange={(e) => setOpen(e.open)}
      placement={"start"}
    >
      <Drawer.Trigger asChild>
        <IconButton
          aria-label="sidebar open icon"
          variant="ghost"
          _expanded={{ background: "none" }}
        >
          <RxHamburgerMenu color="white" />
        </IconButton>
      </Drawer.Trigger>
      <Portal>
        <Drawer.Backdrop />
        <Drawer.Positioner>
          <Drawer.Content>
            <Drawer.Body>
              <Stack>
                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/home")}>
                    TOP
                  </Button>
                </DrawerActionTrigger>

                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/users")}>
                    ユーザ一一覧
                  </Button>
                </DrawerActionTrigger>
                <DrawerActionTrigger asChild>
                  <Button
                    variant="ghost"
                    onClick={() => handleClick("/setting")}
                  >
                    設定
                  </Button>
                </DrawerActionTrigger>
              </Stack>
            </Drawer.Body>
          </Drawer.Content>
        </Drawer.Positioner>
      </Portal>
    </Drawer.Root>
  );

解決方法

<Drawer.Content />コンポーネントにw属性に数値を設定すればOKです。

修正後

  return (
    <Drawer.Root
      open={open}
      onOpenChange={(e) => setOpen(e.open)}
      placement={"start"}
    >
      <Drawer.Trigger asChild>
        <IconButton
          aria-label="sidebar open icon"
          variant="ghost"
          _expanded={{ background: "none" }}
        >
          <RxHamburgerMenu color="white" />
        </IconButton>
      </Drawer.Trigger>
      <Portal>
        <Drawer.Backdrop />
        <Drawer.Positioner>
-          <Drawer.Content>
+          <Drawer.Content w="150px">
            <Drawer.Body>
              <Stack>
                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/home")}>
                    TOP
                  </Button>
                </DrawerActionTrigger>

                <DrawerActionTrigger asChild>
                  <Button variant="ghost" onClick={() => handleClick("/users")}>
                    ユーザ一一覧
                  </Button>
                </DrawerActionTrigger>
                <DrawerActionTrigger asChild>
                  <Button
                    variant="ghost"
                    onClick={() => handleClick("/setting")}
                  >
                    設定
                  </Button>
                </DrawerActionTrigger>
              </Stack>
            </Drawer.Body>
          </Drawer.Content>
        </Drawer.Positioner>
      </Portal>
    </Drawer.Root>
  );

maxW属性やminW属性も設定可能です。

おわりに

公式documentには記載がなかったですが、参考となる記事を見つけたので特定できました。
github上のソースコードも確認できるようにしておかねば....

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp