ハンバーガーメニューボタン
ハンバーガーメニューボタンは画面スペース資源に制限のある、主にモバイルデバイスで使用されるモバイルメニューを表示するためのトリガーとなるボタンです。
import {
HamburgerMenuButton,
CloseIcon,
CloseWithLabelIcon,
HamburgerIcon,
HamburgerWithLabelIcon,
} from "@/components/ui/hamburger-menu-button";使用例
import { Flex } from "styled-system/jsx";
import {
HamburgerMenuButton,
HamburgerIcon,
CloseIcon,
} from "@/components/ui/hamburger-menu-button";
export default function App() {
return (
<Flex flexDirection="row" gap={4}>
<HamburgerMenuButton>
<HamburgerIcon />
メニュー
</HamburgerMenuButton>
<HamburgerMenuButton>
<CloseIcon />
閉じる
</HamburgerMenuButton>
</Flex>
);
}
モバイル条件付きコンポーネント
import { css } from "styled-system/css";
import { Flex } from "styled-system/jsx";
import {
HamburgerMenuButton,
HamburgerWithLabelIcon,
CloseWithLabelIcon,
} from "@/components/ui/hamburger-menu-button";
export default function App() {
const mobile = css({
p: 1,
_hover: {
outlineStyle: "solid",
outlineWidth: "1px",
outlineColor: "black",
},
});
return (
<Flex flexDirection="row" gap={4}>
<HamburgerMenuButton className={mobile}>
<HamburgerWithLabelIcon />
</HamburgerMenuButton>
<HamburgerMenuButton className={mobile}>
<CloseWithLabelIcon />
</HamburgerMenuButton>
<HamburgerMenuButton className={mobile}>
<HamburgerWithLabelIcon isEnglish />
</HamburgerMenuButton>
<HamburgerMenuButton className={mobile}>
<CloseWithLabelIcon isEnglish />
</HamburgerMenuButton>
</Flex>
);
}