create home button

src/App.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="container">
-    <div class="l-sidebar"></div>
+  <div class="l-container">
+    <div class="l-sidebar">
+      <router-link :to="{ name: 'Home' }"><div id="logo"></div></router-link>
+      <hr id="logo-seperator" />
+      <Navigation />
+    </div>
     <div class="nav">
-      <div id="nav">
-        <router-link to="/">Home</router-link> |
-        <router-link to="/about">About</router-link>
-      </div>
+      <div id="nav"></div>
     </div>
     <div class="content">
       <router-view />
@@ -14,67 +15,37 @@
   </div>
 </template>
 
+<script>
+import Navigation from "./components/LeftSidebar/Navigation.vue";
+
+export default {
+  components: {
+    Navigation,
+  },
+  setup() {},
+};
+</script>
+
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+#logo {
+  height: 60px;
+  width: 200px;
+  background: url(./assets/logo.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
-#nav {
-  padding: 30px;
+.l-container #logo-seperator {
+  margin-left: -1em;
+  border: 1px solid;
+  color: rgba(255, 255, 255, 0.514);
+  margin-bottom: 1em;
 }
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-
-.container {
-  display: grid;
-  grid-template-columns: 50px 4fr 0fr;
-  grid-template-rows: 0.1fr 1fr 1fr;
-  /* grid-auto-columns: 1fr 1fr 1fr;
-  grid-auto-rows: 1fr 1fr 1fr; */
-  gap: 4px;
-  grid-auto-flow: row;
-  grid-template-areas:
-    "l-sidebar nav nav"
-    "l-sidebar content r-sidebar"
-    "l-sidebar content r-sidebar";
-  width: 100vw;
-  height: 100vh;
-}
-
-.l-sidebar {
-  grid-area: l-sidebar;
-  border: solid;
-  /* height: calc(100vh - 98px); */
-}
-
-.nav {
-  grid-area: nav;
-  border: solid;
-  max-height: 70px;
-}
-
-.content {
-  grid-area: content;
-  border: solid;
-}
-body {
-  margin: 0;
-}
-
-.r-sidebar {
-  grid-area: r-sidebar;
-  border: solid;
-  /* max-width: 500px; */
+.l-container #l-home-icon {
+  height: 40px;
+  width: 40px;
+  background: red;
 }
 </style>