text: new Vue({
    el: '#app',
    data: {
      title: 'VueJS Course',
  
      vue2: {
        'Section 23': {
          'Hello World!': 'Sections/Section23/part1/index.html'
        },
        'Section 24': {
          'Using variables, functions & template': 'Sections/Section24/part1/index.html',
          'Exercise 1': 'Exercises/Exercise1/index.html',
          'Events & updating the DOM': 'Sections/Section24/part2/index.html',
          'Exercise 2': 'Exercises/Exercise2/index.html',
          'Updating variables with input field': 'Sections/Section24/part3/index.html',
          'Computed & watched variables': 'Sections/Section24/part4/index.html',
          'Shorter syntax for v-on: & v-bind:': 'Sections/Section24/part5/index.html',
          'Exercise 3': 'Exercises/Exercise3/index.html',
          'Styling': 'Sections/Section24/part6/index.html',
          'Exercise 4': 'Exercises/Exercise4/index.html'
        },
        'Section 25': {
          'if, else & show': 'Sections/Section25/part1/index.html',
          'Displaying arrays and objects': 'Sections/Section25/part2/index.html',
          'Exercise 5': 'Exercises/Exercise5/index.html'
        },
        'Section 26': {
          'Monster Slayer': 'Sections/Section26/index.html'
        },
        'Section 27': {
          'Understanding lifespan of a vue instance': 'Sections/Section27/index.html'
        },
        'Section 28': {
          'Using development server': 'Sections/Section28/index.html'
        },
        'Section 29': {
          'Using components': 'Sections/Section29/part1/index.html',
          'Why components use functions for data': 'Sections/Section29/part2/index.html',
          'Local & global components': 'Sections/Section29/part3/index.html',
          'Root component': 'Sections/Section29/part4/index.html',
          'Exercise 6': 'Exercises/Exercise6/index.html'
        },
        'Section 30': {
          'Exercise 7': 'Exercises/Exercise7/index.html'
        },
        'Section 31': {
          'Using slots for components': 'Sections/Section31/index.html',
          'Exercise 8': 'Exercises/Exercise8/index.html'
        },
        'Section 32': {
          'Quotes Quota': 'Sections/Section32/index.html',
        },
        'Section 33': {
          'Form control': 'Sections/Section33/index.html',
          'Exercise 9': 'Exercises/Exercise9/index.html'
        },
        'Section 34': {
          'Directives': 'Sections/Section34/index.html',
          'Exercise 10': 'Exercises/Exercise10/index.html'
        },
        'Section 35': {
          'Filters and Mixins': 'Sections/Section35/index.html',
          'Exercise 11': 'Exercises/Exercise11/index.html'
        },
        'Section 36': {
          'Animations': 'Sections/Section36/part1/index.html',
          'The Super Quiz': 'Sections/Section36/part2/index.html',
          'Monster Slayer v2': 'Sections/Section36/part3/index.html'
        },
        'Section 37': {
          'HTTP': 'Sections/Section37/index.html'
        },
        'Section 38': {
          'Routing': 'Sections/Section38/index.html'
        },
        'Section 39': {
          'Modules': 'Sections/Section39/index.html'
        },
        'Section 40': {
          'Stock Trader': 'Sections/Section40/index.html'
        },
        'Section 42': {
          'Axios': 'Sections/Section42/index.html'
        },
        'Section 43': {
          'Authentication': 'Sections/Section43/index.html'
        },
      },
      darkMode: true,
    },
    computed: {
      myStyle() {
        let backgroundColor = this.darkMode ? "#111" : "#fff";
        let color = this.darkMode ? "#fff" : "#111";
        return { backgroundColor, color }
      }
    }
  });
  