decomposition navbar

Author: zh.sundetov

src/App.vue

@@ -1,18 +1,18 @@
 <template>
-  <nav>
-    <router-link style="margin-right: 5px;" to="/">Home</router-link>
-    <router-link to="/about">Post blog</router-link>
-  </nav>
+  <div class="app">
+    <navbar/>
+  </div>
 <router-view/>
 
 </template>
 <script>
 import PostList from "@/views/components/post-blog-components/PostList";
 import PostForm from "@/views/components/post-blog-components/PostForm";
+import Navbar from "@/views/components/navbar/Navbar"
 
 export default {
   components: {
-    PostForm, PostList
+    PostForm, PostList, Navbar
   },
   data: function () {
     return {
@@ -35,8 +35,10 @@ export default {
 }
 </script>
 <style scoped>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
+
+.app {
+  font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="post-blog">
     <post-form @create="createPost($event)" />
     <post-list :posts="posts"/>
   </div>
@@ -31,4 +31,9 @@ export default {
   }
 
 }
-</script>
+</script>
+<style scoped>
+.post-blog {
+  font-family: 'Roboto', sans-serif;
+}
+</style>

src/views/PostBlogView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="navbar" style="">
+    <div>
+      <router-link to="/">Home</router-link>
+    </div>
+    <div>
+      <router-link to="/about">Post blog</router-link>
+    </div>
+  </div>
+</template>
+<style scoped>
+a {
+  text-decoration: none; /* Отменяем подчеркивание у ссылки */
+}
+
+.navbar {
+  display: flex;
+  gap: 30px;
+  font-weight: bold;
+}
+</style>

src/views/components/navbar/Navbar.vue

@@ -36,7 +36,7 @@ export default {
 .post-title {
   font-size: 24px;
   font-weight: bold;
-  text-align: center;
+  padding-left: 15px;
 }
 
 .post-body {