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{