BGDIINF_SB-2890 : move projection toggle into a debug toolbar

src/modules/menu/MenuModule.vue

@@ -40,8 +40,8 @@
                 :active="showTimeSlider"
                 @click="showTimeSlider = !showTimeSlider"
             />
-            <ToggleProjectionButton v-if="!inDrawingMode" />
         </div>
+        <DebugToolbar v-if="hasDevSiteWarning" class="position-absolute end-0 top-50" />
         <div
             class="menu-tray-container position-absolute w-100 h-100"
             :class="{
@@ -81,20 +81,20 @@
 
 <script>
 import BlackBackdrop from '@/modules/menu/components/BlackBackdrop.vue'
+import DebugToolbar from '@/modules/menu/components/debug/DebugToolbar.vue'
 import HeaderWithSearch from '@/modules/menu/components/header/HeaderWithSearch.vue'
 import MenuTray from '@/modules/menu/components/menu/MenuTray.vue'
 import TimeSlider from '@/modules/menu/components/timeslider/TimeSlider.vue'
 import GeolocButton from '@/modules/menu/components/toolboxRight/GeolocButton.vue'
 import TimeSliderButton from '@/modules/menu/components/toolboxRight/TimeSliderButton.vue'
 import Toggle3dButton from '@/modules/menu/components/toolboxRight/Toggle3dButton.vue'
-import ToggleProjectionButton from '@/modules/menu/components/toolboxRight/ToggleProjectionButton.vue'
 import ZoomButtons from '@/modules/menu/components/toolboxRight/ZoomButtons.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { mapActions, mapGetters, mapState } from 'vuex'
 
 export default {
     components: {
-        ToggleProjectionButton,
+        DebugToolbar,
         Toggle3dButton,
         FontAwesomeIcon,
         TimeSlider,

src/modules/menu/components/debug/DebugToolbar.vue

@@ -0,0 +1,68 @@
+<template>
+    <div
+        class="debug-tools card border-danger rounded-end-0"
+        :class="{ collapsed: !showDebugTool }"
+    >
+        <div class="position-relative h-100 d-flex">
+            <div
+                class="debug-tools-header p-2 bg-danger-subtle border-end border-danger"
+                @click="showDebugTool = !showDebugTool"
+            >
+                <FontAwesomeIcon icon="gear" />
+                <div class="text-vertical text-nowrap">Debug tools</div>
+            </div>
+            <div class="debug-tools-body">
+                <div class="card-body">
+                    <h5 class="text-decoration-underline">Map projection</h5>
+                    <div class="my-1 d-flex align-content-center">
+                        <strong class="me-2 align-self-center">
+                            {{ currentProjection.epsg }}
+                        </strong>
+                        <ToggleProjectionButton class="align-self-center" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ToggleProjectionButton from '@/modules/menu/components/debug/ToggleProjectionButton.vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+const showDebugTool = ref(false)
+const currentProjection = computed(() => store.state.position.projection)
+</script>
+
+<style lang="scss" scoped>
+.debug-tools {
+    height: 9rem;
+
+    $debugToolWidth: 12.5rem;
+    $debugToolHeaderWidth: 2rem;
+    width: $debugToolWidth;
+
+    transition: all 0.4s;
+    &.collapsed {
+        transform: translateX($debugToolWidth - $debugToolHeaderWidth);
+    }
+
+    &-header {
+        width: $debugToolHeaderWidth;
+        height: 100%;
+        cursor: pointer;
+    }
+    &-body {
+        width: $debugToolWidth - $debugToolHeaderWidth;
+        height: 100%;
+    }
+
+    .text-vertical {
+        transform: translateY(300%) rotate(-90deg);
+    }
+}
+</style>

src/modules/menu/components/toolboxRight/ToggleProjectionButton.vue → src/modules/menu/components/debug/ToggleProjectionButton.vue

@@ -37,5 +37,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/modules/menu/scss/toolbox-buttons';
+@import '../../scss/toolbox-buttons';
 </style>