Merge pull request #27 from connorabbas/develop

Component improvements for theme

Author: connorabbas

resources/js/Components/Container.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 <template>
     <div
         :class="[spacedMobile ? 'px-4' : 'px-0']"
-        class="max-w-screen-xl mx-auto sm:px-4"
+        class="max-w-screen-2xl mx-auto sm:px-4"
     >
         <slot />
     </div>

resources/js/Components/PrimeVue/LinksMenu.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { useTemplateRef } from 'vue';
 
+// Alternatively, you can use the default <Menu /> component using a command callback, and a manual router visit:
+// https://primevue.org/menu/#command
+// https://inertiajs.com/manual-visits
+
 const childRef = useTemplateRef('child-ref');
 defineExpose({
     childRef,

resources/js/Components/PrimeVue/LinksMenuBar.vue

@@ -13,13 +13,14 @@ defineExpose({
             <slot name="start"></slot>
         </template>
         <template #item="{ item, props, hasSubmenu, root }">
+            <!-- add if using 'nora' preset theme -->
+            <!-- hover:text-primary-100 hover:dark:text-primary-950 -->
             <Link
                 v-if="item.route"
                 :href="item.route"
                 class="p-menubar-item-link"
                 :class="{
-                    'font-bold text-primary dark:text-primary-300 bg-primary-50 dark:bg-primary-950 rounded-lg':
-                        item.active,
+                    'font-bold text-primary': item.active,
                 }"
                 custom
             >

resources/js/Components/PrimeVue/LinksPanelMenu.vue

@@ -16,21 +16,23 @@
         }"
     >
         <template #item="{ item }">
+            <!-- add if using 'nora' preset theme -->
+            <!-- hover:text-primary-100 hover:dark:text-primary-950 -->
             <Link
                 v-if="item.route"
                 :href="item.route"
                 custom
                 class="flex items-center cursor-pointer no-underline px-4 py-2"
                 :class="
                     item.active
-                        ? 'text-primary'
+                        ? 'font-bold text-primary'
                         : 'text-surface-700 dark:text-surface-0'
                 "
             >
                 <span
                     v-show="item.icon"
                     :class="item.icon"
-                    class="p-panelmenu-item-icon mr-2"
+                    class="mr-2"
                 />
                 <span>{{ item.label }}</span>
             </Link>
@@ -43,7 +45,7 @@
                 <span
                     v-show="item.icon"
                     :class="item.icon"
-                    class="p-panelmenu-item-icon mr-2"
+                    class="mr-2"
                 />
                 <span>{{ item.label }}</span>
                 <span v-if="item.items" class="pi pi-angle-down ml-auto" />

resources/js/Layouts/AuthenticatedLayout.vue

@@ -93,7 +93,7 @@ watchEffect(() => {
                         :model="mainMenuItems"
                         :pt="{
                             root: {
-                                class: 'px-0 py-3 border-0 rounded-none',
+                                class: 'px-0 py-3 border-0 rounded-none bg-surface-0 dark:bg-surface-900',
                             },
                             button: {
                                 class: 'hidden',