✨ 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>

site/src/components/file/style.styl

@@ -2,7 +2,7 @@
     position absolute
     top 0
     right 0
-    left 315px
+    left 290px
     right 0
     height 100%
 
@@ -54,7 +54,7 @@ header
         display block
         position absolute
         top 0
-        left 50px
+        left 51px
         width 58px
         height 50px
         padding-top 13px

site/src/components/landing/style.styl

@@ -20,7 +20,7 @@
     position absolute
     top 0
     right 0
-    width 75%
+    left 290px
     height 100%
     background #2D2D49
     font-family 'DINNextRoundedLTPro'
@@ -46,7 +46,7 @@
         &.astronaut
             top 60px
             left 70px
-            animation illustration-astronaut 6s infinite alternate
+            animation illustration-astronaut 6s ease-in-out infinite alternate
             will-change transform
 
             @keyframes illustration-astronaut
@@ -58,7 +58,7 @@
         &.book
             top 170px
             left 150px
-            animation illustration-book 4.5s infinite alternate
+            animation illustration-book 4.5s ease-in-out infinite alternate
             will-change transform
 
             @keyframes illustration-book
@@ -73,7 +73,7 @@
             width 8px
             height 8px
             opacity 0
-            animation illustration-star 4.5s infinite alternate
+            animation illustration-star 4.5s ease-in-out infinite alternate
             will-change opacity
 
             @keyframes illustration-star
@@ -82,7 +82,6 @@
                 100%
                     opacity 1
 
-
             .bar
                 position absolute
                 background #fff

site/src/components/project/script.js

@@ -31,7 +31,7 @@ export default
 
         file()
         {
-            return this.$store.state.files.current
+            return this.$store.state.files.currentFile
         }
     },
 

site/src/components/viewer/script.js

@@ -16,7 +16,7 @@ export default
     {
         extension()
         {
-            return this.$store.state.files.current.extension
+            return this.$store.state.files.currentFile.extension
         },
 
         version()

site/src/store/modules/files.js

@@ -4,7 +4,7 @@ export default {
     state:
     {
         tree: new FileTree({ autoWash: true }),
-        current: null,
+        currentFile: null,
         currentVersion: null,
         currentLine: null,
         search: ''
@@ -37,16 +37,26 @@ export default {
         },
 
         setFile(state, data)
+        {
+            // Null file
+            if(!data)
+            {
+                state.currentFile = data
+            }
+
+            // File path
+            else
             {
                 // Retrieve file from path
                 const file = state.tree.getFile(data)
 
                 // No current file or file different than current
-            if(!state.current || state.current.id !== file.id)
+                if(!state.currentFile || state.currentFile.id !== file.id)
                 {
-                state.current = file
+                    state.currentFile = file
-                state.current.isNew = false
+                    state.currentFile.isNew = false
-                state.current.isChanged = false
+                    state.currentFile.isChanged = false
+                }
             }
         },
 
@@ -67,7 +77,7 @@ export default {
             if(typeof data === 'string')
             {
                 // Find version by date
-                const version = state.current.versions.find((version) => version.date === data)
+                const version = state.currentFile.versions.find((version) => version.date === data)
 
                 // Found
                 if(version)