Skip to content

Commit 5ef5dc4

Browse files
vedovellivedovelli
committed
ElementUI - navbar
This is the first component to receive Element UI. Also some changes to work with the new structure
1 parent c9c1e12 commit 5ef5dc4

File tree

7 files changed

+333
-303
lines changed

7 files changed

+333
-303
lines changed

‎client/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Codecasts.com.br - SPA - Starter Kit</title>
6+
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
67
</head>
78
<body>
89
<a href="https://github.com/codecasts/spa-starter-kit"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 2;" src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a>

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"dependencies": {
1616
"axios": "^0.15.2",
1717
"bootstrap-sass": "^3.3.7",
18+
"element-ui": "^1.0.7",
1819
"font-awesome": "^4.7.0",
1920
"jquery": "^3.1.1",
2021
"lodash": "^4.17.2",

‎client/src/app/auth/components/forms/singin.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
* Handle form's submit event
2323
*/
2424
submit() {
25-
const { email, password } = this
25+
const { email, password } = this // http://wesbos.com/destructuring-objects/
2626
this.attemptLogin({ email, password }) // this is a Vuex action
2727
.then(() => {
2828
this.setMessage({ type: 'error', message: [] }) // this is a Vuex action

‎client/src/app/dashboard/main.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77

88
<template>
99
<div>
10-
<div class="text-center">
10+
<div class="cover-container">
1111
<img class="cover" src="http://vedovelli.com.br/spas.png" alt="Codecasts Single Page Application starter kit">
1212
<h4>A highly opinionated Single Page Application starter kit built on top of Vue.js and Laravel.</h4>
1313
</div>
1414
</div>
1515
</template>
1616

1717
<style scoped>
18+
.cover-container {
19+
margin-top: 70px;
20+
text-align: center;
21+
}
1822
.cover {
1923
max-width: 800px;
2024
}

‎client/src/components/root/navbar.vue‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,79 @@
11

22
<script>
3-
import { mapActions, mapGetters } from 'vuex'
4-
import { version } from '../../config'
3+
import { mapActions, mapState } from 'vuex'
54
import CcSpinner from '../general/spinner'
5+
import { version } from '../../config'
66
77
export default {
88
components: {
99
CcSpinner,
1010
},
1111
computed: {
12-
...mapGetters(['currentUser', 'isLogged']),
12+
...mapState({
13+
user: state => state.Auth.user,
14+
}),
1315
version() {
1416
return version
1517
},
1618
},
17-
watch: {
18-
isLogged(value) {
19-
if (value === false) {
20-
this.$router.push({ name: 'auth.singin' })
19+
methods: {
20+
...mapActions(['setToken', 'setUser']),
21+
logout() {
22+
this.setToken('')
23+
this.setUser({})
24+
this.$router.push({ name: 'login.index' })
25+
},
26+
/* eslint-disable no-undef */
27+
navigate(name) {
28+
switch (name) {
29+
case 'codecasts':
30+
window.location = 'https://codecasts.com.br/'
31+
break;
32+
case 'logout':
33+
this.logout()
34+
break;
35+
default:
36+
this.$router.push({ name })
37+
break;
2138
}
2239
},
2340
},
24-
methods: {
25-
...mapActions(['logout']),
26-
},
2741
}
2842
</script>
2943

3044
<template>
3145
<div>
32-
<nav class="navbar navbar-default">
33-
<div class="container-fluid">
34-
<div class="navbar-header spacer">
35-
<a class="navbar-brand" href="http://www.codecasts.com.br/">
36-
Codecasts.com.br
37-
</a><br>
38-
<small class="version">version {{ version }}</small>
39-
</div>
40-
<div class="collapse navbar-collapse">
41-
<ul class="nav navbar-nav">
42-
<router-link tag="li" :to="{ name: 'dashboard.index' }" exact>
43-
<a>Dashboard</a>
44-
</router-link>
45-
<router-link tag="li" :to="{ name: 'categories.index', query: { page: 1 } }">
46-
<a>Categories</a>
47-
</router-link>
48-
<router-link tag="li" :to="{ name: 'products.index', query: { page: 1 } }">
49-
<a>Products</a>
50-
</router-link>
51-
</ul>
52-
<div class="nav navbar-form navbar-right">
53-
<cc-spinner></cc-spinner>
54-
<span class="username">{{ currentUser.name }}</span>
55-
<button class="btn btn-default btn-sm" @click="logout">Logout</button>
56-
</div>
57-
</div>
58-
</div>
59-
</nav>
46+
<el-menu theme="dark" default-active="1" class="cc-navigation"
47+
mode="horizontal" @select="navigate">
48+
<el-menu-item index="codecasts" class="brand">Codecasts.com.br</el-menu-item>
49+
<el-menu-item index="dashboard.index">Dashboard</el-menu-item>
50+
<el-submenu index="menu-modules">
51+
<template slot="title">Modules</template>
52+
<el-menu-item index="categories.index">Categories</el-menu-item>
53+
<el-menu-item index="products.index">Products</el-menu-item>
54+
</el-submenu>
55+
<el-submenu index="menu-user" class="logout-button">
56+
<template slot="title">{{ user.name }}</template>
57+
<el-menu-item index="logout">Logout</el-menu-item>
58+
</el-submenu>
59+
</el-menu>
60+
<small class="version">version {{ version }}</small>
6061
</div>
6162
</template>
6263

6364
<style scoped>
64-
.spacer {
65-
margin-left: 120px;
65+
.cc-navigation {
66+
padding-left: 115px;
67+
}
68+
.brand {
69+
font-size: 1.2em;
6670
}
67-
.username {
68-
padding: 6px 20px;
69-
border-radius: 20px;
70-
background-color: #ddd;
71-
display: inline-block;
71+
.logout-button {
72+
float: right;
7273
}
7374
.version {
7475
position: absolute;
7576
right: 15px;
76-
top: 58px;
77+
top: 65px;
7778
}
7879
</style>

‎client/src/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { sync } from 'vuex-router-sync'
22
import Vue from 'vue'
3+
import ElementUI from 'element-ui'
4+
import locale from 'element-ui/lib/locale/lang/en'
35
import Root from './Root'
46

57
/**
@@ -28,6 +30,11 @@ import eventbus from './plugins/eventbus'
2830
*/
2931
require('./includes')
3032

33+
/**
34+
* Element UI
35+
*/
36+
Vue.use(ElementUI, { locale })
37+
3138
/**
3239
* Make $http avaible to all components
3340
* Send store and router to httpPlugin (injection)

0 commit comments

Comments
 (0)