first draft of gradient+trame background

src/components/MapConcernements.vue

@@ -1,12 +1,14 @@
 <script>
 
+import Granim from 'granim'
 // import { mapActions, mapState } from 'pinia'
 import { computed } from 'vue'
 // import LoginBlock from '@components/block/LoginBlock.vue'
-// import UserTools from '@components/block/UserTools.vue'
+import MapBackground from '@components/MapBackground.vue'
 
 // import MA from '/api/ma-axios'
 
+
 // https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
 
 export default {
@@ -16,7 +18,9 @@ export default {
         canvas: null,
         ctx: null
       },
-      animateEvent: new Event('animate')
+      animateEvent: new Event('animate'),
+      granim: null
+
     }
   },
   provide() {
@@ -45,16 +49,44 @@ export default {
     }
   },
   beforeUpdate () {
+  },
+  components: {
+    MapBackground
   }
 }
 
 </script>
 
 <template>
+  <div id="map-backgrounds">
+    <MapBackground />
+  </div>
   <div id="map-concernements">
     <canvas ref="canvas-map"></canvas>
     <slot></slot>
   </div>
+  <nav id="map-nav">
+    <ul>
+      <li>
+        <a href="#terraindevie">terrain de vie</a>
+      </li>
+      <li>
+        <a href="#proximite">proximité</a>
+      </li>
+      <li>
+        <a href="#superposition">superposition</a>
+      </li>
+      <li>
+        <a href="#puissancedagir">puissance d'agir</a>
+      </li>
+      <li>
+        <a href="#action">action</a>
+      </li>
+      <li>
+        <a href="#doleancer">doléancer</a>
+      </li>
+    </ul>
+  </nav>
 </template>
 
 <style lang="css" scoped>