From 0fc1cd12ddd5a2b3814587e2a92a1a33c751686e Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Sun, 13 Aug 2023 12:42:40 +0200
Subject: [PATCH] started search block in header

---
 src/App.vue                          |  5 +-
 src/assets/layout.scss               |  2 +-
 src/assets/main.scss                 | 25 +++++++-
 src/components/block/LoginBlock.vue  | 21 +++++--
 src/components/block/SearchBlock.vue | 86 ++++++++++++++++++++++++++++
 src/components/block/StaticMenu.vue  | 31 ++++++----
 src/views/Concernement.vue           |  2 +-
 7 files changed, 151 insertions(+), 21 deletions(-)
 create mode 100644 src/components/block/SearchBlock.vue

diff --git a/src/App.vue b/src/App.vue
index 604905c..4f7e34a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@ import { ConcernementsStore } from '@/stores/concernements'
 
 import StaticMenu from '@components/block/StaticMenu.vue'
 import UserBlock from '@components/block/UserBlock.vue'
+import SearchBlock from '@components/block/SearchBlock.vue'
 
 import MapConcernements from '@components/MapConcernements.vue'
 import ConcernementMapItem from '@components/ConcernementMapItem.vue'
@@ -35,7 +36,8 @@ export default {
     MapConcernements,
     ConcernementMapItem,
     StaticMenu,
-    UserBlock
+    UserBlock,
+    SearchBlock
   }
 }
 
@@ -48,6 +50,7 @@ export default {
     </h1>
     <div class="row top">
       <StaticMenu/>
+      <SearchBlock/> 
       <UserBlock/>
     </div>
   </header>
diff --git a/src/assets/layout.scss b/src/assets/layout.scss
index 244dc89..e770777 100644
--- a/src/assets/layout.scss
+++ b/src/assets/layout.scss
@@ -29,7 +29,7 @@ html,body{
   bottom:0;
   left:0;
   width: 100vw;
-  padding: 1rem 0;
+  padding: 1rem 1em;
   >.row{
     @include layout-row();
   }
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 5359b79..851dd16 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -21,10 +21,15 @@ body{
 #app>header#header{
   // background-color: $front;
   pointer-events: none;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
   .row{
     display: flex;
     flex-direction: row;
     pointer-events: none;
+    margin: 0;
+    padding: 0;
     >*{
       margin-right: 1em;
       pointer-events: all;
@@ -34,8 +39,24 @@ body{
   }
   h1.row{
     font-family: "avara";
-    span.title{
-      font-size: 2em;
+    margin: 0 1em 0 0;
+    a{
+      margin: 0;
+      span.title{
+        font-size: 2em;
+      }
+
+    }
+  }
+
+  .row.top{
+    >*{
+      label,a{
+        padding: 0;
+        span{
+          display:none;
+        }
+      }
     }
   }
 
diff --git a/src/components/block/LoginBlock.vue b/src/components/block/LoginBlock.vue
index 404978e..3afb0bd 100644
--- a/src/components/block/LoginBlock.vue
+++ b/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{
diff --git a/src/components/block/SearchBlock.vue b/src/components/block/SearchBlock.vue
new file mode 100644
index 0000000..f2fc579
--- /dev/null
+++ b/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>
diff --git a/src/components/block/StaticMenu.vue b/src/components/block/StaticMenu.vue
index 8ede823..67a536c 100644
--- a/src/components/block/StaticMenu.vue
+++ b/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>
 
diff --git a/src/views/Concernement.vue b/src/views/Concernement.vue
index 6ec5f3a..e7425ef 100644
--- a/src/views/Concernement.vue
+++ b/src/views/Concernement.vue
@@ -117,7 +117,7 @@ export default {
         </mask>
         <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
       </svg> 
-    </nav>  
+    </nav>
   </section>
 </template>