Explore pane now set from route

resources/js/Pages/Explore.vue

@@ -64,12 +64,7 @@ import Layout from '../Shared/Layouts/Layout.vue';
 import MapSheetLayout from '../Shared/Layouts/MapSheetLayout.vue';
 import LPBottomSheet from '../Shared/LPBottomSheet.vue';
 
-// panes
-import Alteration from './Explore/Alteration.vue';
-import NewConstruction from './Explore/NewConstruction.vue';
-import SalePrices from './Explore/SalePrices.vue';
-import Zoning from './Explore/Zoning.vue';
-import Layers from './Explore/Layers.vue';
+import panes from './Explore/panes';
 
 export default {
   components: {
@@ -79,29 +74,7 @@ export default {
   layout: [Layout, MapSheetLayout],
 
   data() {
-    return {
-      panes: [{
-        title: 'Sale Prices',
-        component: SalePrices,
-        route: 'sales',
-      }, {
-        title: 'Zoning',
-        component: Zoning,
-        route: 'zoning',
-      }, {
-        title: 'New Construction Permits',
-        component: NewConstruction,
-        route: 'construction',
-      }, {
-        title: 'Alteration Permits',
-        component: Alteration,
-        route: 'alteration',
-      }, {
-        title: 'Planning Overlays',
-        component: Layers,
-        route: 'layers',
-      }],
-    };
+    return { panes };
   },
 
   computed: {

resources/js/Pages/Explore/panes.js

@@ -0,0 +1,27 @@
+import Alteration from './Alteration.vue';
+import NewConstruction from './NewConstruction.vue';
+import SalePrices from './SalePrices.vue';
+import Zoning from './Zoning.vue';
+import Layers from './Layers.vue';
+
+export default [{
+  title: 'Sale Prices',
+  component: SalePrices,
+  route: 'sales',
+}, {
+  title: 'Zoning',
+  component: Zoning,
+  route: 'zoning',
+}, {
+  title: 'New Construction Permits',
+  component: NewConstruction,
+  route: 'construction',
+}, {
+  title: 'Alteration Permits',
+  component: Alteration,
+  route: 'alteration',
+}, {
+  title: 'Planning Overlays',
+  component: Layers,
+  route: 'layers',
+}];

resources/js/store/index.js

@@ -2,9 +2,15 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import { getField, updateField } from 'vuex-map-fields';
 import { parse } from 'papaparse';
+import panes from '../Pages/Explore/panes';
 
 Vue.use(Vuex);
 
+const getInitialPane = () => {
+  const { pane } = route().params;
+  return panes.findIndex((p) => p.route === pane);
+};
+
 export default new Vuex.Store({
   strict: true,
   state: {
@@ -28,7 +34,7 @@ export default new Vuex.Store({
     // from letsplanorg
     exploreIsExpanded: false,
     layersIsExpanded: true,
-    exploreCurrentPane: 0,
+    exploreCurrentPane: getInitialPane(),
     tourShown: false,
   },
   mutations: {