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="main">
      ...

2. Add a new data property called notes--it will be the array containing all of our notes:

      data () {
        return {
          content: ...
          // New! A note array
          notes: [],
        }
      },

A method to create a new note

Each of our notes will be an object...