100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
<script>
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { SidebarMenu } from "vue-sidebar-menu";
|
|
import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
|
|
import { h, markRaw } from "vue";
|
|
|
|
const separator = {
|
|
template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">',
|
|
};
|
|
|
|
const faIcon = (props) => {
|
|
return {
|
|
element: markRaw({
|
|
render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]),
|
|
}),
|
|
};
|
|
};
|
|
|
|
export default {
|
|
name: "SideBarView",
|
|
components: {
|
|
SidebarMenu,
|
|
},
|
|
|
|
// props: {
|
|
// sidebar: {
|
|
// type: Boolean,
|
|
// required: false
|
|
// }
|
|
// },
|
|
data() {
|
|
return {
|
|
menu: [
|
|
{
|
|
header: "Services",
|
|
hiddenOnCollapse: true,
|
|
},
|
|
{
|
|
href: "/",
|
|
title: "Home",
|
|
icon: faIcon({ icon: "fa-solid fa-house" }),
|
|
},
|
|
{
|
|
href: "/about",
|
|
title: "About",
|
|
icon: faIcon({ icon: "fa-solid fa-question" }),
|
|
},
|
|
{
|
|
component: markRaw(separator),
|
|
},
|
|
{
|
|
href: "/referenceId",
|
|
title: "Contacts Lookup",
|
|
icon: faIcon({ icon: "fa-solid fa-rectangle-list" }),
|
|
},
|
|
{
|
|
href: "/interactionsFlow",
|
|
title: "Interactions Flow",
|
|
icon: faIcon({ icon: "fa-solid fa-route" }),
|
|
},
|
|
{
|
|
href: "/customerAccount/12345",
|
|
title: "Customer Account Example",
|
|
icon: faIcon({ icon: "fa-solid fa-id-card" }),
|
|
},
|
|
],
|
|
collapsed: false,
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.onResize();
|
|
window.addEventListener("resize", this.onResize);
|
|
console.log();
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
if (window.innerWidth <= 767) {
|
|
this.isOnMobile = true;
|
|
this.collapsed = true;
|
|
} else {
|
|
this.isOnMobile = false;
|
|
this.collapsed = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div v-if="$route.query.sidebar" id="sidebar">
|
|
<sidebar-menu
|
|
v-model:collapsed="collapsed"
|
|
:menu="menu"
|
|
:show-one-child="true"
|
|
:relative="true"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<style></style>
|