improve navbar

2026-05-09 21:27:21 -05:00
parent 4329e8b145
commit 37c5cdea45
3 changed files with 214 additions and 134 deletions
@@ -3342,6 +3342,150 @@ body.sb-open #sb-backdrop { display: block; }
 #notify-toggle.text-slate-300   { color: #cbd5e1; }
 #notify-toggle.border-emerald-500\/40 { border-color: rgba(16, 185, 129, 0.4); }

+/* ============================================================
+   TOPBAR — 3-column grid (brand · centered nav · utility)
+   ============================================================ */
+
+.topbar-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-areas: "left center right";
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+.topbar-left {
+  grid-area: left;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-self: start;
+  min-width: 0;
+}
+.topbar-center {
+  grid-area: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: center;
+  min-width: 0;
+}
+.topbar-right {
+  grid-area: right;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-self: end;
+  min-width: 0;
+}
+
+@media (max-width: 767px) {
+  .topbar-grid {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "left right"
+      "center center";
+  }
+  .topbar-center { justify-self: stretch; }
+  .topbar-center.hidden { display: none; }
+}
+
+/* ============================================================
+   USER ACTIONS DROPDOWN (notify · hide · logout)
+   ============================================================ */
+
+.user-actions-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: rgba(30, 41, 59, 0.7);
+  border: 1px solid rgba(51, 65, 85, 0.6);
+  color: #cbd5e1;
+  cursor: pointer;
+  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
+}
+.user-actions-trigger:hover {
+  background: rgba(51, 65, 85, 0.7);
+  color: #e2e8f0;
+}
+.user-actions-trigger[aria-expanded="true"] {
+  background: rgba(51, 65, 85, 0.85);
+  border-color: rgba(99, 102, 241, 0.3);
+  color: #e2e8f0;
+}
+.user-actions-dot {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #f43f5e;
+  box-shadow: 0 0 0 2px rgba(8, 12, 24, 1);
+}
+.user-actions-dot.hidden { display: none; }
+
+.user-actions-menu {
+  min-width: 220px;
+  /* Anchor down-right of the trigger; override base centering */
+  left: auto !important;
+  right: 0 !important;
+  transform: translateY(-4px) !important;
+}
+.user-actions-menu.nav-dd-open {
+  transform: translateY(0) !important;
+}
+
+.user-actions-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 12px;
+  border-radius: 7px;
+  border: 0;
+  background: transparent;
+  color: #cbd5e1;
+  font-size: 0.84rem;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+.user-actions-item:hover {
+  background: rgba(99, 102, 241, 0.12);
+  color: #e2e8f0;
+}
+.user-actions-item--danger:hover {
+  background: rgba(244, 63, 94, 0.12);
+  color: #fecaca;
+}
+.user-actions-icon {
+  width: 16px;
+  text-align: center;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+.user-actions-label { flex: 1; }
+.user-actions-shortcut {
+  margin-left: auto;
+  font-size: 0.7rem;
+  color: var(--cv-text-dim, #6b7488);
+  font-family: ui-monospace, "SFMono-Regular", monospace;
+}
+.user-actions-divider {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.06);
+  margin: 4px 6px;
+}
+
+/* The notify-badge inside the dropdown should stack right next to the label */
+.user-actions-item #notify-badge { margin-left: auto; }
+
 /* ============================================================
   TOPBAR DROPDOWN MENUS
   ============================================================ */