fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

solve conflicts

Browse Source
This commit is contained in:
Henry Jordan
2020-12-02 22:37:19 +00:00
parent 81d12abb7d 80f1fee65e
commit cfe8120455
2 changed files with 119 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
resources/assets/js/components/menu/CustomSidebar.vue
View File

@@ -1,131 +1,129 @@
<template> <template>
<div> <div>
<sidebar-menu <sidebar-menu
ref="sidebar" ref="sidebar"
:width="sidebarWidth" :width="sidebarWidth"
:menu="menu" :menu="menu"
:hideToggle="hideToggle" :hideToggle="hideToggle"
:collapsed="collapsed" :collapsed="collapsed"
:theme="selectedTheme" :theme="selectedTheme"
:show-one-child="true" :show-one-child="true"
@item-click="onItemClick" @item-click="onItemClick"
> >
<div slot="header"> <div slot="header">
<div class="text-right" @click="onToggleClick"> <div class="text-right" @click="onToggleClick">
<b-icon :icon="className"></b-icon> <b-icon :icon="className"></b-icon>
</div> </div>
</div> </div>
</sidebar-menu> </sidebar-menu>
</div> </div>
</template> </template>
<script> <script>
import api from "./../../api/index"; import api from "./../../api/index";
export default { export default {
name: "CustomSidebar", name: "CustomSidebar",
data() { data() {
return { return {
menu: [], menu: [],
collapsed: false, collapsed: false,
isOnMobile: false, isOnMobile: false,
hideToggle: true, hideToggle: true,
selectedTheme: "", selectedTheme: "",
sidebarWidth: "310px", sidebarWidth: "310px",
}; };
},
computed: {
className() {
return this.collapsed
? "arrow-right-circle-fill"
: "arrow-left-circle-fill";
}, },
}, computed: {
mounted() { className() {
this.onResize(); return this.collapsed
window.addEventListener("resize", this.onResize); ? "arrow-right-circle-fill"
api.menu : "arrow-left-circle-fill";
.get() },
.then((response) => {
this.menu = response;
})
.catch((e) => {
console.error(e);
});
},
methods: {
onToggleClick() {
this.$refs.sidebar.$emit("toggle-collapse", this.collapsed);
this.collapsed = !this.collapsed;
}, },
createCounter() { mounted() {
let els = document.querySelectorAll("a[href='#/foo']"); this.onResize();
this.inboxCounter = document.createElement("span"); window.addEventListener("resize", this.onResize);
this.inboxCounter.setAttribute( api.menu
"class", .get()
"float-right badge badge-light navBadget" .then((response) => {
); this.menu = response;
this.inboxCounter.innerHTML += "5"; })
if (els && els[0]) { .catch((e) => {
els[0].appendChild(this.inboxCounter); console.error(e);
} });
}, },
onToggleCollapse(collapsed) { methods: {
console.log(collapsed); /**
this.collapsed = collapsed; * Toggle Handler, fired on click
*/
onToggleClick() {
this.collapsed = !this.collapsed;
this.$refs.sidebar.$emit("toggle-collapse", this.collapsed);
this.$emit("onToggleCollapse", this.collapsed);
},
/**
* Toggle item Handler, fired when a menu item is clicked
* @param {object} event - click event params
* @param {object} item - menu item params
* @param {object} node - html node
*/
onItemClick(event, item, node) {
this.$emit("OnClickSidebarItem", { item });
},
/**
* On resize event handler id the windows is resized
* collase and isMobile proerty will be updated
*/
onResize() {
if (window.innerWidth <= 767) {
this.isOnMobile = true;
this.collapsed = true;
} else {
this.isOnMobile = false;
this.collapsed = false;
}
},
}, },
onItemClick(event, item, node) {
this.$emit("OnClickSidebarItem", { item });
},
onResize() {
if (window.innerWidth <= 767) {
this.isOnMobile = true;
this.collapsed = true;
} else {
this.isOnMobile = false;
this.collapsed = false;
}
},
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.badge-custom { .badge-custom {
color: #000; color: #000;
background-color: #d4dfe6; background-color: #d4dfe6;
padding: 0px 6px; padding: 0px 6px;
font-size: 12px; font-size: 12px;
border-radius: 3px; border-radius: 3px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
} }
.text-right { .text-right {
color: white; color: white;
font-size: x-large; font-size: x-large;
margin: 3px; margin: 3px;
margin-right: 16px; margin-right: 16px;
} }
.sidebar-overlay { .sidebar-overlay {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background-color: #000; background-color: #000;
opacity: 0.5; opacity: 0.5;
z-index: 900; z-index: 900;
} }
pre { pre {
font-family: Consolas, monospace; font-family: Consolas, monospace;
color: #000; color: #000;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
padding: 15px; padding: 15px;
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
} }
</style> </style>

26
resources/assets/js/home/Home.vue
View File

@@ -5,7 +5,10 @@
<router-view /> <router-view />
</div> </div>
<CustomSidebar @OnClickSidebarItem="OnClickSidebarItem" /> <CustomSidebar
@OnClickSidebarItem="OnClickSidebarItem"
@onToggleCollapse="onToggleCollapse"
/>
<div <div
v-if="isOnMobile && !collapsed" v-if="isOnMobile && !collapsed"
class="sidebar-overlay" class="sidebar-overlay"
@@ -15,16 +18,7 @@
<component v-bind:is="page"></component> <component v-bind:is="page"></component>
</div> </div>
</div> </div>
</template> onResize() { </template>
if (window.innerWidth <= 767) {
this.isOnMobile = true;
this.collapsed = true;
} else {
this.isOnMobile = false;
this.collapsed = false;
}
},
<script> <script>
import CustomSidebar from "./../components/menu/CustomSidebar"; import CustomSidebar from "./../components/menu/CustomSidebar";
import MyCases from "./MyCases"; import MyCases from "./MyCases";
@@ -65,6 +59,14 @@ export default {
this.collapsed = false; this.collapsed = false;
} }
}, },
/**
* Toggle sidebar handler
* @param {Boolean} collapsed - if sidebar is collapsed true|false
*
*/
onToggleCollapse(collapsed) {
this.collapsed = collapsed;
}
}, },
}; };
</script> </script>
@@ -72,7 +74,7 @@ export default {
<style lang="scss"> <style lang="scss">
#home { #home {
padding-left: 310px; padding-left: 310px;
transition: 0.3s ease; transition: 0.3s;
} }
#home.collapsed { #home.collapsed {
padding-left: 50px; padding-left: 50px;