started search block in header

src/components/block/LoginBlock.vue

@@ -5,6 +5,10 @@ import { mapState } from 'pinia'
 // import router from 'vuejs/route'
 import { UserStore } from '@/stores/user'
 
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiLoginVariant } from '@mdi/js';
+
+
 export default {
   setup() {
     const userStore = UserStore()
@@ -17,7 +21,8 @@ export default {
     return {
       template: null,
       mail: '',
-      passwd: ''
+      passwd: '',
+      login_path: mdiLoginVariant
     }
   },
   computed: {
@@ -49,13 +54,19 @@ export default {
       //   })
       // })
     }
+  },
+  components: {
+    SvgIcon
   }
 }
 </script>
 
 <template>
   <div id="login-block">
-    <span>connexion</span>
+    <label>
+      <svg-icon type="mdi" :path="login_path"></svg-icon>
+      <span>connexion</span>
+    </label>
     <form action="" @submit.prevent="onSubmitLogin">
       <input type="email" placeholder="email" name="email" v-model="mail">
       <input type="password" placeholder="mot de passe" name="passwd" v-model="passwd">
@@ -66,7 +77,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $pad: 1em;
+  $pad: 0.75em;
   #login-block{
     position: relative;
 
@@ -79,7 +90,7 @@ export default {
       border-radius: 5px;
       padding: 0 $pad;
       position: absolute;
-      bottom: 100%;
+      bottom: 110%;
       left: -$pad;
       >*{
         margin: 0 0 0.5em 0;
@@ -87,7 +98,7 @@ export default {
       overflow: hidden;
       max-height:1px;
       opacity: 0;
-      $delay: 4s;
+      $delay: 0.5s;
       transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
     }
     &:hover{

src/components/block/SearchBlock.vue

@@ -0,0 +1,86 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { StaticsStore } from '@/stores/statics'
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiMagnify } from '@mdi/js';
+
+export default {
+  props: [],
+  data(){
+    return {
+      magnify_path: mdiMagnify
+    }
+  },
+  computed: {
+    ...mapState(StaticsStore,['statics'])
+  },
+  created () {
+    console.log("search created");
+    // this.loadStatics()
+  },
+  methods: {
+    ...mapActions(StaticsStore,['loadStatics']),
+    onSubmitSearch (event) {
+      console.log("onSubmitSearch", event);
+    }
+  },
+  components: {
+    SvgIcon
+  }
+}
+
+</script>
+
+<template>
+  <div id="search-block">
+    <label for="">
+      <svg-icon type="mdi" :path="magnify_path"></svg-icon>
+      <span>recherche</span>
+    </label>
+    <form action=""  @submit.prevent="onSubmitSearch">
+      <input type="text">
+      <input type="submit" value="rechercher">
+    </form>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  $pad: 0.75em;
+  #search-block{
+    position: relative;
+
+    span{
+      display: inline-block;
+      @include btn();
+    }
+    form{
+      background-color: #fff;
+      border-radius: 5px;
+      padding: 0 $pad;
+      position: absolute;
+      bottom: 110%;
+      left: -$pad;
+      >*{
+        margin: 0 0 0.5em 0;
+      }
+      overflow: hidden;
+      max-height:1px;
+      opacity: 0;
+      $delay: 0.5s;
+      transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
+    }
+    &:hover{
+      form{
+        box-shadow: 0 0 5px $btns_back;
+        padding: $pad;
+        max-height: 100px;
+        opacity: 1;
+        transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
+      }
+    }
+  }
+  
+</style>

src/components/block/StaticMenu.vue

@@ -3,11 +3,15 @@
 import { mapActions, mapState } from 'pinia'
 import { StaticsStore } from '@/stores/statics'
 
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiInformationOutline } from '@mdi/js';
+
+
 export default {
   props: [],
   data(){
     return {
-      // block: null
+      infos_path: mdiInformationOutline
     }
   },
   computed: {
@@ -21,22 +25,27 @@ export default {
     ...mapActions(StaticsStore,['loadStatics'])
   },
   components: {
-    // LoginBlock,
-    // UserTools
+    SvgIcon
   }
 }
 
 </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>
+  <div id="static-menu">
+    <ul>
+      <li
+          v-for="staticnode in statics"
+          v-bind:key="staticnode.id"
+        >
+        <router-link :to="{ name: 'static', params: { id:staticnode.id } }">
+          <svg-icon type="mdi" :path="infos_path"></svg-icon>
+          <span>{{staticnode.title}}</span>
+        </router-link>
+      </li>
+    </ul>
+
+  </div>
   
 </template>