navbar added

.vs/ProjectSettings.json

+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file

.vs/VSWorkspaceState.json

+{
+  "ExpandedNodes": [
+    "",
+    "\\src",
+    "\\src\\components",
+    "\\src\\views"
+  ],
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file

package.json

@@ -8,11 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^5.0.0-beta3",
     "bootstrap-scss": "^4.6.0",
     "core-js": "^3.6.5",
     "jquery": "^3.6.0",
     "popper.js": "^1.16.1",
-    "vue": "^3.0.0"
+    "sass-loader": "^10.1.1",
+    "vue": "^3.0.11",
+    "vue-router": "^4.0.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -21,13 +24,14 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^7.0.0",
-    "node-sass": "^5.0.0"
+    "node-sass": "^5.0.0",
+    "webpack": "^4.46.0"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

-
-
 <template>
   <div id="app">
     <div id="nav">
       <navbar/>
-      <router-link to="/">Home</router-link> | 
-      <router-link to="/about">About</router-link>
     </div>
     <router-view />
   </div>
 </template>
 
+<style lang="scss">
+//  import the Bootstrap scss files and the other scss attributs
+@import './assets/app.scss';
+</style>
+
 <style>
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
-#nav {
-  padding: 30px;
-}
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>
 
-<style lang="scss"> @import './assets/app.scss'; </style>
-
 <script>
+//  import bootstrap javaScripts allows dynamic components like Dropdowns to work
+import '../node_modules/bootstrap/dist/js/bootstrap'
+
+//  import the navigationbar component
 import navbar from './components/navbar.vue'
 
 export default {
   name: 'App',
   components: {
-    navbar,
+    navbar
   }
 }
 </script>
@@ -49,16 +42,4 @@ export default {
   <img alt="Vue logo" src="./assets/logo.png">
   <HelloWorld msg="Welcome to Your Vue.js App"/>
 </template>
-
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
--->
\ No newline at end of file
+-->

src/assets/app.js

+import "../../node_modules/bootstrap/dist/js/bootstrap";

src/assets/sass/app.sass → src/assets/app.scss

 // app.scss 
 // see https://bootstrap.themes.guide/how-to-customize-bootstrap.html
 /* import the necessary Bootstrap files, file-links adjusted by UG ! */ 
-// @import "bootstrap/functions"; @import "../../node_modules/bootstrap-scss/functions"; 
-// @import "bootstrap/variables"; @import "../../node_modules/bootstrap-scss/variables";
+// @import "bootstrap/functions"; 
+@import "../../node_modules/bootstrap-scss/functions"; 
+// @import "bootstrap/variables"; 
+@import "../../node_modules/bootstrap-scss/variables";
 // $theme-colors: map-remove($theme-colors, "primary", "danger"); 
 // Then add additional custom code here
 
 $thdblue: #1a4273; $thddarkgrey: #6f6f6e; $thdgrey: #a8a8a8; $thdlightgrey: #dadada; $green: rgb(91, 227, 0); // for tests
-$theme-colors: ( "primary": $thdblue, "danger": rgb(231, 61, 85)
-);
+$theme-colors: ( 
+    "primary": $thdblue, 
+    "danger": rgb(231, 61, 85)
+    );
 
 //$body-bg: $green;
 
 /* finally, import Bootstrap to set the changes! */ 
-@import "../../node_modules/bootstrap-scss/bootstrap";
\ No newline at end of file
+@import "../../node_modules/bootstrap-scss/bootstrap";

src/components/navbar.vue

 <template>
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
         <div class="container-fluid">
           <a class="navbar-brand" href="#">Navbar</a>
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
-          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
               <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="#">Home</a>
+                <router-link to="/" class="nav-link active" aria-current="page">Home</router-link> <!--vue link instead of the anchor-->
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#">Link</a>
+                <router-link to="/about" class="nav-link">About</router-link>
               </li>
               <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -28,21 +28,11 @@
                 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
               </li>
             </ul>
-            <form class="d-flex">
+            <form class="d-flex ml-auto ">
               <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-              <button class="btn btn-outline-success" type="submit">Search</button>
+              <button class="btn btn-outline-success ml-1" type="submit">Search</button>
             </form>
           </div>
         </div>
       </nav>
 </template>
-
-<script>
-export default {
-  name: 'navbar'
-}
-</script>
-
-<style lang="scss">
- @import './assets/app.scss'; 
-</style>
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
-//add routing script to the main
+
+// add routing script to the main
 import router from './router'
 
-createApp(App).use(router).mount('#app')
\ No newline at end of file
+createApp(App).use(router).mount('#app')

src/router.js

-import { createWebHistory, createRouter } from "vue-router";
-import Home from "./views/Home.vue";
-import About from "./views/About.vue";
-
+import { createWebHistory, createRouter } from 'vue-router'
+import Home from './views/Home.vue'
+import About from './views/About.vue'
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
-    component: Home,
+    path: '/',
+    name: 'Home',
+    component: Home
   },
   {
-    path: "/about",
-    name: "About",
-    component: About,
-  },
-
-];
+    path: '/about',
+    name: 'About',
+    component: About
+  }
+]
 
 const router = createRouter({
   history: createWebHistory(),
-  routes,
-});
+  routes
+})
 
-export default router;
\ No newline at end of file
+export default router

src/views/About.vue

 <template>
     About
-</template>
\ No newline at end of file
+</template>

src/views/Home.vue

@@ -7,11 +7,11 @@
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import HelloWorld from '@/components/HelloWorld.vue'
 export default {
-  name: "home",
+  name: 'home',
   components: {
     HelloWorld
   }
-};
-</script>
\ No newline at end of file
+}
+</script>