add sidebar layers to feature detail page

src/views/Feature/FeatureDetail.vue

@@ -33,22 +33,28 @@
           />
         </div>
         <div class="eight wide column">
-          <div
-            id="map"
-            ref="map"
-          />
-          <div
-            id="popup"
-            class="ol-popup"
-          >
-            <a
-              id="popup-closer"
-              href="#"
-              class="ol-popup-closer"
-            />
+          <div class="map-container">
             <div
-              id="popup-content"
+              id="map"
+              ref="map"
+            />
+            <SidebarLayers
+              v-if="basemaps && map"
+              ref="sidebar"
             />
+            <div
+              id="popup"
+              class="ol-popup"
+            >
+              <a
+                id="popup-closer"
+                href="#"
+                class="ol-popup-closer"
+              />
+              <div
+                id="popup-content"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -174,6 +180,8 @@ import FeatureHeader from '@/components/Feature/Detail/FeatureHeader';
 import FeatureTable from '@/components/Feature/Detail/FeatureTable';
 import FeatureAttachements from '@/components/Feature/Detail/FeatureAttachements';
 import FeatureComments from '@/components/Feature/Detail/FeatureComments';
+import SidebarLayers from '@/components/Map/SidebarLayers';
+
 import { buffer } from 'ol/extent';
 
 export default {
@@ -183,7 +191,8 @@ export default {
     FeatureHeader,
     FeatureTable,
     FeatureAttachements,
-    FeatureComments
+    FeatureComments,
+    SidebarLayers,
   },
 
   beforeRouteUpdate (to, from, next) {
@@ -224,6 +233,7 @@ export default {
       isDeleting: false,
       isLeaving: false,
       isSavingChanges: false,
+      map: null,
       slugSignal: '',
     };
   },
@@ -249,6 +259,9 @@ export default {
     ...mapGetters([
       'permissions',
     ]),
+    ...mapState('map', [
+      'basemaps',
+    ]),
 
     hasUnsavedChange() {
       if (this.project.fast_edition_mode && this.form && this.currentFeature) {
@@ -479,7 +492,7 @@ export default {
       // - if one basemap exists, we load the layers of the first one
       // - if not, load the default map and service options
       let layersToLoad = null;
-      var baseMaps = this.$store.state.map.basemaps;
+      const baseMaps = this.basemaps;
       var layers = this.$store.state.map.availableLayers;
       if (baseMaps && baseMaps.length > 0) {
         const basemapIndex = 0;
@@ -579,11 +592,19 @@ export default {
 </script>
 
 <style scoped>
+.map-container {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  background-color: #fff;
+}
 #map {
   width: 100%;
   height: 100%;
   min-height: 250px;
   max-height: 70vh;
+  border: 1px solid grey;
 }
 .prewrap {
   white-space: pre-wrap;