Profile picture
Toolkit package
If you're using @intility/toolkit, you can use the <ToolkitNav> component
which will provide Intility-standardized top bar items, including a profile
picture with dropdown.
Read docs at toolkit.intility.com
Top bar profile picture
Use .bf-nav-profile on a profile image to get a circular, bordered picture.
<img className="bf-nav-profile" src="..." />Use it with <Nav.Group> to create a dropdown
button.
<Nav.Group
name={<img className="bf-nav-profile" src="..." alt="Profile menu" />}
>
[dropdown content...]
</Nav.Group>Then place it as the last sibling in the top prop of your <Nav>.
<Nav top={
<>
[other top bar items, if any...]
<Nav.Group ... />
</>
}>Profile dropdown content
Inside <Nav.Group> you can use <section> to get spacing around sections of items, and <hr> for a horizontal line separator.
Also see <Nav> and useApplyColorMode() docs.
Authenticated user
The following code will fetch the current user's photo from Microsoft Graph, with a faUser icon as fallback.
You can use this custom <ProfilePicture> component in the name prop of the <Nav.Group>, as shown in the example above.
import useSWRImmutable from "swr/immutable";
// if you're using /src/auth/fetch.ts from create.intility.app template
import { authorizedFetch } from "~/auth";
import { faUser } from "@fortawesome/pro-solid-svg-icons";
import Icon from "@intility/bifrost-react/Icon";
const fetcher = (url: string) =>
authorizedFetch(url)
.then((r) => {
if (!r.ok) throw new Error("Could not fetch photo from graph");
return r.blob();
})
// createObjectURL creates a DOMString containing a URL representing the blob
.then(URL.createObjectURL);
export default function ProfilePicture() {
// The profile picture will rarely change between refreshes
// https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations
const { data, error } = useSWRImmutable(
"https://graph.microsoft.com/v1.0/me/photos/48x48/$value",
fetcher,
);
if (!data || error) return <Icon icon={faUser} />;
return <img className="bf-nav-profile" src={data} alt="Profile picture" />;
}