github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-19 12:17:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update sidebar

Browse Source
This commit is contained in:
Fine 2023-02-14 10:56:42 +08:00
parent 598a27bb36
commit 1850e6a9e9
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/layout/components/SideBar.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="side-bar" v-if="showMenu" @click="isCollapse = false" @mouseleave="isCollapse = true"> <div class="side-bar" v-if="showMenu" @click="isCollapse = false" @mouseleave="closeMenu">
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'"> <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" /> <Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
</div> </div>
@ -81,6 +81,8 @@ limitations under the License. -->
const route = useRoute(); const route = useRoute();
const isCollapse = ref(true); const isCollapse = ref(true);
const showMenu = ref(true); const showMenu = ref(true);
const open = ref<boolean>(false);
const timer = ref<any>();
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) { if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
appStore.setIsMobile(true); appStore.setIsMobile(true);
@ -97,8 +99,21 @@ limitations under the License. -->
return menus.filter((d) => d.meta && !d.meta.notShow); return menus.filter((d) => d.meta && !d.meta.notShow);
}; };
function setCollapse() { function setCollapse() {
open.value = true;
if (timer.value) {
clearTimeout(timer.value);
}
timer.value = setTimeout(() => {
if (open.value) {
isCollapse.value = false; isCollapse.value = false;
} }
open.value = false;
}, 1000);
}
function closeMenu() {
isCollapse.value = true;
open.value = false;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>