top bar felt cramped
Had a normal top navigation bar since the start, home, archive, about, that sort of thing in a row across the top. Never loved it. Felt like it was competing with the header art for space, and on a wider screen there was just this awkward strip of empty bar on either side of the links.
Switched to a sidebar instead. Nav lives down the left side now, header art gets the top of the page to itself.
a little icon per section
Once it was a sidebar I had room to give each link its own small pixel icon instead of just text. Did a little glyph for each section, a treasure chest for the archive felt like the obvious pick (old posts, dig through them), something else for about, something for contact. Nothing fancy, 16x16 pixel icons, but it makes the sidebar feel less like a plain list of links.
the mobile bug
Building this in SvelteKit, still fairly new to me, and the sidebar looked fine on desktop the whole time I was working on it. Checked it on my phone almost as an afterthought and the mobile menu was rendering completely off to the side, like it existed but was positioned somewhere off the visible page. You could tell it was there because the page would shift slightly when it opened, just nothing showed up.
Took a while to track down. Turned out the dropdown never had a positioned ancestor to measure itself against:
/* before: header had no position set, so the dropdown below measured
itself against the viewport instead of the header */
.site-header {
}
.nav-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
}/* after: give the dropdown something real to anchor to */
.site-header {
position: relative;
}Menu slides in properly now and actually stays on screen when it's supposed to be visible.
Small bug, but the kind that's invisible if you only ever test on your laptop. Noted that for myself going forward, check the phone before calling something done.
Sidebar's staying either way, I like it more than the top bar ever looked.