Skip to content
Snippets Groups Projects
Commit 338a6e89 authored by Omar Elkadi's avatar Omar Elkadi
Browse files

navbar added

parent 4bb361f6
No related branches found
No related tags found
No related merge requests found
{
"CurrentProjectSetting": null
}
\ No newline at end of file
{
"ExpandedNodes": [
"",
"\\src",
"\\src\\components",
"\\src\\views"
],
"PreviewInSolutionExplorer": false
}
\ No newline at end of file
This diff is collapsed.
File added
This diff is collapsed.
......@@ -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,
......
<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
-->
import "../../node_modules/bootstrap/dist/js/bootstrap";
// 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";
<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
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')
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
<template>
About
</template>
\ No newline at end of file
</template>
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment