front/src/assets/sidebar.scss

@@ -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;

front/src/components/sidebar.vue

@@ -8,23 +8,14 @@ const sidebar = usePromoSidebar()
 const sidebar_scene = usePromoScene()
 const route = useRoute()
 
-const sidebar_obj = ref()
+const clickable_obj = ref()
-const opened_desc = ref()
 
-const openedChange = () => {
+watch(clickable_obj, () => {
-    sidebar.open(opened_desc.value)
+    sidebar.open(clickable_obj.value);
-}
+})
-
-watch(() => sidebar, () => {
-    if (sidebar.is_open == false) {
-        opened_desc.value = null;
-    } else {
-        opened_desc.value = sidebar.id_clickable
-    }
-}, { deep: true })
 </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()"
+                            <input type="radio" name="clickable" v-model="clickable_obj" :value="item.id"
-                                :checked="opened_desc == item.id" @change="openedChange"
+                                :id="item.id.toString()" />
-                                :class="[{ checked: opened_desc == item.id }]" />
                             <label :for="item.id.toString()">{{ item.name }}</label>
                         </div>
                     </div>

front/src/stores/promo_sidebar.ts

@@ -28,7 +28,9 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
                 if (target?.target) {
                     sidebar_data.target = target.target.toString()
                 }
+                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)