added query parameters to galleries page

components/GalleryFeatured.vue

@@ -17,6 +17,13 @@ export default {
       type: Array,
       required: true
     },
+    galleryActive: {
+      type: Number,
+      required: false,
+      default () {
+        return 0
+      },
+    }
   },
 }
 </script>

components/GalleryPage.vue

@@ -12,6 +12,7 @@
       <h1 class="page-heading page-title">My Galleries</h1>
       <GalleryFeatured class="gallery__featured"
                        :galleries="galleries"
+                       :gallery-active="activeGalleryIndex"
                        @clicked="handleFeaturedClick" />
       <GalleryThumbs class="gallery__thumbs"
                      :featured-height="featuredImageHeight"
@@ -64,6 +65,8 @@ export default {
   methods: {
     handleFeaturedClick (index) {
       this.activeRow = index
+      this.activeGalleryIndex = index
+      this.$router.push({path: this.$route.path, query: { gallery: this.galleries[index].id}})
     },
     handleThumbClick(gallery, image) {
       this.activeGalleryIndex = gallery

pages/galleries.vue

@@ -17,6 +17,7 @@ export default {
     return {
       galleries: [
         { title: 'Portraits',
+          id: '1',
           featuredImage: 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/portraits-4-600x400.jpeg',
           images: [
             { thumbUrl: 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/portraits-4-600x400.jpeg', url: 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/portraits-4-1800x1200.jpeg' },
@@ -26,6 +27,7 @@ export default {
           ]
         },
         { title: 'Flowers',
+          id: '2',
           featuredImage: 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/flowers-5-600x402.jpeg',
           images: [
             { thumbUrl: 'https://via.placeholder.com/400x300/ff0000/ffffff', url: 'https://via.placeholder.com/1920x1080/ff0000/ffffff?text=One0' },
@@ -39,6 +41,7 @@ export default {
           ]
         },
         { title: 'The Longest Title for a Gallery That You Could Ever Imagine (Unless You Have a Really Good Imagination - And Then You Could Probably Think of a Really Big One)',
+          id: '3',
           featuredImage: 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/music-4-600x400.jpg',
           images: [
             { thumbUrl: 'https://via.placeholder.com/400x300', url: 'https://via.placeholder.com/1920x1080' },
@@ -48,6 +51,7 @@ export default {
           ]
         },
         { title: 'Gallery Three',
+          id: '4',
           featuredImage: 'https://via.placeholder.com/600x400',
           images: [
             { thumbUrl: 'https://via.placeholder.com/400x300', url: 'https://via.placeholder.com/1920x1080' },
@@ -57,6 +61,7 @@ export default {
           ]
         },
         { title: 'Gallery Four',
+          id: '5',
           featuredImage: 'https://via.placeholder.com/600x400',
           images: [
             { thumbUrl: 'https://via.placeholder.com/400x300', url: 'https://via.placeholder.com/1920x1080' },
@@ -66,6 +71,7 @@ export default {
           ]
         },
         { title: 'Gallery Five',
+          id: '6',
           featuredImage: 'https://via.placeholder.com/600x400',
           images: [
             { thumbUrl: 'https://via.placeholder.com/400x300', url: 'https://via.placeholder.com/1920x1080' },
@@ -75,6 +81,7 @@ export default {
           ]
         },
         { title: 'Gallery Six',
+          id: '7',
           featuredImage: 'https://via.placeholder.com/600x400',
           images: [
             { thumbUrl: 'https://via.placeholder.com/400x300', url: 'https://via.placeholder.com/1920x1080' },