En sidebar, eller ett sidofält, en spalt med navigation eller information är en vanligt förekommande layout på webben. Men hur skapas den och hur skapades den på ett sätt så att den funkar på alla enheter?

Koden i det här exemplet grundar sig på lösningen som går att finna i Every Layout, läs gärna mer där.

Som du kan se i exemplet så är det ganska mycket innehåll i sidebar delen, men det kan likväl vara enbart navigation.

See the Pen Sidebar layout by Jens Andreasson (@jensadev) on CodePen.

Utöka

Med hjälp av css så är det tämligen enkelt att byta placering på sidebaren, från vänster till höger. Detta görs genom att byta ordningen på elementen med flex-direction.

.with-sidebar {
  flex-direction: row-reverse;
}

Testa även att kombinera detta exempel med layout och hjälpklasserna från tidigare exempel. Kombinera centrering med sidebar layouten och navbar till exempel.