Multiple notes

A notebook with only one note is not that useful, so let's turn it into a multiple note one. We will add a new side panel on the left with the list of notes, plus a few extra elements, such as a text field to rename the notes and a favorite toggle button.

The note list

We will now lay the groundwork for the side pane containing the list of notes:

1. Add a new aside element with the side-bar class before the main section:

      <!-- Notebook app -->
      <div id="notebook">

        <!-- Sidebar -->
        <aside class="side-bar">
          <!-- Here will be the note list -->
        </aside>

        <!-- Main pane -->
        <section class...