dropdown-3

• Vista previa

  

• Dependencias

  Terminal

  npm install @szhsin/react-menu

• layout.tsx

  import '@szhsin/react-menu/dist/index.css';
  import '@szhsin/react-menu/dist/transitions/slide.css';

• Código

  'use client';
  
  import Image from 'next/image';
  import { Menu, MenuItem, MenuButton, MenuDivider, MenuHeader } from '@szhsin/react-menu';
  
  const Dropdown3 = () => {
    return (
      <Menu
        menuButton={
          <MenuButton className="relative uppercase w-10 h-10 flex items-center justify-center rounded-full hover:bg-background-secondary transition-colors font-medium text-lg">
            <Image
              src="https://img.freepik.com/foto-gratis/firewall-datos-negro_1150-1733.jpg?t=st=1713598648~exp=1713602248~hmac=ad72bf354d88208c61f16a588fe49f2d91b1e7fc5824c199f883d189526fd923&w=2000"
              alt="Image"
              fill
              className="object-cover rounded-full"
            />
          </MenuButton>
        }
        transition
        align="end"
        menuClassName="w-56 box-border z-50 text-sm bg-background-secondary p-1 shadow-md rounded-md select-none focus:outline-none min-w-[9rem]"
        gap={5}
      >
        <MenuHeader className="px-2 text-muted-foreground">Mi cuenta</MenuHeader>
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-user"></i>
          Mi perfil
        </MenuItem>
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-wallet"></i>
          Mi suscripción
        </MenuItem>
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-settings"></i>
          Ajustes
        </MenuItem>
        <MenuDivider />
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-users"></i>
          Equipo
        </MenuItem>
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-user-add"></i>
          Agregar colaborado
        </MenuItem>
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-invite"></i>
          Invitar colaborador
        </MenuItem>
        <MenuDivider />
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-user-headset"></i>
          Soporte técnico
        </MenuItem>
        <MenuItem
          disabled
          className="flex items-center gap-2 py-1.5 cursor-default px-2 rounded-sm transition-colors duration-150 text-muted-foreground"
        >
          <i className="fi fi-rr-cloud"></i>
          Cloud
        </MenuItem>
        <MenuDivider />
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-sign-out-alt"></i>
          Cerrar sesión
        </MenuItem>
      </Menu>
    );
  };
  
  export default Dropdown3;