Skip to content

Instantly share code, notes, and snippets.

@AlexMachin1997

AlexMachin1997/Menu.jsx

Created January 13, 2023 20:59
Show Gist options
  • Save AlexMachin1997/75e5a4e53a6a2ac0bd645d68dd176970 to your computer and use it in GitHub Desktop.
Save AlexMachin1997/75e5a4e53a6a2ac0bd645d68dd176970 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
icons.jsx
function EditInactiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M4 13V16H7L16 7L13 4L4 13Z' fill='#EDE9FE' stroke='#A78BFA' strokeWidth='2' />
</svg>
);
}
function EditActiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M4 13V16H7L16 7L13 4L4 13Z' fill='#8B5CF6' stroke='#C4B5FD' strokeWidth='2' />
</svg>
);
}
function DuplicateInactiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M4 4H12V12H4V4Z' fill='#EDE9FE' stroke='#A78BFA' strokeWidth='2' />
<path d='M8 8H16V16H8V8Z' fill='#EDE9FE' stroke='#A78BFA' strokeWidth='2' />
</svg>
);
}
function DuplicateActiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M4 4H12V12H4V4Z' fill='#8B5CF6' stroke='#C4B5FD' strokeWidth='2' />
<path d='M8 8H16V16H8V8Z' fill='#8B5CF6' stroke='#C4B5FD' strokeWidth='2' />
</svg>
);
}
function ArchiveInactiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='8' width='10' height='8' fill='#EDE9FE' stroke='#A78BFA' strokeWidth='2' />
<rect x='4' y='4' width='12' height='4' fill='#EDE9FE' stroke='#A78BFA' strokeWidth='2' />
<path d='M8 12H12' stroke='#A78BFA' strokeWidth='2' />
</svg>
);
}
function ArchiveActiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='8' width='10' height='8' fill='#8B5CF6' stroke='#C4B5FD' strokeWidth='2' />
<rect x='4' y='4' width='12' height='4' fill='#8B5CF6' stroke='#C4B5FD' strokeWidth='2' />
<path d='M8 12H12' stroke='#A78BFA' strokeWidth='2' />
</svg>
);
}
function MoveInactiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M10 4H16V10' stroke='#A78BFA' strokeWidth='2' />
<path d='M16 4L8 12' stroke='#A78BFA' strokeWidth='2' />
<path d='M8 6H4V16H14V12' stroke='#A78BFA' strokeWidth='2' />
</svg>
);
}
function MoveActiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M10 4H16V10' stroke='#C4B5FD' strokeWidth='2' />
<path d='M16 4L8 12' stroke='#C4B5FD' strokeWidth='2' />
<path d='M8 6H4V16H14V12' stroke='#C4B5FD' strokeWidth='2' />
</svg>
);
}
function DeleteInactiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='6' width='10' height='10' fill='#EDE9FE' stroke='#A78BFA' strokeWidth='2' />
<path d='M3 6H17' stroke='#A78BFA' strokeWidth='2' />
<path d='M8 6V4H12V6' stroke='#A78BFA' strokeWidth='2' />
</svg>
);
}
function DeleteActiveIcon(props) {
return (
<svg {...props} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<rect x='5' y='6' width='10' height='10' fill='#8B5CF6' stroke='#C4B5FD' strokeWidth='2' />
<path d='M3 6H17' stroke='#C4B5FD' strokeWidth='2' />
<path d='M8 6V4H12V6' stroke='#C4B5FD' strokeWidth='2' />
</svg>
);
}
Raw
Menu.jsx
<Menu as='div' className='relative inline-block text-left'>
<Menu.Button
ref={setReferenceElement}
className='inline-flex w-full justify-center rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
>
Options
</Menu.Button>
<Transition
as={React.Fragment}
enter='transition ease-out duration-100'
enterFrom='transform opacity-0 scale-95'
enterTo='transform opacity-100 scale-100'
leave='transition ease-in duration-75'
leaveFrom='transform opacity-100 scale-100'
leaveTo='transform opacity-0 scale-95'
>
<Menu.Items
className='w-40 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className='px-1 py-1 '>
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? 'bg-violet-500 text-white' : 'text-gray-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
{active ? (
<EditActiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
) : (
<EditInactiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
)}
Edit
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? 'bg-violet-500 text-white' : 'text-gray-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
{active ? (
<DuplicateActiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
) : (
<DuplicateInactiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
)}
Duplicate
</button>
)}
</Menu.Item>
</div>
<div className='px-1 py-1'>
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? 'bg-violet-500 text-white' : 'text-gray-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
{active ? (
<ArchiveActiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
) : (
<ArchiveInactiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
)}
Archive
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? 'bg-violet-500 text-white' : 'text-gray-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
{active ? (
<MoveActiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
) : (
<MoveInactiveIcon className='mr-2 h-5 w-5' aria-hidden='true' />
)}
Move
</button>
)}
</Menu.Item>
</div>
<div className='px-1 py-1'>
<Menu.Item>
{({ active }) => (
<button
className={`${
active ? 'bg-violet-500 text-white' : 'text-gray-900'
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
>
{active ? (
<DeleteActiveIcon
className='mr-2 h-5 w-5 text-violet-400'
aria-hidden='true'
/>
) : (
<DeleteInactiveIcon
className='mr-2 h-5 w-5 text-violet-400'
aria-hidden='true'
/>
)}
Delete
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
Raw
usePopper.js
// Used to place the menu either on the top or bottom of the Listbox button
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: 'bottom-start',
modifiers: [
{
name: 'flip',
options: {
// Switch between top and bottom for the position of the element
fallbackPlacements: ['bottom-end']
}
},
{
name: 'offset',
options: {
offset: [0, 10]
}
}
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment