Adds popstate

app/assets/javascripts/repo/repo_file.js

 let RepoFile = {
   template: `
   <li>
-    <i class='fa' :class='file.icon'></i>
-    <a :href='file.url' @click.prevent='linkClicked(file)'>{{file.name}}</a>
+    <div class='col-md-4'>
+      <i class='fa' :class='file.icon'></i>
+      <a :href='file.url' @click.prevent='linkClicked(file)'>{{file.name}}</a>
+    </div>
+    <div class="col-md-4">
+      <span>{{JSON.stringify(file)}}</span>
+    </div>
   </li>
   `,
   props: {

app/assets/javascripts/repo/repo_sidebar.js

@@ -18,9 +18,21 @@ export default class RepoSidebar {
         'repo-file':RepoFile,
       },
 
+      created() {
+        this.addPopEventListener();
+      },
+
       data: () => Store,
 
       methods: {
+        addPopEventListener() {
+          window.addEventListener('popstate', () => {
+            this.linkClicked({
+              url: location.href
+            });
+          });
+        },
+
         linkClicked(file) {
           Service.url = file.url;
           Helper.getContent();

app/assets/stylesheets/framework/variables.scss

@@ -76,6 +76,7 @@ $red-900: #711e11;
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
+$almost-black: #242424;
 
 $border-white-light: darken($white-light, $darken-border-factor);
 $border-white-normal: darken($white-normal, $darken-border-factor);

app/assets/stylesheets/pages/repo.scss

@@ -2,6 +2,25 @@
   display: none;
 }
 
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0
+}
+
+.tree-content-holder {
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  color: $almost-black;
+
+header {
+  background: $gray-light;
+  padding: 10px 25px;
+  border-bottom: 1px solid $border-color;
+  font-size: $code_font_size;
+}
+
 #sidebar {
   ul {
     list-style-type: none;
@@ -9,6 +28,16 @@
     li {
       border-bottom: 1px solid $border-gray-normal;
       padding: 10px 20px;
+
+      a {
+        color: $almost-black;
+      }
+      .fa {
+        font-size: $code_font_size;
+        margin-right: 5px;
+      }
     }
   }
+}
+  
 }
\ No newline at end of file

app/views/projects/tree/_tree_content.html.haml

 .tree-content-holder
+  %header
+    Project
   #sidebar
     %ul
-      %repo-file{ "v-for"=> "file in files", ":file" => "file","@linkclicked" => "linkClicked(file)" }
+      %repo-file{ "v-for" => "file in files", ":key" => "file.id", ":file" => "file","@linkclicked" => "linkClicked(file)" }
   #ide{ data: { url: repo_url }, style: "height:400px;" }
 
   - if tree.readme