add nav landmark to settings and feed menu

This commit is contained in:
krvpb024 2024-01-25 23:09:39 +08:00 committed by Frédéric Guillot
parent 352aeb0490
commit 6413c9f9f7
3 changed files with 44 additions and 25 deletions

View File

@ -1,5 +1,5 @@
{{ define "feed_menu" }}
<ul>
<nav aria-label="{{ t "page.feeds.title" }} {{ t "menu.title" }}"><ul>
<li>
<a href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
</li>
@ -15,5 +15,5 @@
<li>
<a href="{{ route "refreshAllFeeds" }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
</li>
</ul>
</ul></nav>
{{ end }}

View File

@ -1,24 +1,26 @@
{{ define "settings_menu" }}
<ul>
<li>
<a href="{{ route "settings" }}">{{ icon "settings" }}{{ t "menu.settings" }}</a>
</li>
<li>
<a href="{{ route "integrations" }}">{{ icon "third-party-services" }}{{ t "menu.integrations" }}</a>
</li>
<li>
<a href="{{ route "apiKeys" }}">{{ icon "api" }}{{ t "menu.api_keys" }}</a>
</li>
<li>
<a href="{{ route "sessions" }}">{{ icon "sessions" }}{{ t "menu.sessions" }}</a>
</li>
{{ if .user.IsAdmin }}
<nav aria-label="{{ t "page.settings.title" }} {{ t "menu.title" }}">
<ul>
<li>
<a href="{{ route "users" }}">{{ icon "users" }}{{ t "menu.users" }}</a>
<a href="{{ route "settings" }}">{{ icon "settings" }}{{ t "menu.settings" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "about" }}">{{ icon "about" }}{{ t "menu.about" }}</a>
</li>
</ul>
{{ end }}
<li>
<a href="{{ route "integrations" }}">{{ icon "third-party-services" }}{{ t "menu.integrations" }}</a>
</li>
<li>
<a href="{{ route "apiKeys" }}">{{ icon "api" }}{{ t "menu.api_keys" }}</a>
</li>
<li>
<a href="{{ route "sessions" }}">{{ icon "sessions" }}{{ t "menu.sessions" }}</a>
</li>
{{ if .user.IsAdmin }}
<li>
<a href="{{ route "users" }}">{{ icon "users" }}{{ t "menu.users" }}</a>
</li>
{{ end }}
<li>
<a href="{{ route "about" }}">{{ icon "about" }}{{ t "menu.about" }}</a>
</li>
</ul>
</nav>
{{ end }}

View File

@ -99,12 +99,14 @@ a:hover {
border: none;
background-color: transparent;
display: inline-block;
cursor: pointer;
}
.header nav button[aria-controls="header-menu"] svg {
padding: 5px;
inline-size: 20px;
block-size: 20px;
inline-size: 24px;
block-size: 24px;
translate: 0 2px;
}
.header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
@ -223,12 +225,23 @@ a:hover {
margin-right: 5px;
}
.search details svg {
padding: 5px;
inline-size: 24px;
block-size: 24px;
translate: 0 -1px;
}
.search details[open] svg {
rotate: 180deg;
}
.search details > summary {
list-style: none;
display: flex;
justify-content: center;
inline-size: fit-content;
margin-inline: auto;
}
.search details > summary::marker, /* Latest Chrome, Edge, Firefox */
@ -354,6 +367,10 @@ a:hover {
display: block;
}
.search details > summary {
margin-inline: auto 0;
}
.search-toggle-switch {
display: block;
}