Merge pull request #33 from connorabbas/develop

Menu improvements

Author: connorabbas

resources/js/Components/PrimeVue/LinksMenuBar.vue

@@ -21,6 +21,7 @@ defineExpose({
                 class="p-menubar-item-link"
                 :class="{
                     'font-bold text-primary': item.active,
+                    'text-muted-color': root && !item.active,
                 }"
                 custom
             >
@@ -37,6 +38,9 @@ defineExpose({
                 :target="item.target"
                 v-bind="props.action"
                 class="p-menubar-item-link"
+                :class="{
+                    'text-muted-color': root,
+                }"
             >
                 <span
                     v-show="item.icon"
@@ -47,11 +51,8 @@ defineExpose({
                 <i
                     v-if="hasSubmenu"
                     :class="[
-                        'pi pi-angle-down',
-                        {
-                            'pi-angle-down ml-2': root,
-                            'pi-angle-right ml-auto': !root,
-                        },
+                        'pi text-muted-color',
+                        root ? 'pi-angle-down text-xs' : 'pi-angle-right',
                     ]"
                 ></i>
             </a>

resources/js/Components/PrimeVue/LinksPanelMenu.vue

@@ -15,7 +15,7 @@
             },
         }"
     >
-        <template #item="{ item }">
+        <template #item="{ item, active }">
             <!-- add if using 'nora' preset theme -->
             <!-- hover:text-primary-100 hover:dark:text-primary-950 -->
             <Link
@@ -48,7 +48,13 @@
                     class="p-panelmenu-item-icon mr-2"
                 />
                 <span>{{ item.label }}</span>
-                <span v-if="item.items" class="pi pi-angle-down ml-auto" />
+                <span
+                    v-if="item.items"
+                    :class="[
+                        'pi text-muted-color ml-auto',
+                        active ? 'pi-angle-down' : 'pi-angle-right',
+                    ]"
+                />
             </a>
         </template>
     </PanelMenu>

resources/js/Layouts/AuthenticatedLayout.vue

@@ -134,7 +134,7 @@ watchEffect(() => {
                                         <span class="text-base">
                                             {{ $page.props.auth.user.name }}
                                         </span>
-                                        <i class="pi pi-angle-down ml-1"></i>
+                                        <i class="pi pi-angle-down"></i>
                                     </Button>
                                 </div>
                             </div>