updated header and routing

Author: Ghost-Rider-gu

JavaScriptWorld/src/App.vue

@@ -1,36 +1,37 @@
 <template>
-  <div class="container">
-    <Header />
-    <div class="row">
-      <div class="col">
+    <header>
+      <Header />
+    </header>
+    <main class="container flex flex-col-reverse md:flex-row items-center px-1 mx-auto mt-1 space-y-0 md:space-y-0">
+      <aside class="flex flex-col mb-32 space-y-1 md:w-1/2">
         <TreeView />
-      </div>
-      <div class="col">
-        <Article />
-      </div>
-    </div>
-    <Footer />
-  </div>
+      </aside>
+      <article class="flex flex-col mb-32 space-y-12 md:w-1/2">
+        <router-view></router-view>
+      </article>
+    </main>
+    <footer>
+      <Footer />
+    </footer>
 </template>
 
 <script>
-import TreeView from "./components/TreeView.vue";
-import Article from './components/Article.vue';
-import Footer from "./components/layouts/Footer.vue";
-import Header from "./components/layouts/Header.vue";
+import TreeView from './components/TreeView.vue';
+import Footer from './components/layouts/Footer.vue';
+import Header from './components/layouts/Header.vue';
 
 export default {
   components: {
     TreeView,
-    Article,
     Footer,
-    Header,
-  }
+    Header
+}
 };
 </script>
 
 <style>
 @import url("https://fonts.googleapis.com/css2?family=Acme&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
 * {
   box-sizing: border-box;
@@ -39,11 +40,10 @@ export default {
 }
 
 body {
-  font-family: "Courier New", Courier, monospace;
+  font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   color: black;
-  height: 100vh;
   background: white;
-  padding: 10px;
+  padding: 20px;
 }
 </style>

JavaScriptWorld/src/components/layouts/Header.vue

@@ -14,18 +14,25 @@
     </div>
     <div class="hidden md:flex justify-between m-3 p-2 items-center bg-slate-100 md:justify-start md:space-x-10">
       <div class="hidden md:flex items-center space-x-10 justify-start lg:w-0 lg:flex-1">
-        <a href="#" class="text-slate-700 font-semibold hover:text-blue-500">REFRESH</a>
+        <a href="#" class="text-slate-700 font-semibold hover:text-blue-500"> REFRESH </a>
         <a href="#" class="text-slate-700 font-semibold hover:text-blue-500">
-          <router-link to="/statistics">STATISTICS</router-link>
+          <router-link to="/statistics"> STATISTICS </router-link>
+        </a>
+        <a href="#" class="text-slate-700 font-semibold hover:text-blue-500">
+          <router-link to="/about"> ABOUT </router-link>
+        </a>
+        <a href="#" class="text-blue-500 font-semibold">
+          <router-link to="/login"> LOG IN </router-link>
+        </a>
+        <a href="#" class="flex-row-reverse bg-blue-400 text-white font-semibold px-5 py-1 border-indigo-50 rounded-full shadow-xl hover:bg-blue-500">
+          <router-link to="/register"> SIGN UP </router-link>
         </a>
-        <a href="#" class="text-slate-700 font-semibold hover:text-blue-500">ABOUT</a>
-        <a href="#" class="flex-row-reverse bg-blue-400 text-white font-semibold px-5 py-1 border-indigo-50 rounded-full shadow-xl hover:bg-blue-500">LOG IN</a>
       </div>
       <div class="hidden md:flex justify-end space-x-10 bg-slate-100 items-center md:flex-1 lg:w-0">
         <form>
           <input type="search" placeholder="Search in articles" aria-label="Search" class="bg-white text-slate-500 font-light px-5 py-1 border border-gray-100 rounded-l-full shadow-xl" />
           <button class="bg-white text-slate-500 font-light px-5 py-1 baseline border border-gray-100 rounded-r-full shadow-xl hover:bg-gray-100" type="submit">
-            Search
+            SEARCH
           </button>
         </form>
       </div>