Début avec des transitions qui marchent

src/assets/main.css

@@ -1,7 +1,8 @@
 @import './base.css';
 
+/* VUE STYLE */
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
@@ -33,3 +34,73 @@ a,
     padding: 0 2rem;
   }
 }
+
+/* SIDEBAR NAVIGATION */
+.sidenav {
+  position: fixed;
+  z-index: 1;
+  top: 60px; /* 60px is the height of the header navbar */
+  left: 0;
+  height: 100%;
+  width: 200px; /* 200px is the width of the header vl position */
+  background-color: #111;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+}
+
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+.main {
+  margin-left: 200px; /* 200px is the width of the header vl position */
+  /* padding: 0px 10px; */
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {
+    padding-top: 15px;
+  }
+  .sidenav a {
+    font-size: 18px;
+  }
+}
+
+/* ROUTE HIGHLIGHT */
+.router-link-exact-active {
+  border-left: 5px solid rgb(0, 255, 140);
+}
+
+/* FADE TRANSITION */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* SLIDE FADE TRANSITION */
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}