toppbaren føltes trang
Hadde en helt vanlig toppnavigasjon fra starten av, hjem, arkiv, om meg, den typen ting på rad øverst. Elsket den aldri egentlig. Følte at den konkurrerte med headerkunsten om plass, og på en bredere skjerm var det bare denne rare stripen med tom bar på hver side av lenkene.
Byttet til et sidefelt i stedet. Navigasjonen bor nedover venstre side nå, headerkunsten får toppen av siden helt for seg selv.
et lite ikon per seksjon
Når det først var et sidefelt hadde jeg plass til å gi hver lenke sitt eget lille pikselikon i stedet for bare tekst. Laget et lite glyf for hver seksjon, en skattekiste for arkivet føltes som det opplagte valget (gamle innlegg, grav gjennom dem), noe annet for om meg, noe for kontakt. Ikke noe fancy, 16x16 pikselikoner, men det gjør sidefeltet til noe mer enn bare en ren liste med lenker.
mobilbuggen
Bygde dette i SvelteKit, fortsatt ganske ny for meg, og sidefeltet så fint ut på desktop hele tiden jeg jobbet med det. Sjekket det på mobilen nesten som en ettertanke, og mobilmenyen ble rendret helt bortenfor, som om den fantes men var plassert et sted utenfor den synlige siden. Du kunne se at den var der fordi siden flyttet seg litt når den åpnet, bare ingenting dukket opp.
Tok en stund å spore opp. Viste seg at dropdown-menyen aldri hadde en posisjonert forelder å måle seg mot:
/* 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;
}Menyen sklir inn ordentlig nå og holder seg faktisk på skjermen når den skal være synlig.
Liten bug, men den typen som er usynlig hvis du bare noensinne tester på laptopen. Notert til meg selv videre, sjekk mobilen før du kaller noe ferdig.
Sidefeltet blir uansett, jeg liker det bedre enn toppbaren noensinne så ut.