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
+17 -21
View File
@@ -3,11 +3,7 @@
<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>
<template>
<v-btn icon="mdi-help-box" />
<v-btn icon="mdi-account-circle" />
</template>
<v-btn icon="mdi-help-box" />
<v-btn icon @click="toggleTheme">
<v-icon>
@@ -17,8 +13,8 @@
<v-menu>
<template #activator="{ props }">
<v-btn icon v-bind="props">
<v-avatar size="32">
<img src="https://mohamedahmedali2023.github.io/fake_portofolio/assets/img/home-bg2.jpg" alt="Profile" />
<v-avatar size="32" icon="mdi-account-circle">
<!--<img src=""-->
</v-avatar>
</v-btn>
</template>
@@ -36,7 +32,7 @@
<v-list-item title="Home" to="/" prepend-icon="mdi-home"/>
<v-list-group value="pex">
<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>
<v-list-item density="default" v-for="item in pexItems"
:key="item.title"
@@ -48,7 +44,7 @@
</v-list-group>
<v-list-group value="scheduling">
<template #activator="{ props }">
<v-list-item v-bind="props" title="Scheduling" />
<v-list-item v-bind="props" title="Scheduling" prepend-icon="mdi-clock" />
</template>
<v-list-item density="default" v-for="item in schedulingItems"
:key="item.title"
@@ -60,7 +56,7 @@
</v-list-group>
<v-list-group value="training">
<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>
<v-list-item density="default" v-for="item in trainingItems"
:key="item.title"
@@ -72,7 +68,7 @@
</v-list-group>
<v-list-group value="staneval">
<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>
<v-list-item density="default" v-for="item in stanEvalItems"
:key="item.title"
@@ -84,7 +80,7 @@
</v-list-group>
<v-list-group value="admin">
<template #activator="{ props }">
<v-list-item v-bind="props" title="Admin" />
<v-list-item v-bind="props" title="Admin" prepend-icon="mdi-security" />
</template>
<v-list-item density="default" v-for="item in adminItems"
:key="item.title"
@@ -119,27 +115,27 @@
const pexItems = [
{ title: 'Dashboard', to: '/dashboard', icon: 'mdi-view-dashboard' },
{ 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 = [
{ title: 'Calendar', to: '/calendar', icon: 'mdi-folder-outline' },
{ title: 'Scheduler', to: '/scheduler', icon: 'mdi-folder-outline' }
{ title: 'Calendar', to: '/calendar', icon: 'mdi-calendar-multiple' },
{ title: 'Scheduler', to: '/scheduler', icon: 'mdi-chart-gantt' }
]
const trainingItems = [
{ title: 'Courses', to: '/courses', icon: 'mdi-folder-outline' },
{ title: 'Certifications', to: '/certs', icon: 'mdi-folder-outline' }
{ title: 'Courses', to: '/courses', icon: 'mdi-account-school' },
{ title: 'Certifications', to: '/certs', icon: 'mdi-file-certificate' }
]
const stanEvalItems = [
{ title: 'FCIF Admin', to: '/fcif-admin', icon: 'mdi-folder-outline' },
{ title: 'Management', to: '/management', icon: 'mdi-folder-outline' },
{ title: 'FCIF Admin', to: '/fcif-admin', icon: 'mdi-book-multiple' },
{ title: 'Management', to: '/management', icon: 'mdi-book-account' },
]
const adminItems = [
{ title: 'Users', to: '/users', icon: 'mdi-folder-outline' },
{ title: 'Settings', to: '/settings', icon: 'mdi-folder-outline' }
{ title: 'Users', to: '/users', icon: 'mdi-account-multiple' },
{ title: 'Settings', to: '/settings', icon: 'mdi-cog' }
]
const theme = useTheme()