Add user menu with logout button

Includes a change that lets dropdown menus get smaller (but not too
small) if their contents aren’t wide. This looks better for emptier
menus like the user menu.

(The user menu will gain more functionality with #618.)

Issue #619 Add ability to log out from the front end

src/App.css

@@ -101,6 +101,10 @@
 	color: var(--color--red);
 }
 
+.App-navbar .logout {
+	color: var(--color--red);
+}
+
 .App-main {
 	grid-area: main;
 	position: relative;

src/components/Dropdown/Dropdown.css

@@ -1,7 +1,8 @@
 :root {
 	--dropdown--menu--border-radius: 8px;
 	--dropdown--menu--spacing: var(--accessible-spacing--1x);
-	--dropdown--menu--width: 30ch;
+	--dropdown--menu--min-width: 20ch;
+	--dropdown--menu--max-width: 30ch;
 	--dropdown--menu-item--icon-size: 1.5em;
 }
 
@@ -44,7 +45,9 @@
 .dropdown-menu {
 	position: absolute;
 	z-index: 100;
-	width: var(--dropdown--menu--width);
+	inline-size: max-content;
+	min-inline-size: var(--dropdown--menu--min-width);
+	max-inline-size: var(--dropdown--menu--max-width);
 
 	background-color: white;
 	border-radius: var(--dropdown--menu--border-radius);

src/components/User.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
 import { useOidc, useOidcUser, OidcUserStatus } from '@axa-fr/react-oidc';
-import { UserIcon as UserIconOutline } from '@heroicons/react/24/outline';
+import {
+	PowerIcon,
+	UserIcon as UserIconOutline,
+} from '@heroicons/react/24/outline';
 import { UserIcon as UserIconSolid } from '@heroicons/react/24/solid';
+import {
+	Dropdown,
+	DropdownTrigger,
+	DropdownMenu,
+	DropdownMenuButton,
+} from './Dropdown';
 import { getLogger } from '../logger';
 
 const logger = getLogger('<User>');
 
 const User = () => {
 	const { oidcUser, oidcUserLoadingState } = useOidcUser();
-	const { login } = useOidc();
+	const { login, logout } = useOidc();
 
 	switch (oidcUserLoadingState) {
 		case OidcUserStatus.Loading:
@@ -40,10 +49,24 @@ const User = () => {
 			);
 		default:
 			return (
-				<div className="App-navbar__item">
-					<UserIconSolid />
-					{oidcUser.name}
-				</div>
+				<Dropdown name="navbar-dropdown">
+					<DropdownTrigger type="navbar-item">
+						<UserIconSolid />
+						{oidcUser.name}
+					</DropdownTrigger>
+					<DropdownMenu align="right">
+						<DropdownMenuButton
+							icon={<PowerIcon />}
+							className="logout"
+							onClick={() => {
+								logout('/').catch(logger.error);
+							}}
+							key="logout"
+						>
+							Log out
+						</DropdownMenuButton>
+					</DropdownMenu>
+				</Dropdown>
 			);
 	}
 };