hide sidebar when toggling list view

src/components/Map/SidebarLayers.vue

@@ -3,10 +3,9 @@
     v-if="isOnline"
     :class="['sidebar-container', { expanded }]"
   >
-    <!-- <div class="sidebar-layers"></div> -->
     <div
       class="layers-icon"
-      @click="expanded = !expanded"
+      @click="toggleSidebar()"
     >
       <!-- // ! svg point d'interrogation pas accepté par linter -->
       <!-- <?xml version="1.0" encoding="iso-8859-1"?> -->
@@ -45,11 +44,6 @@
     <div class="basemaps-title">
       <h4>
         Fonds cartographiques
-
-        <!-- <span data-tooltip="Il est possible pour chaque fond cartographique de modifier l'ordre des couches"
-            data-position="bottom left">
-                <i class="question circle outline icon"></em>
-            </span> -->
       </h4>
     </div>
 
@@ -196,6 +190,10 @@ export default {
       return basemap.active !== undefined && basemap.active;
     },
 
+    toggleSidebar(value) {
+      this.expanded = value !== undefined ? value : !this.expanded;
+    },
+
     activateGroup(basemap) {
       this.baseMaps.forEach((basemap) => (basemap.active = false));
       basemap.active = true;

src/views/Project/FeaturesListAndMap.vue

@@ -21,7 +21,10 @@
           id="map"
           ref="map"
         />
-        <SidebarLayers v-if="basemaps && map" />
+        <SidebarLayers
+          v-if="basemaps && map"
+          ref="sidebar"
+        />
         <Geocoder />
         <div 
           id="popup" 
@@ -234,8 +237,10 @@ export default {
       'UPDATE_CHECKED_FEATURES'
     ]),
 
-    setShowMap(e) {
-      this.showMap = e;
+    setShowMap(newValue) {
+      this.showMap = newValue;
+      //* expanded sidebar is visible under the list, even when the map is closed (position:absolute), solved by closing it whin switching to list
+      if (newValue === false) this.$refs.sidebar.toggleSidebar(false);
     },
     resetPagination() {
       this.pagination = { ...initialPagination };