Commit 7bc38da5 authored by Khalid Ali's avatar Khalid Ali

Feature/6-Add-Navbar

parent 52fb387d
This diff is collapsed.
......@@ -5,6 +5,8 @@
"scripts": {
"start": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"icons": "vsvg -s src/assets/icons -t src/components/icons",
"prebuild": "npm run icons",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"pretest": "eslint --ignore-path .gitignore .",
......@@ -13,18 +15,24 @@
},
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.2.1",
"bootstrap-vue": "^2.0.0-rc.11",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"jquery": "^1.12.4",
"popper.js": "^1.14.6",
"register-service-worker": "^1.5.2",
"vue": "^2.5.22",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^7.3.0",
"vue-router": "^3.0.1"
"vue-router": "^3.0.1",
"vue-svg-loader": "^0.11.0",
"vue-svgicon": "^3.2.2"
},
"devDependencies": {
"@types/jest": "^23.3.12",
"@types/jest": "^23.3.13",
"@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"@vue/cli-plugin-pwa": "^3.3.0",
......@@ -34,10 +42,10 @@
"@vue/test-utils": "^1.0.0-beta.28",
"acorn": "^6.0.5",
"babel-core": "7.0.0-bridge.0",
"eslint": "^5.12.0",
"eslint": "^5.12.1",
"eslint-config-standard": "^12.0.0",
"ts-jest": "^23.0.0",
"typescript": "^3.0.0",
"typescript": "^3.2.4",
"vue-template-compiler": "^2.5.22"
}
}
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<NavigationBar/>
<router-view/>
</div>
</template>
<script lang="ts">
import axios from 'axios';
import { Component, Vue } from 'vue-property-decorator';
import NavigationBar from '@/components/NavigationBar.vue';
@Component({
components: {
NavigationBar,
},
})
export default class App extends Vue {}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
......@@ -16,16 +26,6 @@
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
@import '~bootstrap/dist/css/bootstrap.css'
</style>
This diff is collapsed.
This diff is collapsed.
<template>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<router-link to="/" class="navbar-brand">
<svgicon class="svg-icon" icon="srct" width="24" height="24" alt="SRCT"/>
BOOKSHARE
</router-link>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><router-link to="/create_listing" class="nav-link">Create Listing</router-link></li>
<li class="nav-item"><router-link to="/all_listing" class="nav-link">Latest Listings</router-link></li>
<li class="nav-item"><router-link to="/about" class="nav-link">About</router-link></li>
</ul>
</div>
</div>
</nav>
</template>
<script lang="ts">
import '@/components/icons/srct';
import { Component, Vue } from 'vue-property-decorator';
export default class NavigationBar extends Vue {}
</script>
<style>
.svg-icon {
padding-bottom: 5px;
}
</style>
/* eslint-disable */
require('./heart')
require('./srct')
This diff is collapsed.
import Vue from 'vue';
import SvgIcon from 'vue-svgicon';
import App from './App.vue';
import router from './router';
import './registerServiceWorker';
import 'bootstrap';
Vue.config.productionTip = false;
Vue.use(SvgIcon);
new Vue({
router,
......
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<BeerList/>
</div>
</template>
<script lang="ts">
import axios from 'axios';
import { Component, Vue } from 'vue-property-decorator';
import BeerList from '@/components/BeerList.vue'; // @ is an alias to /src
// import NavigationBar from '@/components/NavigationBar.vue'; // @ is an alias to /src
@Component({
components: {
BeerList,
// NavigationBar,
},
})
export default class Home extends Vue {}
......
......@@ -7,5 +7,19 @@ module.exports = {
secure: false
}
}
},
configureWebpack: {
module: {
rules: [
{
test: /\.svg$/,
use: [{
loader: 'html-loader',
options: {
minimize: true
}
}]
}]
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment