thackmaster/pex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added menu icons, updated header with help menu and dark mode, adjusted profile

Browse Source
This commit is contained in:
thackmaster
2026-05-01 20:32:45 -06:00
parent 77232d5b46
commit 60b78f7e98
1 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.vue
+16 -20
View File
@@ -3,11 +3,7 @@
<v-app-bar-nav-icon @click.stop="drawer = !drawer" /> <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
<v-app-bar-title>PEX2 or something I have really no idea</v-app-bar-title> <v-app-bar-title>PEX2 or something I have really no idea</v-app-bar-title>
<template>
<v-btn icon="mdi-help-box" /> <v-btn icon="mdi-help-box" />
<v-btn icon="mdi-account-circle" />
</template>
<v-btn icon @click="toggleTheme"> <v-btn icon @click="toggleTheme">
<v-icon> <v-icon>
@@ -17,8 +13,8 @@
<v-menu> <v-menu>
<template #activator="{ props }"> <template #activator="{ props }">
<v-btn icon v-bind="props"> <v-btn icon v-bind="props">
<v-avatar size="32"> <v-avatar size="32" icon="mdi-account-circle">
<img src="https://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" /> <!--<img src=""-->
</v-avatar> </v-avatar>
</v-btn> </v-btn>
</template> </template>
@@ -36,7 +32,7 @@
<v-list-item title="Home" to="/" prepend-icon="mdi-home"/> <v-list-item title="Home" to="/" prepend-icon="mdi-home"/>
<v-list-group value="pex"> <v-list-group value="pex">
<template #activator="{ props }"> <template #activator="{ props }">
<v-list-item v-bind="props" title="My PEX Items" prepend-icon="mdi-account"/> <v-list-item v-bind="props" title="My PEX Items" prepend-icon="mdi-account" />
</template> </template>
<v-list-item density="default" v-for="item in pexItems" <v-list-item density="default" v-for="item in pexItems"
:key="item.title" :key="item.title"
@@ -48,7 +44,7 @@
</v-list-group> </v-list-group>
<v-list-group value="scheduling"> <v-list-group value="scheduling">
<template #activator="{ props }"> <template #activator="{ props }">
<v-list-item v-bind="props" title="Scheduling" /> <v-list-item v-bind="props" title="Scheduling" prepend-icon="mdi-clock" />
</template> </template>
<v-list-item density="default" v-for="item in schedulingItems" <v-list-item density="default" v-for="item in schedulingItems"
:key="item.title" :key="item.title"
@@ -60,7 +56,7 @@
</v-list-group> </v-list-group>
<v-list-group value="training"> <v-list-group value="training">
<template #activator="{ props }"> <template #activator="{ props }">
<v-list-item v-bind="props" title="Training" /> <v-list-item v-bind="props" title="Training" prepend-icon="mdi-human-male-board" />
</template> </template>
<v-list-item density="default" v-for="item in trainingItems" <v-list-item density="default" v-for="item in trainingItems"
:key="item.title" :key="item.title"
@@ -72,7 +68,7 @@
</v-list-group> </v-list-group>
<v-list-group value="staneval"> <v-list-group value="staneval">
<template #activator="{ props }"> <template #activator="{ props }">
<v-list-item v-bind="props" title="Stan/Eval" /> <v-list-item v-bind="props" title="Stan/Eval" prepend-icon="mdi-clipboard-account" />
</template> </template>
<v-list-item density="default" v-for="item in stanEvalItems" <v-list-item density="default" v-for="item in stanEvalItems"
:key="item.title" :key="item.title"
@@ -84,7 +80,7 @@
</v-list-group> </v-list-group>
<v-list-group value="admin"> <v-list-group value="admin">
<template #activator="{ props }"> <template #activator="{ props }">
<v-list-item v-bind="props" title="Admin" /> <v-list-item v-bind="props" title="Admin" prepend-icon="mdi-security" />
</template> </template>
<v-list-item density="default" v-for="item in adminItems" <v-list-item density="default" v-for="item in adminItems"
:key="item.title" :key="item.title"
@@ -119,27 +115,27 @@
const pexItems = [ const pexItems = [
{ title: 'Dashboard', to: '/dashboard', icon: 'mdi-view-dashboard' }, { title: 'Dashboard', to: '/dashboard', icon: 'mdi-view-dashboard' },
{ title: 'Calendar', to: '/calendar', icon: 'mdi-calendar' }, { title: 'Calendar', to: '/calendar', icon: 'mdi-calendar' },
{ title: 'My Folder', to: '/my-folder', icon: 'mdi-folder-outline' }, { title: 'My Folder', to: '/my-folder', icon: 'mdi-folder' },
] ]
const schedulingItems = [ const schedulingItems = [
{ title: 'Calendar', to: '/calendar', icon: 'mdi-folder-outline' }, { title: 'Calendar', to: '/calendar', icon: 'mdi-calendar-multiple' },
{ title: 'Scheduler', to: '/scheduler', icon: 'mdi-folder-outline' } { title: 'Scheduler', to: '/scheduler', icon: 'mdi-chart-gantt' }
] ]
const trainingItems = [ const trainingItems = [
{ title: 'Courses', to: '/courses', icon: 'mdi-folder-outline' }, { title: 'Courses', to: '/courses', icon: 'mdi-account-school' },
{ title: 'Certifications', to: '/certs', icon: 'mdi-folder-outline' } { title: 'Certifications', to: '/certs', icon: 'mdi-file-certificate' }
] ]
const stanEvalItems = [ const stanEvalItems = [
{ title: 'FCIF Admin', to: '/fcif-admin', icon: 'mdi-folder-outline' }, { title: 'FCIF Admin', to: '/fcif-admin', icon: 'mdi-book-multiple' },
{ title: 'Management', to: '/management', icon: 'mdi-folder-outline' }, { title: 'Management', to: '/management', icon: 'mdi-book-account' },
] ]
const adminItems = [ const adminItems = [
{ title: 'Users', to: '/users', icon: 'mdi-folder-outline' }, { title: 'Users', to: '/users', icon: 'mdi-account-multiple' },
{ title: 'Settings', to: '/settings', icon: 'mdi-folder-outline' } { title: 'Settings', to: '/settings', icon: 'mdi-cog' }
] ]
const theme = useTheme() const theme = useTheme()