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.
We will now lay the groundwork for the side pane containing the list of notes:
- Add a new
asideelement with theside-barclass 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">
...- 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: [],
}
},