jordi fita mas
22509dd683
It works better than with the weird hover behaviour i could do in CSS, and it already has most of the aria roles needed. The only tricky part is to allow closing it by clicking anywhere else, that is done by “extending” the <summary> to the whole screen, with a lower z-index than the menu but higher than the rest of controls, that way we force people to click on that summary.
39 lines
1.0 KiB
HTML
39 lines
1.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ .Title }} — Numerus</title>
|
|
<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
|
|
<details id="profilemenu">
|
|
<summary>
|
|
<i class="ri-eye-close-line ri-3x"></i>
|
|
</summary>
|
|
<ul role="menu">
|
|
<li role="presentation">
|
|
<a role="menuitem" href="/profile">
|
|
<i class="ri-account-circle-line"></i>
|
|
{{( gettext "Account" )}}
|
|
</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<form method="POST" action="/logout">
|
|
<button type="submit" role="menuitem">
|
|
<i class="ri-logout-circle-line"></i>
|
|
{{( pgettext "Logout" "action" )}}
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</header>
|
|
<main>
|
|
{{- template "content" . }}
|
|
</main>
|
|
</body>
|
|
</html>
|