message: chore: add more menu stories
diff: import { chakra } from "@chakra-ui/system"
  import * as React from "react"
  import { Menu, MenuButton, MenuItem, MenuList } from "./Menu"
  +import { Portal } from "@chakra-ui/portal"
  export default {
  title: "Menu",
  @@ -13,26 +14,86 @@ export default {
  ],
  }
  -const Submenu = React.forwardRef<HTMLButtonElement, {}>((props, ref) => {
  - return (
  +export const basic = () => (
  + <Menu>
  + <MenuButton variant="solid" variantColor="green" variantSize="sm">
  + Open menu
  + </MenuButton>
  + <MenuList>
  + <MenuItem>Menu 1</MenuItem>
  + <MenuItem>Menu 2</MenuItem>
  + <MenuItem>Menu 3</MenuItem>
  + <MenuItem>Menu 4</MenuItem>
  + </MenuList>
  + </Menu>
  +)
  +
  +export const disabledMenuItem = () => (
  + <Menu>
  + <MenuButton variant="solid" variantColor="green" variantSize="sm">
  + Open menu
  + </MenuButton>
  + <MenuList>
  + <MenuItem>Menu 1</MenuItem>
  + <MenuItem>Menu 2</MenuItem>
  + <MenuItem isDisabled>Menu 3</MenuItem>
  + <MenuItem>Menu 4</MenuItem>
  + </MenuList>
  + </Menu>
  +)
  +
  +export const disabledButFocusableMenuItem = () => (
  + <Menu>
  + <MenuButton variant="solid" variantColor="green" variantSize="sm">
  + Open menu
  + </MenuButton>
  + <MenuList>
  + <MenuItem>Menu 1</MenuItem>
  + <MenuItem>Menu 2</MenuItem>
  + <MenuItem isDisabled isFocusable>
  + Menu 3
  + </MenuItem>
  + <MenuItem>Menu 4</MenuItem>
  + </MenuList>
  + </Menu>
  +)
  +
  +export const withPortal = () => (
  + <Menu>
  + <MenuButton variant="solid" variantColor="green" variantSize="sm">
  + Open menu
  + </MenuButton>
  + <Portal>
  + <MenuList>
  + <MenuItem>Menu 1</MenuItem>
  + <MenuItem>Menu 2</MenuItem>
  + <MenuItem>Menu 3</MenuItem>
  + <MenuItem>Menu 4</MenuItem>
  + </MenuList>
  + </Portal>
  + </Menu>
  +)
  +
  +const Submenu = React.forwardRef<HTMLButtonElement, {}>((props, ref) => (
  <Menu>
  <MenuButton isSubmenu ref={ref} {...props}>
  Submenu >>
  </MenuButton>
  + <Portal>
  <MenuList>
  <MenuItem>Menu 1</MenuItem>
  <MenuItem>Menu 2</MenuItem>
  </MenuList>
  + </Portal>
  </Menu>
  - )
  -})
  +))
  -export function SampleMenu() {
  - return (
  +export const nestedMenus = () => (
  <Menu>
  <MenuButton variant="solid" variantColor="green" variantSize="sm">
  Open menu
  </MenuButton>
  + <Portal>
  <MenuList>
  <MenuItem>Menu 1</MenuItem>
  <MenuItem>Menu 2</MenuItem>
  @@ -46,6 +107,6 @@ export function SampleMenu() {
  <MenuItem as={Submenu} />
  <MenuItem>Menu 4</MenuItem>
  </MenuList>
  + </Portal>
  </Menu>
  )
  -}
  