michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Menubar handle wraps the ProdDash logo as a translucent pill

Browse Source 
The show/hide handle is now the logo itself: a translucent accent pill
wrapped around "ProdDash" at the left of the bar, centred on the text, with
"Dash" in the background colour so it reads as a cutout inside the green.
The pill is far less opaque than the old solid tab (38% idle, brighter on
hover). When the bar hides, the text folds away and the pill shrinks to a
slim lip at the top-left edge, exactly where the old tab sat. An invisible
in-flow twin of the logo keeps the bar's layout unchanged.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
This commit is contained in:
Claude
2026-09-10 19:16:53 +00:00
parent 22aa2f0e6d
commit 35ef54e248
3 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+3 -2
View File
@@ -15,7 +15,8 @@
</head>
<body>
<header id="topbar">
<span id="brand">Prod<span class="accent">Dash</span></span>
<!-- invisible twin of the logo: holds its place in the bar; the real logo is the handle below -->
<span id="brand" class="brand-spacer" aria-hidden="true">Prod<span class="accent">Dash</span></span>
<span class="spacer"></span>
@@ -50,7 +51,7 @@
</a>
</header>
<button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar"></button>
<button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar">Prod<span class="accent">Dash</span></button>
<main id="gridwrap">
<div id="grid">
public/style.css
+40 -20
View File
@@ -54,36 +54,56 @@ body.menu-hidden #topbar {
overflow: hidden;
}
/* The menubar's own show/hide tab. It sits under the ProdDash brand at the
left — not screen-centre, where a tile's own (centred) tab would land
right under it once both bars are hidden — and wears the accent colour
so it never reads as a tile tab. */
/* The menubar's show/hide handle IS the logo: a translucent accent pill
wrapped around "ProdDash" at the left of the bar, "Dash" cut out in the
background colour. It sits at the left — never screen-centre, where a
tile's own (centred) tab lands once both bars are hidden. When the bar
hides, the pill shrinks to a slim lip at the very top edge, clear of a
top-row tile's status dot and title. */
.brand-spacer { visibility: hidden; }
#topbar-notch {
position: fixed;
/* straddles the bar's bottom edge — mostly on the bar, a short lip below
it — so it never covers a top-row tile's status dot or title */
top: calc(var(--topbar-h, 46px) - 8px);
left: 12px;
width: 54px;
height: 14px;
padding: 0;
background: var(--accent);
/* vertically centred in the 46px bar: (46 - 24) / 2 = 11px from its top */
top: calc(var(--topbar-h, 46px) - 35px);
left: 4px; /* the logo text starts at the bar's 12px padding; the pill adds 8px each side */
height: 24px;
min-width: 60px;
padding: 0 8px;
font: inherit;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.02em;
line-height: 24px;
color: var(--text);
background: color-mix(in srgb, var(--accent) 38%, transparent);
border: none;
border-radius: 0 0 10px 10px;
border-radius: 12px;
cursor: pointer;
z-index: 60;
opacity: 0.55;
transition: opacity 0.15s ease, top 0.22s ease, height 0.22s ease;
transition: top 0.22s ease, height 0.22s ease, line-height 0.22s ease, font-size 0.22s ease,
border-radius 0.22s ease, background 0.15s ease;
}
#topbar-notch:hover { opacity: 1; }
/* bar hidden: a slim tab at the very top edge, clear of a top-row tile's dot and title */
body.menu-hidden #topbar-notch { top: 0; height: 10px; }
#topbar-notch::after {
#topbar-notch .accent { color: var(--bg); } /* the cutout */
#topbar-notch:hover { background: color-mix(in srgb, var(--accent) 62%, transparent); }
/* bar hidden: the text folds away and the pill becomes a lip at the top edge */
body.menu-hidden #topbar-notch {
top: 0;
height: 10px;
line-height: 10px;
font-size: 0;
border-radius: 0 0 10px 10px;
background: color-mix(in srgb, var(--accent) 55%, transparent);
}
body.menu-hidden #topbar-notch:hover { background: var(--accent); }
body.menu-hidden #topbar-notch::after {
content: "";
display: block;
width: 20px;
height: 3px;
margin: 4px auto 0;
margin: 0 auto;
position: relative;
top: 3px;
border-radius: 999px;
background: var(--bg);
}