Use details tag for dropdown menu

Use a details tag to toggle the display of the dropdown menu instead of using CSS :hover rules
agraven · Sep 12, 2021 · ebcce01 · ebcce01
1 parent ffeb519
commit ebcce01
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 18 deletions.
diff --git a/static/style.css b/static/style.css
@@ -144,6 +144,9 @@ nav a, nav ul li .navbar-item {
 	display: block;
 	text-decoration: none;
 }
+nav summary {
+	padding: 15px;
+}
 nav a:hover {
 	background: #cc968b70;
 }
@@ -163,26 +166,13 @@ nav a:hover {
 	position: relative;
 	display: inline-block;
 }
-.dropdown > span::after {
-	content: "🞀";
-	display: inline-block;
-	width: 10px;
-	padding-left: 5px;
-}
-.dropdown > span:hover::after {
-	content: "🞃";
-}
 .dropdown-content {
-	display: none;
 	position: absolute;
 	background-color: #e8B8ae;
 	min-width: 8rem;
-	right: 0;
+	right: -10px;
 	z-index: 1;
 }
-.dropdown:hover .dropdown-content {
-	display: block;
-}
 footer.notice {
 	background: #e8b8ae;
 	padding: 2em;

diff --git a/templates/root.html b/templates/root.html
@@ -25,16 +25,15 @@
 			<ul>
 			{% match session %}
 			{% when Some with (session) %}
-				<li class="dropdown">
-					<span class="navbar-item">Welcome, {{ session.user }}</span>
+				<details class="dropdown">
+					<summary>Welcome, {{ session.user }}</summary>
 					<div class="dropdown-content">
 						<a href="/user/{{ session.user }}">Profile</a>
 						{% if session.allowed(Permission::CreateArticle, connection).unwrap_or(false) -%}
 						<a href="/edit">Create article</a>
 						{%- endif %}
-						<a href="/logout">Log out</a>
 					</div>
-				</li>
+				</details>
 			{% when None %}
 				<li><a href="/login">Log in</a></li>
 				<li><a href="/signup">Sign up</a></li>