Account dropdown

src/pages/app.css

@@ -54,17 +54,19 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
 
 .nav-menu { display: inline-block; position: relative; }
 
-.nav-menu > summary {
+.nav-menu > summary,
+.nav-item {
     border-radius: 6px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
-    list-style: none;
     padding: 0.3rem 0.6rem;
     user-select: none;
 }
 
+.nav-menu > summary { list-style: none; }
+
 .nav-menu > summary::-webkit-details-marker { display: none; }
 
 .nav-menu > summary::after {
@@ -75,7 +77,8 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
 }
 
 .nav-menu > summary:hover,
-.nav-menu[open] > summary { background: var(--line-soft); }
+.nav-menu[open] > summary,
+.nav-item:hover { background: var(--line-soft); }
 
 .nav-menu[open] > summary::after { transform: rotate(180deg); }
 
@@ -103,6 +106,26 @@ header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gri
 
 .nav-dropdown a:hover { background: var(--line-soft); }
 
+.nav-dropdown button {
+    background: none;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    padding: 0.35rem 0.6rem;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.nav-dropdown button:hover { background: var(--line-soft); }
+
+.nav-dropdown .nav-user {
+    border-bottom: 1px solid var(--line-soft);
+    font-weight: 600;
+    padding: 0.35rem 0.6rem 0.5rem;
+}
+
+.nav-auth .nav-dropdown { left: auto; right: 0; }
+
 /* Hover/focus surface the panel of a closed menu; [open] pins it.
    The content-visibility override accompanies display because modern
    engines hide a closed <details>' slot content that way. */

src/pages/main.html

@@ -16,7 +16,7 @@
     <header>
         <h1><img class="brand-emblem" alt="" pstm-res-src="clanker-saddle-emblem.png">ClankerSaddle</h1>
         <nav>
-            <a href="/">Dashboard</a>
+            <a class="nav-item" href="/">Dashboard</a>
             <!-- spry:nav-begin -->
             <details class="nav-menu" name="nav-menu">
                 <summary>Work</summary>
@@ -44,13 +44,19 @@
                 </div>
             </details>
             <!-- spry:nav-end -->
-            <span stm-if="auth != null" class="nav-auth"><strong stm-text="auth.username">user</strong>
-                <a href="/profile" title="Your profile">Profile</a>
-                <button type="button" class="inline" stm-action="auth.logout">Log out</button>
+            <span stm-if="auth != null" class="nav-auth">
+                <details class="nav-menu" name="nav-menu">
+                    <summary>Account</summary>
+                    <div class="nav-dropdown">
+                        <span class="nav-user" stm-text="auth.username">user</span>
+                        <a href="/profile" title="Your profile">Profile</a>
+                        <button type="button" class="inline" stm-action="auth.logout">Log out</button>
+                    </div>
+                </details>
                 <!-- spry:nav-auth-begin -->
                 <!-- spry:nav-auth-end -->
             </span>
-            <a stm-if="auth == null" href="/login">Log in</a>
+            <a class="nav-item" stm-if="auth == null" href="/login">Log in</a>
         </nav>
     </header>
     <main>