✨ Site > Add header

site/src/components/application/script.js

@@ -47,6 +47,12 @@ export default
 
             // Delete the DIV
             this.$el.removeChild(dummy)
+        },
+
+        onHeaderClick()
+        {
+            console.log('click')
+            this.$store.commit('setFile', null)
         }
     }
 }

site/src/components/application/style.styl

@@ -20,6 +20,54 @@ a
     left 0
     overflow scroll
 
+// Header
+.application-header
+    position absolute
+    top 0
+    left 0
+    width 290px
+    height 80px
+    background #393855
+
+    a
+        display block
+        position absolute
+        top 0
+        left 0
+        width 100%
+        height 100%
+
+    .element
+        position absolute
+
+        &.background
+            top 0
+            left 0
+
+        &.robot-container
+            top 17px
+            left 52px
+            animation header-robot-container 3s alternate infinite ease-in-out
+
+            @keyframes header-robot-container
+                0%
+                    transform translateX(-5px)
+                100%
+                    transform translateX(5px)
+
+        &.robot
+            animation header-robot 4.15s alternate infinite ease-in-out
+
+            @keyframes header-robot
+                0%
+                    transform translateY(-3px)
+                100%
+                    transform translateY(3px)
+
+        &.title
+            top 21px
+            left 112px
+
 // Reset
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

site/src/components/application/template.html

@@ -1,5 +1,19 @@
 <div id="application">
+    <!-- Connexion -->
     <connexion></connexion>
+
+    <!-- Header -->
+    <a class="application-header" href="#" @click.prevent="onHeaderClick">
+        <img class="element background" src="../../../static/svg/header-background.svg" alt="">
+        <span class="element robot-container">
+            <img class="element robot" src="../../../static/svg/header-robot.svg" alt="">
+        </span>
+        <img class="element title" src="../../../static/svg/keppler-title.svg" alt="">
+    </a>
+
+    <!-- Projects -->
     <projects></projects>
+
+    <!-- Project -->
     <project v-if="project"></project>
 </div>