Skip to content

Commit 93099f4

Browse files
committed
refactor: App layouts
1 parent 73f4cc5 commit 93099f4

File tree

3 files changed

+58
-15
lines changed

3 files changed

+58
-15
lines changed

client/components/AppToolbar.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script setup lang="ts">
2+
import { mdiChevronRight } from '@mdi/js';
3+
const props = defineProps<{
4+
icon: string,
5+
title: string,
6+
prependIcon: string,
7+
breadcrumbs: Array<{title: string, disabled: boolean, to: {name: string, params?: {id?: unknown}} | string}>
8+
}>()
9+
10+
11+
</script>
12+
<template>
13+
<v-toolbar color="blue-grey-lighten-5" elevation="1" border density="compact" class="px-5 rounded-t-lg border-primary border-t-md border-b-md">
14+
<v-card elevation="3" class="px-4 py-1 border-md border-error">
15+
<v-icon color="primary" :icon="props.icon"></v-icon>
16+
</v-card>
17+
<v-toolbar-title class="text-blue-grey h-1">{{ props.title }}</v-toolbar-title>
18+
19+
</v-toolbar>
20+
<v-toolbar color="white" border height="30" class="px-5 mb-3 border-primary border-opacity-25 border-md border-t-0 rounded-b-lg">
21+
<v-spacer/>
22+
<v-breadcrumbs active-color="primary" color="blue-grey" :items="props.breadcrumbs">
23+
<template v-slot:prepend>
24+
<v-icon color="blue-grey" :icon="props.prependIcon"></v-icon>
25+
</template>
26+
<template v-slot:divider>
27+
<v-icon :icon="mdiChevronRight"></v-icon>
28+
</template>
29+
</v-breadcrumbs>
30+
31+
</v-toolbar>
32+
33+
</template>

client/components/NavigationLinks.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,37 @@
33
<template v-for="item in links" :key="item.title">
44
<v-list-group v-if="item.children" fluid>
55
<template v-slot:activator="{ props }">
6-
<v-list-item rounded="shaped" v-ripple v-bind="props" :prepend-icon="item.icon" :title="item.title" :value="item.title">
6+
<v-list-item exact rounded="shaped" v-ripple v-bind="props" :prepend-icon="item.icon" :title="item.title" :value="item.title">
77
</v-list-item>
88
</template>
99
<template v-for="child in item.children">
1010
<v-list-group v-if="child.children" class="ml-7" fluid>
1111
<template v-slot:activator="{ props }">
12-
<v-list-item rounded="shaped" v-ripple v-bind="props" :title="child.title" :value="child.title">
12+
<v-list-item exact rounded="shaped" v-ripple v-bind="props" :title="child.title" :value="child.title">
1313
<template v-slot:prepend>
1414
<v-icon size="small" start :icon="child.icon"></v-icon>
1515
</template>
1616
</v-list-item>
1717
</template>
1818

1919
<template v-for="el in child.children">
20-
<v-list-item :to="el.to" rounded="shaped" v-ripple :title="el.title" :value="el.title">
20+
<v-list-item exact :to="el.to" rounded="shaped" v-ripple :title="el.title" :value="el.title">
2121
<template v-slot:prepend>
2222
<v-icon size="x-small" class="ml-7" start :icon="el.icon"></v-icon>
2323
</template>
2424
</v-list-item>
2525
</template>
2626

2727
</v-list-group>
28-
<v-list-item v-else :to="child.to" rounded="shaped" v-ripple class="ml-7" :title="child.title" :value="child.title">
28+
<v-list-item exact v-else :to="child.to" rounded="shaped" v-ripple class="ml-7" :title="child.title" :value="child.title">
2929
<template v-slot:prepend>
3030
<v-icon size="small" start :icon="child.icon"></v-icon>
3131
</template>
3232
</v-list-item>
3333
</template>
3434

3535
</v-list-group>
36-
<v-list-item v-else rounded="shaped" :to="item.to" :prepend-icon="item.icon" :title="item.title" :value="item.title"></v-list-item>
36+
<v-list-item exact v-else rounded="shaped" :to="item.to" :prepend-icon="item.icon" :title="item.title" :value="item.title"></v-list-item>
3737
</template>
3838
</v-list>
3939
</template>

client/layouts/authenticated.vue

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
<script setup lang="ts">
2+
import axios from "axios";
23
import { mdiAccount } from '@mdi/js';
3-
4+
axios.defaults.withCredentials = true;
5+
const {$gates, provide} = useNuxtApp()
46
let drawer = ref(true);
5-
const imgUrl = new URL('../img/logo.png', import.meta.url).href
6-
const bgUrl = new URL('../img/bg.jpeg', import.meta.url).href
7-
const maleImg = new URL('../img/male.png', import.meta.url).href
7+
const imgUrl = '/img/logo.png'
8+
const bgUrl = '../img/bg.jpeg'
9+
const maleImg = '/img/male.png'
10+
const response = await axios.get('http://localhost:8000/api/user')
11+
provide('user', response.data)
12+
const $user = useNuxtApp().$user
13+
$gates.setRoles($user.allRoles)
14+
$gates.setPermissions($user.allPermissions)
15+
useHead({
16+
titleTemplate: '%s - Boilerplate',
17+
})
818
919
</script>
1020

@@ -25,12 +35,12 @@ const maleImg = new URL('../img/male.png', import.meta.url).href
2535
</template>
2636
</v-list-item>
2737
</v-toolbar>
28-
<v-card class="rounded-0" variant="text" :image="bgUrl" height="150">
38+
<v-card class="rounded-0" variant="elevated" :image="bgUrl" height="150">
2939
<v-list-item
3040
class="mt-10"
3141
color="black"
32-
title="John Doe"
33-
subtitle="Administrateur"
42+
:title="$user.name"
43+
:subtitle="$user.allRoles"
3444
>
3545

3646
<template v-slot:prepend>
@@ -48,7 +58,7 @@ const maleImg = new URL('../img/male.png', import.meta.url).href
4858
</v-navigation-drawer>
4959

5060
<v-app-bar elevation="3" app color="primary" class="rounded-be-xl">
51-
<v-app-bar-nav-icon class="bg-pink-lighten-1" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
61+
<v-app-bar-nav-icon class="bg-indigo rounded-lg" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
5262

5363
<v-spacer></v-spacer>
5464

@@ -74,10 +84,10 @@ const maleImg = new URL('../img/male.png', import.meta.url).href
7484
</v-col>
7585
<v-col cols="12">
7686
<v-list-item>
77-
<v-list-item-title>Content filtering</v-list-item-title>
87+
<v-list-item-title>{{ $user.name }}</v-list-item-title>
7888

7989
<v-list-item-subtitle>
80-
Administrateur
90+
{{ $user.allRoles.join(', ') }}
8191
</v-list-item-subtitle>
8292
</v-list-item>
8393

0 commit comments

Comments
 (0)