updated icons

src/App.vue

@@ -4,6 +4,10 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { SidebarMenu } from "vue-sidebar-menu";
 import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
 
+const separator = {
+  template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">',
+}
+
 const faIcon = (props) => {
   return {
     element: markRaw({
@@ -27,27 +31,30 @@ export default {
         {
           href: "/",
           title: "Home",
-          icon: faIcon({ icon: "fa-solid fa-cog" }),
+          icon: faIcon({ icon: "fa-solid fa-house" }),
         },
         {
           href: "/about",
           title: "About",
-          icon: faIcon({ icon: "fa-solid fa-cog" }),
+          icon: faIcon({ icon: "fa-solid fa-question" }),
+        },
+        {
+          component: markRaw(separator),
         },
         {
           href: "/referenceId",
           title: "Contacts Lookup",
-          icon: faIcon({ icon: "fa-solid fa-cog" }),
+          icon: faIcon({ icon: "fa-solid fa-rectangle-list" }),
         },
         {
           href: "/interactionsFlow",
           title: "Interactions Flow",
-          icon: faIcon({ icon: "fa-solid fa-cog" }),
+          icon: faIcon({ icon: "fa-solid fa-route" }),
         },
         {
           href: "/customerAccount/12345",
           title: "Customer Account Example",
-          icon: faIcon({ icon: "fa-solid fa-cog" }),
+          icon: faIcon({ icon: "fa-solid fa-id-card" }),
         },
       ],
       collapsed: false,
@@ -75,8 +82,6 @@ export default {
     v-model:collapsed="collapsed"
     :menu="menu"
     :show-one-child="true"
-    @update:collapsed="onToggleCollapse"
-    @item-click="onItemClick"
   />
   <div id="services" :class="[{ collapsed: collapsed }]">
     <div class="services">

src/fontawesome.js

@@ -1,6 +1,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 
 import {
+  faIdCard,
+  faRoute,
+  faHouse,
+  faQuestion,
+  faRectangleList,
   faDownload,
   faCode,
   faCogs,
@@ -14,6 +19,11 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
+  faIdCard,
+  faRoute,
+  faRectangleList,
+  faQuestion,
+  faHouse,
   faDownload,
   faCode,
   faCogs,

vite.config.js

@@ -4,4 +4,9 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      'vue': 'vue/dist/vue.esm-bundler',
+    },
+  }
 });