Menu

"use client"
 
import React, { useState } from 'react'
import { Button, Menu, MenuItem } from 'archi-ui';
 
export default function MyReactPage() {
 
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
 
  const handleClick = (e) => {
    setAnchorEl(e.currentTarget);
  }
 
  const handleClose = () => {
    setAnchorEl(null);
  }
 
  return (
    <div className='flex items-center justify-center'>
      <Button variant='outlined' onClick={handleClick}>
        Open Menu
      </Button>
      <Menu open={open} onClose={handleClose} anchorEl={anchorEl}>
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Settings</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

import React from 'react';
import { ListItemIcon, ListItemText, MenuItem, MenuList, Typography } from 'archi-ui'
import { Clipboard, Copy, Scissors } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <MenuList style={{ width: '300px' }}>
        <MenuItem>
          <ListItemIcon>
            <Scissors />
          </ListItemIcon>
          <ListItemText primary='Cut' />
          <Typography variant='caption'>Clt X</Typography>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <Copy />
          </ListItemIcon>
          <ListItemText primary='Copy' />
          <Typography variant='caption'>Clt C</Typography>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <Clipboard />
          </ListItemIcon>
          <ListItemText primary='Paste' />
          <Typography variant='caption'>Clt V</Typography>
        </MenuItem>
      </MenuList>
    </div>
  );
}

import React from 'react';
import { Divider, ListItemIcon, ListItemText, MenuItem, MenuList } from 'archi-ui'
import { ArrowDownUp, Brush, MonitorCog, Plus, RotateCw, SquareTerminal } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <MenuList>
        <MenuItem dense>
          <ListItemText inset primary='View' />
        </MenuItem>
        <MenuItem dense>
          <ListItemIcon className='text-primary'>
            <ArrowDownUp size={16} />
          </ListItemIcon>
          <ListItemText primary='Short by' />
        </MenuItem>
        <MenuItem dense>
          <ListItemIcon>
            <RotateCw size={16} />
          </ListItemIcon>
          <ListItemText primary='Refresh' />
        </MenuItem>
        <Divider />
        <MenuItem dense>
          <ListItemIcon className='text-primary'>
            <Plus size={16} />
          </ListItemIcon>
          <ListItemText primary='New' />
        </MenuItem>
        <Divider />
        <MenuItem dense>
          <ListItemIcon className='text-primary'>
            <MonitorCog size={16} />
          </ListItemIcon>
          <ListItemText primary='Display setting' />
        </MenuItem>
        <MenuItem dense>
          <ListItemIcon>
            <Brush size={16} />
          </ListItemIcon>
          <ListItemText primary='Personalize' />
        </MenuItem>
        <Divider />
        <MenuItem dense>
          <ListItemIcon>
            <SquareTerminal size={16} />
          </ListItemIcon>
          <ListItemText primary='Open in terminal' />
        </MenuItem>
        <Divider />
        <MenuItem dense>
          <ListItemText primary='Show more options...' />
        </MenuItem>
      </MenuList>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Menu, MenuItem, Typography } from 'archi-ui';
 
export default function MyReactPage() {
 
  const options = [
    'Profile',
    'My account',
    'Add another account',
    'Settings',
    'Logout'
  ];
 
  const [anchorEl, setAnchorEl] = useState(null);
  const [selectedIndex, setSelectedIndex] = useState(1);
  const open = Boolean(anchorEl);
 
  const handleClick = (e) => {
    setAnchorEl(e.currentTarget);
  }
 
  const handleMenuItemClick = (index) => {
    setSelectedIndex(index);
    setAnchorEl(null);
  }
 
  const handleClose = () => {
    setAnchorEl(null);
  }
 
  return (
    <div className='flex flex-col items-center justify-center gap-4'>
      <Typography>{options[selectedIndex]}</Typography>
      <Button variant='outlined' onClick={handleClick}>
        Open Menu
      </Button>
      <Menu open={open} onClose={handleClose} anchorEl={anchorEl}>
        {options.map((option, index) => (
          <MenuItem
            key={index}
            selected={index === selectedIndex}
            disabled={index === 0}
            onClick={() => handleMenuItemClick(index)}
          >
            {option}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, Menu, MenuItem } from 'archi-ui';
 
export default function MyReactPage() {
 
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
 
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
 
  return (
    <div className='flex items-center justify-center'>
      <Button
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        Dashboard
      </Button>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Avatar, IconButton, ListItemAvatar, ListItemIcon, Menu, MenuItem, Typography } from 'archi-ui';
import { LogOut, Plus, Settings } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
 
  const handleClick = (e) => {
    setAnchorEl(e.currentTarget);
  }
 
  const handleClose = () => {
    setAnchorEl(null);
  }
 
  return (
    <div className='flex h-12 items-center justify-end gap-4 bg-primary'>
      <Typography className='text-muted-foreground'>Home</Typography>
      <Typography className='text-muted-foreground'>About</Typography>
      <Typography className='text-muted-foreground'>Task</Typography>
      <IconButton
        onClick={handleClick}
        className='mr-2'
      >
        <Avatar>M</Avatar>
      </IconButton>
      <Menu open={open} onClose={handleClose} anchorEl={anchorEl} 
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
      >
        <MenuItem onClick={handleClose}>
          <ListItemAvatar>
            <Avatar size='sm' />
          </ListItemAvatar> Profile
        </MenuItem>
        <MenuItem onClick={handleClose} divider>
          <ListItemAvatar>
            <Avatar size='sm' />
          </ListItemAvatar>
          My account
        </MenuItem>
        <MenuItem onClick={handleClose}>
          <ListItemIcon>
            <Plus />
          </ListItemIcon>
          Add another account
        </MenuItem>
        <MenuItem onClick={handleClose} divider>
          <ListItemIcon>
            <Settings />
          </ListItemIcon>
          Settings
        </MenuItem>
        <MenuItem onClick={handleClose}>
          <ListItemIcon>
            <LogOut />
          </ListItemIcon>
          Logout
        </MenuItem>
      </Menu>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Menu, MenuItem, IconButton } from 'archi-ui'
import { MoreVertical } from 'lucide-react';
 
export default function MyReactPage() {
 
  const options = [
    'None',
    'Atria',
    'Callisto',
    'Dione',
    'Ganymede',
    'Hangouts Call',
    'Luna',
    'Oberon',
    'Phobos',
    'Pyxis',
    'Sedna',
    'Titania',
    'Triton',
    'Umbriel',
  ];
 
  const [anchorEl, setAnchorEl] = useState(null)
  const open = Boolean(anchorEl);
 
  const handleClick = (e) => {
    setAnchorEl(e.currentTarget);
  }
 
  const handleClose = () => {
    setAnchorEl(null);
  }
 
  return (
    <div className='flex items-center justify-center'>
      <IconButton
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        <MoreVertical />
      </IconButton>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        style={{ height: '200px', width: '20ch' }}
      >
        {options.map((option) => (
          <MenuItem key={option} selected={option === 'Pyxis'} onClick={handleClose}>
            {option}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}