added side-bar navigation

src/App.vue

@@ -1,8 +1,143 @@
+<script>
+import { h, markRaw } from "vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { SidebarMenu } from "vue-sidebar-menu";
+import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
+
+const faIcon = (props) => {
+  return {
+    element: markRaw({
+      render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]),
+    }),
+  };
+};
+
+export default {
+  name: "App",
+  components: {
+    SidebarMenu,
+  },
+  data() {
+    return {
+      menu: [
+        {
+          header: "Services",
+          hiddenOnCollapse: true,
+        },
+        {
+          href: "/",
+          title: "Home",
+          icon: faIcon({ icon: "fa-solid fa-cog" }),
+        },
+        {
+          href: "/about",
+          title: "About",
+          icon: faIcon({ icon: "fa-solid fa-cog" }),
+        },
+        {
+          href: "/referenceId",
+          title: "Contacts Lookup",
+          icon: faIcon({ icon: "fa-solid fa-cog" }),
+        },
+        {
+          href: "/interactionsFlow",
+          title: "Interactions Flow",
+          icon: faIcon({ icon: "fa-solid fa-cog" }),
+        },
+        {
+          href: "/customerAccount/12345",
+          title: "Customer Account Example",
+          icon: faIcon({ icon: "fa-solid fa-cog" }),
+        },
+      ],
+      collapsed: false,
+    };
+  },
+  mounted() {
+    this.onResize();
+    window.addEventListener("resize", this.onResize);
+  },
+  methods: {
+    onResize() {
+      if (window.innerWidth <= 767) {
+        this.isOnMobile = true;
+        this.collapsed = true;
+      } else {
+        this.isOnMobile = false;
+        this.collapsed = false;
+      }
+    },
+  },
+};
+</script>
 <template>
-  <router-link to="/">Home</router-link>
-  <router-link to="/about">About</router-link>
-  <router-link to="/referenceId">Reference ID Tracker</router-link>
-  <router-link to="/interactionsFlow">Interactions Flow</router-link>
-  <router-link to="/customerAccount">Customer Account</router-link>
-  <router-view></router-view>
+  <sidebar-menu
+    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">
+      <div class="container">
+        <router-view></router-view>
+      </div>
+    </div>
+  </div>
+  <!-- <div>
+    <router-link to="/">Home</router-link>
+    <router-link to="/about">About</router-link>
+    <router-link to="/referenceId">Reference ID Tracker</router-link>
+    <router-link to="/interactionsFlow">Interactions Flow</router-link>
+    <router-link to="/customerAccount">Customer Account</router-link>
+  </div> -->
 </template>
+<style lang="scss">
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600");
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: 18px;
+  background-color: #f2f4f7;
+  color: #262626;
+}
+
+#services {
+  padding-left: 290px;
+  transition: 0.3s ease;
+}
+
+#services.collapsed {
+  padding-left: 65px;
+}
+
+#services.onmobile {
+  padding-left: 65px;
+}
+
+.sidebar-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 900;
+}
+
+.services {
+  padding: 50px;
+}
+
+.container {
+  max-width: 900px;
+}
+</style>

src/fontawesome.js

@@ -0,0 +1,27 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+import {
+  faDownload,
+  faCode,
+  faCogs,
+  faBell,
+  faPalette,
+  faLock,
+  faCog,
+  faListUl,
+  faFileAlt,
+  faListAlt,
+} from "@fortawesome/free-solid-svg-icons";
+
+library.add(
+  faDownload,
+  faCode,
+  faCogs,
+  faBell,
+  faPalette,
+  faLock,
+  faCog,
+  faListUl,
+  faFileAlt,
+  faListAlt
+);

src/main.js

@@ -3,4 +3,10 @@ import "./style.css";
 import App from "./App.vue";
 import router from "./router";
 
-createApp(App).use(router).mount("#app");
+import "./fontawesome";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+createApp(App)
+  .use(router)
+  .component("font-awesome-icon", FontAwesomeIcon)
+  .mount("#app");