menu style changes and menu updates

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-sheet color="#0d1117" rounded="lg">
+    <v-sheet rounded="lg">
         <v-tabs
             v-model="tab"
             :items="tabs"
@@ -26,6 +26,14 @@
     </v-sheet>
 </template>
 
+<style scoped>
+    @reference "../styles/tailwind.css";
+    :deep(.v-tab--selected) {
+        @apply bg-gray-200 bg-linear-to-r from-primary/20 to-primary/60 text-black/80;
+        @apply dark:bg-black dark:bg-linear-to-r dark:from-primary/50 dark:to-primary/30 dark:text-white/80;
+    }
+</style>
+
 <script setup>
     import { shallowRef } from 'vue'
 

src/components/Header.vue

@@ -7,7 +7,9 @@
         <template>
             <v-btn icon="mdi-help-box" />
             <v-btn icon="mdi-account-circle" />
-            <v-btn icon @click="toggleTheme">
+        </template>
+
+        <v-btn icon @click="toggleTheme">
                 <v-icon>
                     {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
                 </v-icon>
@@ -26,7 +28,6 @@
                 <v-list-item title="Sign out" />
                 </v-list>
             </v-menu>
-        </template>
 
     </v-app-bar>
 
@@ -56,6 +57,39 @@
                         link
                     />
             </v-list-group>
+            <v-list-group value="training">
+                <template #activator="{ props }">
+                    <v-list-item v-bind="props" title="Training" />
+                </template>
+                    <v-list-item density="default" v-for="item in trainingItems"
+                        :key="item.title"
+                        :title="item.title"
+                        :to="item.to"
+                        link
+                    />
+            </v-list-group>
+            <v-list-group value="staneval">
+                <template #activator="{ props }">
+                    <v-list-item v-bind="props" title="Stan/Eval" />
+                </template>
+                    <v-list-item density="default" v-for="item in stanEvalItems"
+                        :key="item.title"
+                        :title="item.title"
+                        :to="item.to"
+                        link
+                    />
+            </v-list-group>
+            <v-list-group value="admin">
+                <template #activator="{ props }">
+                    <v-list-item v-bind="props" title="Admin" />
+                </template>
+                    <v-list-item density="default" v-for="item in adminItems"
+                        :key="item.title"
+                        :title="item.title"
+                        :to="item.to"
+                        link
+                    />
+            </v-list-group>
         </v-list>
     </v-navigation-drawer>
 </template>
@@ -67,27 +101,21 @@
     :deep(.v-list-group__items .v-list-item) {
         padding-inline-start: 48px;
     }
+    @reference "../styles/tailwind.css";
+    :deep(.v-list-item--active) {
+        @apply bg-gray-200 bg-linear-to-r from-primary/10 to-primary/50 text-black/100;
+        @apply dark:bg-black dark:bg-linear-to-r dark:from-primary/50 dark:to-primary/30 dark:text-white/90;
+    }
 </style>
 
 <script setup>
     import { ref, watch } from 'vue'
+    import { useTheme } from 'vuetify'
 
     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: 'Dashboard', to: '/dashboard', icon: 'mdi-view-dashboard' },
+        { title: 'Calendar', to: '/calendar', icon: 'mdi-calendar' },
+        { title: 'My Folder', to: '/my-folder', icon: 'mdi-folder-outline' },
     ]
 
     const schedulingItems = [
@@ -95,6 +123,22 @@
         { title: 'Scheduler', to: '/scheduler' }
     ]
 
+    const trainingItems = [
+        { title: 'Courses', to: '/courses' },
+        { title: 'Certifications', to: '/certs' }
+    ]
+
+    const stanEvalItems = [
+        { title: 'FCIF Admin', to: '/fcif-admin' },
+        { title: 'Management', to: '/management' },
+    ]
+
+    const adminItems = [
+        { title: 'Users', to: '/users' },
+        { title: 'Settings', to: '/settings'}
+    ]
+
+    const theme = useTheme()
     function toggleTheme() {
         theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
     }