Nelle applicazioni moderne per il web, troviamo raramente layout con sidebar laterale. Dietro a questa scelta possono esserci numerosi motivi, tra cui il cambio di abitudini dell'utente medio, che si aspetta di trovare tutte le opzioni in cima o a fine pagina, ma anche lo spostamento della fruzione del web da desktop a mobile.

La sidebar in alcuni contesti risulta comunque utile: in pagine di ricerca articoli possiamo utilizzarla per effettuare una ricerca o applicare dei filtri. Il problema resta però lo stesso: come gestisco una sidebar visualizzata su schermo piccolo? Con un layout flex è possibile, utilizzando solamente il CSS, muovere la sidebar in testa o ai piedi del contenuto di pagina, mantenendo un design pulito. Vediamo come costruire lo scheletro della pagina e applicare il CSS utilizzando anche media-query.

<div class="wrapper">
  <!--sidebar-->
  <aside>
    <ul>      <li>filtro1</li>
      <li>filtro2</li>
      <li>filtro3</li>
    </ul>
  </aside>
  <!--contenuto-->
  <main>
    <div class="wrapper_inner">
      <p>        Testo
      </p>
      </p>
    </div>
  </main>
</div>

In questo codice HTML, utilizziamo la classe wrapper per impostare lo stile display: flex; e wrapper_inner per separare il testo dal bordo del contenitore. Possiamo anche impostare lo stile della lista puntando l'elemento aside.

ul {
  list-style: none;
}
li {
  color: #fff;
}
aside {
  border-right:  1px solid #ededed;
  background: #36c;
  flex: 1 0 10%;
  padding: 1rem;
}
.wrapper {
  display: flex;
  height: 100%;
}
.wrapper_inner {
  width: 90%;
  margin: 0px auto;
}

Non resta altro che gestire la parte mobile. Attraverso una media-query cambiamo l'orientamento della sidebar/contenuto e degli elementi della lista valorizzando flex-direction.

@media (max-width: 700px) {
  .wrapper {
    flex-direction: column;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
}

Nel caso in cui volessimo spostare la sidebar a fondo pagina possiamo utilizzare lo style CSS column-reverse.

.wrapper {
  flex-direction: column-reverse;
}