Skip to content

Instantly share code, notes, and snippets.

@gvdonovan

gvdonovan/UserProfileMenu.js

Created March 5, 2020 06:15
Show Gist options
  • Save gvdonovan/a4f5dc206352d3278586eaabd6dcaba5 to your computer and use it in GitHub Desktop.
Save gvdonovan/a4f5dc206352d3278586eaabd6dcaba5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
UserProfileMenu.js
import React, { useState } from "react";
import ClickAwayListener from "react-click-away-listener";
function UserProfileMenu(props) {
const [isOpen, setOpen] = useState(false);
return (
<div className="ml-3 relative">
<div>
<button
className="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline"
onClick={() => setOpen(!isOpen)}
>
<img
className="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</button>
</div>
{isOpen && (
<ClickAwayListener onClickAway={() => setOpen(false)}>
<div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div className="py-1 rounded-md bg-white shadow-xs">
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
>
Your Profile {props.name}
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
>
Settings
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150"
>
Sign out
</a>
</div>
</div>
</ClickAwayListener>
)}
</div>
);
}
export default UserProfileMenu;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment