la barra superior se sentía apretada
Tenía una barra de navegación superior normal desde el principio, inicio, archivo, sobre mí, ese tipo de cosas en fila arriba. Nunca me encantó. Sentía que competía con el arte de la cabecera por espacio, y en una pantalla más ancha había esa franja incómoda de barra vacía a cada lado de los enlaces.
Cambié a una barra lateral en su lugar. La navegación vive ahora por el lado izquierdo, el arte de la cabecera tiene la parte de arriba de la página solo para él.
un pequeño icono por sección
Una vez que era una barra lateral tuve espacio para darle a cada enlace su propio icono de píxeles pequeño en vez de solo texto. Hice un pequeño glifo para cada sección, un cofre del tesoro para el archivo se sentía como la elección obvia (entradas antiguas, escarba entre ellas), otra cosa para sobre mí, algo para contacto. Nada elaborado, iconos de 16x16 píxeles, pero hace que la barra lateral se sienta menos como una simple lista de enlaces.
el bug del móvil
Construyendo esto en SvelteKit, todavía bastante nuevo para mí, y la barra lateral se veía bien en escritorio todo el tiempo que trabajé en ella. La revisé en el móvil casi como algo secundario y el menú móvil se renderizaba completamente fuera de lugar, como si existiera pero estuviera posicionado en algún sitio fuera de la página visible. Se notaba que estaba ahí porque la página se movía un poco al abrirse, simplemente no aparecía nada.
Tardé un rato en rastrearlo. Resultó que el desplegable nunca tuvo un ancestro posicionado contra el que medirse:
/* 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;
}El menú se desliza correctamente ahora y de verdad se queda en pantalla cuando debe estar visible.
Bug pequeño, pero del tipo que es invisible si solo pruebas en tu portátil. Anotado para mí mismo de cara al futuro, revisar el móvil antes de dar algo por terminado.
La barra lateral se queda de todos modos, me gusta más de lo que nunca me gustó la barra superior.