Added menu icon path add/edit on menu items

Author: balajidharma

resources/js/Components/Admin/MenuItemList.vue

@@ -2,6 +2,7 @@
 import { Link } from "@inertiajs/vue3"
 import BaseButton from "@/Components/BaseButton.vue"
 import BaseButtons from "@/Components/BaseButtons.vue"
+import BaseIcon from '@/Components/BaseIcon.vue'
 import {
   mdiSquareEditOutline,
   mdiTrashCan,
@@ -30,7 +31,17 @@ const props = defineProps({
 <template>
     <tr :key="item.id">
         <td data-label="Name">
-            <div :style="{ 'margin-left': level*20 + 'px' }">{{ item.name }}</div>
+            <div :style="{ 'margin-left': level*20 + 'px' }">
+              <BaseIcon
+                v-if="item.icon"
+                :path="item.icon"
+                class="flex-none"
+                :class="activeInactiveStyle"
+                w="w-16"
+                :size="18"
+              />
+              {{ item.name }}
+            </div>
         </td>
         <td data-label="Description">
             {{ item.description }}

resources/js/Pages/Admin/Menu/Item/Create.vue

@@ -37,6 +37,7 @@ const form = useForm({
   enabled: true,
   parent_id: '',
   weight: '',
+  icon: '',
   roles: []
 })
 
@@ -152,6 +153,21 @@ const form = useForm({
             </div>
           </FormControl>
         </FormField>
+        <FormField
+          label="Icon"
+          :class="{ 'text-red-400': form.errors.icon }"
+        >
+          <FormControl
+            v-model="form.icon"
+            type="text"
+            placeholder="Enter Icon Path"
+            :error="form.errors.icon"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.icon">
+              {{ form.errors.icon }}
+            </div>
+          </FormControl>
+        </FormField>
 
         <BaseDivider />
 

resources/js/Pages/Admin/Menu/Item/Edit.vue

@@ -47,6 +47,7 @@ const form = useForm({
   enabled: props.item.enabled,
   parent_id: props.item.parent_id,
   weight: props.item.weight,
+  icon: props.item.icon,
   roles: props.itemHasRoles
 })
 </script>
@@ -161,6 +162,21 @@ const form = useForm({
             </div>
           </FormControl>
         </FormField>
+        <FormField
+          label="Icon"
+          :class="{ 'text-red-400': form.errors.icon }"
+        >
+          <FormControl
+            v-model="form.icon"
+            type="text"
+            placeholder="Enter Icon Path"
+            :error="form.errors.icon"
+          >
+            <div class="text-red-400 text-sm" v-if="form.errors.icon">
+              {{ form.errors.icon }}
+            </div>
+          </FormControl>
+        </FormField>
 
         <BaseDivider />