Relayout of nav

app/static/css/style.css

@@ -57,6 +57,7 @@ a:hover {
 
 .topbar nav {
   display: flex;
+  align-items: center;
   gap: 1rem;
 }
 
@@ -67,6 +68,76 @@ a:hover {
   gap: 0.75rem;
 }
 
+/* Nav dropdowns */
+.nav-group {
+  position: relative;
+  line-height: 1;
+}
+
+.nav-label {
+  cursor: default;
+  color: #a5b4fc;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.nav-label:hover {
+  text-decoration: underline;
+}
+
+.nav-dropdown {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.3rem 0;
+  min-width: 180px;
+  z-index: 200;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+.nav-group:hover > .nav-dropdown {
+  display: block;
+}
+
+.nav-dropdown a {
+  display: block;
+  padding: 0.38rem 0.9rem;
+  white-space: nowrap;
+  color: #a5b4fc;
+}
+
+.nav-dropdown a:hover {
+  background: var(--surface-2);
+  text-decoration: none;
+}
+
+.nav-dropdown hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 0.3rem 0;
+}
+
+/* Second-level group inside a dropdown */
+.nav-dropdown .nav-group > .nav-label {
+  display: block;
+  padding: 0.38rem 0.9rem;
+}
+
+.nav-dropdown .nav-group:hover > .nav-label {
+  background: var(--surface-2);
+  text-decoration: none;
+}
+
+.nav-dropdown .nav-group > .nav-dropdown {
+  top: -0.3rem;
+  left: 100%;
+  margin-left: 2px;
+}
+
 /* Cards */
 .card {
   background: var(--surface);