Skip to content

Commit 4fd31ef

Browse files
StanleyMasindeStanleyMasinde
committed
Added the dashboard layout
1 parent b2036e4 commit 4fd31ef

File tree

9 files changed

+138
-35
lines changed

9 files changed

+138
-35
lines changed

‎assets/variables.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
2-
//
3-
// The variables you want to modify
4-
// $font-size-root: 20px;
1+
$card-border-radius: 10px!important;
2+
$menu-content-border-radius: 50%!important;
3+
$btn-text-transform: 'capitalize';

‎layouts/default.vue

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -23,33 +23,31 @@
2323
</v-avatar>
2424
</v-btn>
2525
</template>
26-
<v-card>
27-
<v-list-item-content class="justify-center">
28-
<div class="mx-auto text-center">
29-
<v-avatar color="brown">
30-
<span class="white--text headline">JD</span>
31-
</v-avatar>
32-
<h3>{{ $auth.user.name }}</h3>
33-
<p class="caption mt-1">
34-
{{ $auth.user.email }}
35-
</p>
36-
<v-divider class="my-3" />
37-
<v-btn to="/" depressed rounded text> Home </v-btn>
38-
<v-divider class="my-3" />
39-
<v-btn to="/home" depressed rounded text> My account </v-btn>
40-
<v-divider class="my-3" />
41-
<v-btn
42-
color="error"
43-
depressed
44-
rounded
45-
text
46-
@click="$auth.logout()"
47-
>
48-
Logout
49-
</v-btn>
50-
</div>
51-
</v-list-item-content>
52-
</v-card>
26+
<v-list-item-content class="justify-center">
27+
<div class="mx-auto text-center">
28+
<v-avatar color="brown">
29+
<span class="white--text headline">JD</span>
30+
</v-avatar>
31+
<h3>{{ $auth.user.name }}</h3>
32+
<p class="caption mt-1">
33+
{{ $auth.user.email }}
34+
</p>
35+
<v-divider class="my-3" />
36+
<v-btn to="/" depressed rounded text> Home </v-btn>
37+
<v-divider class="my-3" />
38+
<v-btn to="/home" depressed rounded text> My account </v-btn>
39+
<v-divider class="my-3" />
40+
<v-btn
41+
color="error"
42+
depressed
43+
rounded
44+
text
45+
@click="$auth.logout()"
46+
>
47+
Logout
48+
</v-btn>
49+
</div>
50+
</v-list-item-content>
5351
</v-menu>
5452
<template v-else>
5553
<v-btn text link to="/login"> Login </v-btn>

‎nuxt.config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default {
99

1010
// Vue router
1111
router: {
12-
middleware: ['auth'],
12+
middleware: 'auth',
1313
},
1414

1515
/**
@@ -75,6 +75,7 @@ export default {
7575
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
7676
vuetify: {
7777
customVariables: ['~/assets/variables.scss'],
78+
treeShake: true,
7879
theme: {
7980
dark: false,
8081
themes: {
@@ -96,7 +97,7 @@ export default {
9697
*/
9798
auth: {
9899
strategies: {
99-
local: {
100+
cookie: {
100101
user: {
101102
property: 'user',
102103
},

‎pages/home.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<v-container>
3+
<v-col cols="12">
4+
<h1>Hi {{ $auth.user.name }}</h1>
5+
</v-col>
6+
<v-col cols="12" md="8">
7+
<v-tabs grow center-active>
8+
<v-tab to="/home">Home</v-tab>
9+
<v-tab to="/home/deployments">Deployments</v-tab>
10+
<v-tab to="/home/applications">Applications</v-tab>
11+
<v-tab to="/home/settings">Settings</v-tab>
12+
</v-tabs>
13+
<nuxt-child />
14+
</v-col>
15+
</v-container>
16+
</template>

‎pages/home/applications.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<h1>Applications page</h1>
3+
</template>
4+
<script>
5+
export default {
6+
head() {
7+
return {
8+
title: 'Applications 🧑🏽‍💻',
9+
}
10+
},
11+
}
12+
</script>

‎pages/home/deployments.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<h1>Deployments page</h1>
3+
</template>
4+
<script>
5+
export default {
6+
head() {
7+
return {
8+
title: 'Deployments 🚀',
9+
}
10+
},
11+
}
12+
</script>

‎pages/home/index.vue

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,56 @@
11
<template>
2-
<h1>You are logged as {{ $auth.user.name }}</h1>
2+
<v-row>
3+
<v-col cols="12" md="4">
4+
<v-card outlined class="my-5">
5+
<v-sheet
6+
elevation="2"
7+
class="stats-sheet display-3"
8+
color="primary"
9+
height="70"
10+
>
11+
23
12+
</v-sheet>
13+
<v-card-text class="text-center title">Applications</v-card-text>
14+
</v-card>
15+
</v-col>
16+
17+
<v-col cols="12" md="4">
18+
<v-card outlined class="my-5">
19+
<v-sheet
20+
elevation="2"
21+
class="stats-sheet display-3"
22+
color="success"
23+
height="70"
24+
>
25+
55
26+
</v-sheet>
27+
<v-card-text class="text-center title">Deployments</v-card-text>
28+
</v-card>
29+
</v-col>
30+
31+
<v-col cols="12" md="4">
32+
<v-card outlined class="my-5">
33+
<v-sheet
34+
elevation="2"
35+
class="stats-sheet display-3"
36+
color="error"
37+
height="70"
38+
>
39+
78
40+
</v-sheet>
41+
<v-card-text class="text-center title">Failed deployments</v-card-text>
42+
</v-card>
43+
</v-col>
44+
</v-row>
345
</template>
46+
<style scoped>
47+
.stats-sheet {
48+
margin-top: -15px;
49+
margin-left: 7px;
50+
margin-right: 7pt;
51+
border-radius: 5px !important;
52+
text-align: center;
53+
color: white;
54+
padding: 4px;
55+
}
56+
</style>

‎pages/home/settings.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<h1>Settings</h1>
3+
</template>
4+
<script>
5+
export default {
6+
head() {
7+
return {
8+
title: 'Settings ⚙️',
9+
}
10+
},
11+
}
12+
</script>

‎pages/login/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default {
6060
methods: {
6161
async login() {
6262
try {
63-
await this.$auth.loginWith('local', { data: this.credentials })
63+
await this.$auth.loginWith('cookie', { data: this.credentials })
6464
} catch (error) {
6565
if (error.response.status === 500) {
6666
throw new Error(error)

0 commit comments

Comments
 (0)