layout, mdi, static menu & page, font, ...

src/components/Header.vue

@@ -0,0 +1,46 @@
+<script>
+
+import { mapState } from 'pinia'
+import { UserStore } from '@/stores/user'
+import UserBlock from '@components/block/UserBlock.vue'
+import StaticMenu from '@components/block/StaticMenu.vue'
+
+
+export default {
+  // data(){
+  //   return {
+  //     block: null
+  //   }
+  // },
+  computed: {
+    ...mapState(UserStore,['isloggedin'])
+  },
+  methods: {
+    
+  },
+  components: {
+    UserBlock,
+    StaticMenu
+  }
+}
+
+</script>
+
+<template>
+    <header>
+    <div class="row top">
+      <h1>
+        <router-link :to="{ name: 'home' }">Où atterrir</router-link>  
+      </h1>
+    </div>
+    <div class="row bottom">
+      <StaticMenu/>
+      <UserBlock/>
+    </div>
+  </header>
+
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/MapConcernements.vue

@@ -34,7 +34,7 @@ export default {
 
 <template>
   <div id="map-concernements">
-    <h1>Concernements</h1>
+    <!-- <h1>Concernements</h1> -->
     <!-- <canvas rel="canvas-map"></canvas> -->
     <ul>
       <li

src/components/block/StaticMenu.vue

@@ -0,0 +1,56 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { StaticsStore } from '@/stores/statics'
+
+export default {
+  props: [],
+  data(){
+    return {
+      // block: null
+    }
+  },
+  computed: {
+    ...mapState(StaticsStore,['statics'])
+  },
+  created () {
+    console.log("infos created");
+    this.loadStatics()
+  },
+  methods: {
+    ...mapActions(StaticsStore,['loadStatics'])
+  },
+  components: {
+    // LoginBlock,
+    // UserTools
+  }
+}
+
+</script>
+
+<template>
+  <ul>
+    <li
+        v-for="staticnode in statics"
+        v-bind:key="staticnode.id"
+      >
+      <router-link :to="{ name: 'static', params: { id:staticnode.id } }">{{staticnode.title}}</router-link>
+    </li>
+  </ul>
+  
+</template>
+
+<style lang="scss" scoped>
+  ul{
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+  }
+  li{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+</style>

src/components/block/UserBlock.vue

@@ -7,6 +7,7 @@ import { UserStore } from '@/stores/user'
 import LoginBlock from '@components/block/LoginBlock.vue'
 import UserTools from '@components/block/UserTools.vue'
 
+
 // import MA from '/api/ma-axios'
 
 export default {

src/components/block/UserTools.vue

@@ -1,22 +1,7 @@
-<template>
-  <div id="user-tools">
-    <a class="mdi mdi-account" href="/user">
-      <span>{{ name }}</span>
-      <!-- <span v-else>{{ mail }}</span> -->
-    </a><br/>
-    <a href="/user/logout"
-      @click.prevent="onLogout()"
-      class="mdi mdi-logout"
-      title="logout"
-    >logout</a>
-  </div>
-</template>
-
 <script>
 import { mapState } from 'pinia'
 import { UserStore } from '@/stores/user'
 
-
 export default {
   setup() {
     const userStore = UserStore()
@@ -36,9 +21,32 @@ export default {
         console.log('UserTools user logged-out then')
       })
     }
+  },
+  components: {
+    // Loggout
   }
 }
 </script>
 
-<style lang="css" scoped>
+<template>
+  <div id="user-tools">
+    <a class="mdi mdi-account" href="/user">
+      <span>{{ name }}</span>
+      <!-- <span v-else>{{ mail }}</span> -->
+    </a><br/>
+    <a href="/user/logout"
+      @click.prevent="onLogout()"
+      class="mdi mdi-logout"
+      title="logout"
+    />
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+  #user-tools{
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+  }
 </style>