front/src/assets/sidebar.scss

@@ -27,7 +27,7 @@ $primary: #E75B12;
     }
 
     &.open {
-        right: 20vw;
+        right: 31vw;
 
         svg {
             transform: scale(-1, 1);
@@ -37,7 +37,7 @@ $primary: #E75B12;
 
 .sidebar {
     position: fixed;
-    width: 19vw;
+    width: 30vw;
     top: 4rem;
     right: -50%;
     bottom: 0;
@@ -51,6 +51,11 @@ $primary: #E75B12;
         right: 0;
     }
 
+    &-inner {
+        max-height: calc(100vh - 38rem);
+        overflow: auto;
+    }
+    
     &-content {
         max-height: 100%;
         overflow: auto;

front/src/components/Promo/sidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
@@ -15,6 +15,12 @@ const opened_desc = ref()
 const openedChange = () => {
     sidebar.open(opened_desc.value)
 }
+
+watch(() => sidebar.$state.is_open, () => {
+    if (sidebar.is_open == false) {
+        opened_desc.value = null
+    }
+})
 </script>
 <template>
     <div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
@@ -24,20 +30,20 @@ const openedChange = () => {
                 <h2>{{ sidebar_scene.name }}</h2>
                 <div class="sidebar-list">
                     <div class="sidebar-list-item" v-for="item in sidebar_scene.list">
-                        <input type="radio" v-model=opened_desc :value="item.id" :id="item.id"
+                        <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 }]" />
-                        <label :for="item.id">{{ item.name }}</label>
+                        <label :for="item.id.toString()">{{ item.name }}</label>
                     </div>
                 </div>
             </div>
             <div class="sidebar-content" v-if="sidebar.title">
                 <h2>{{ sidebar.title }}</h2>
-                <template v-if="sidebar.description">
+                <div class="sidebar-inner" v-if="sidebar.description">
                     <template v-for="p in sidebar.description.split('\n')">
                         <p>{{ p }}</p>
                     </template>
-                </template>
+                </div>
                 <RouterLink class="btn" :to="`/${route.params.item}/${sidebar.target}`" v-if="sidebar.target">
                     <i-mdi-arrow-right />
                 </RouterLink>

front/src/stores/promo_sidebar.ts

@@ -13,7 +13,7 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
         } as PromoSidebar
     },
     actions: {
-        open(id: number) {
+        open(id?: number) {
             if (id) {
                 const clickable = useClickable()
                 const target = clickable.list.find(el => el.id == id)