ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar

This commit is contained in:
aarizona 2024-08-31 09:28:21 +03:00
parent f3e2a31a90
commit 00652c384f
3 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/assets/sidebar.scss
View File

@ -103,7 +103,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
}
&-content {
max-height: 20vh;
max-height: 32vh;
overflow: auto;
margin-top: 1.125rem;
padding-left: 2rem;

24
front/src/components/sidebar.vue
View File

@ -8,23 +8,14 @@ const sidebar = usePromoSidebar()
const sidebar_scene = usePromoScene()
const route = useRoute()
const sidebar_obj = ref()
const opened_desc = ref()
const clickable_obj = ref()
const openedChange = () => {
sidebar.open(opened_desc.value)
}
watch(() => sidebar, () => {
if (sidebar.is_open == false) {
opened_desc.value = null;
} else {
opened_desc.value = sidebar.id_clickable
}
}, { deep: true })
watch(clickable_obj, () => {
sidebar.open(clickable_obj.value);
})
</script>
<template>
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]">
<template v-if="!sidebar.is_open"></template>
<template v-else>
<div class="sidebar-content">
@ -52,9 +43,8 @@ watch(() => sidebar, () => {
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('clickable')">
<div class="sidebar-list-item" v-for="item in sidebar_scene.clickable">
<input type="radio" v-model=opened_desc :value="item.id" :id="item.id.toString()"
:checked="opened_desc == item.id" @change="openedChange"
:class="[{ checked: opened_desc == item.id }]" />
<input type="radio" name="clickable" v-model="clickable_obj" :value="item.id"
:id="item.id.toString()" />
<label :for="item.id.toString()">{{ item.name }}</label>
</div>
</div>

8
front/src/stores/promo_sidebar.ts
View File

@ -28,7 +28,9 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
if (target?.target) {
sidebar_data.target = target.target.toString()
}
this.accordions.push('desc')
if (!this.isAccOpen('desc')) {
this.accordions.push('desc')
}
this.setData(sidebar_data)
}
@ -45,11 +47,15 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
}
},
toggleAccordion(name: string) {
if (name == 'obj' && this.accordions.includes('clickable')) this.toggleAccordion('clickable')
if (name == 'clickable' && this.accordions.includes('obj')) this.toggleAccordion('obj')
if (this.accordions.includes(name)) {
this.accordions.splice(this.accordions.indexOf(name), 1)
} else {
this.accordions.push(name)
}
},
isAccOpen(name: string) {
return this.accordions.includes(name)