front/components.d.ts

@@ -26,8 +26,10 @@ declare module 'vue' {
     IMdiHexagonOutline: typeof import('~icons/mdi/hexagon-outline')['default']
     IMdiHome: typeof import('~icons/mdi/home')['default']
     IMdiHomeOutline: typeof import('~icons/mdi/home-outline')['default']
+    IMdiMinusCircle: typeof import('~icons/mdi/minus-circle')['default']
     IMdiMonitorScreenshot: typeof import('~icons/mdi/monitor-screenshot')['default']
     IMdiPagePreviousOutline: typeof import('~icons/mdi/page-previous-outline')['default']
+    IMdiPlusCircle: typeof import('~icons/mdi/plus-circle')['default']
     IMdiShop: typeof import('~icons/mdi/shop')['default']
     IMdiVideo3d: typeof import('~icons/mdi/video3d')['default']
     Item: typeof import('./src/components/Floorplan/item.vue')['default']

front/src/assets/sidebar.scss

@@ -43,7 +43,6 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
-    box-shadow: $boxShadow;
     color: #484848;
 
     &.open {
@@ -62,34 +61,48 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
         background-color: $bg;
         border-top-left-radius: 0.5rem;
         border-bottom-left-radius: 0.5rem;
-
+        box-shadow: $boxShadow;
-        // padding: 1.5rem;
 
         color: $textColor;
     }
 
-    &-list {}
+    &-accordion {
+        padding: 1.125rem 1rem;
+        border-bottom: 2px solid var(--primary-color);
+        max-height: 4rem;
+        transition: max-height 300ms linear;
 
-    &-list-item {
+        &:last-child {
-        font-size: 1.5rem;
+            border-bottom: none;
-        color: $textColor2;
+        }
 
-        display: flex;
+        h3 {
+            font-weight: 700;
+            font-size: 1.25rem;
+        }
 
-        input {
+        &-title {
-            margin-right: 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 1rem;
+            color: var(--primary-color);
+            cursor: pointer;
 
-            &.checked+label {
+            svg {
-                color: $primary;
+                flex-shrink: 0;
             }
         }
+
+        &.open {
+            max-height: 50vh;
+        }
     }
 
     h2 {
         font-size: 1.5rem;
         text-align: center;
-        margin-bottom: 1rem;
+        padding: 0.5rem 1rem;
-        padding: 0.5rem 0;
         min-height: 3rem;
         display: flex;
         flex-wrap: wrap;
@@ -102,23 +115,4 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
 
         border-bottom: 2px solid var(--primary-color);
     }
-
-    p {
-        font-size: 1rem;
-        margin-bottom: 1rem;
-    }
-
-    a {
-        background-color: darken($textColor2, 30%);
-        opacity: 0.97;
-        border-radius: 1rem;
-        height: 3.75rem;
-        color: $primary;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-decoration: none;
-        font-size: 2rem;
-    }
 }

front/src/components/Promo/sidebar.vue

@@ -18,11 +18,21 @@ const openedChange = () => {
 
 watch(() => sidebar, () => {
     if (sidebar.is_open == false) {
-        opened_desc.value = null
+        opened_desc.value = null;
+        open_accordions.value = []
     } else {
         opened_desc.value = sidebar.id_clickable
     }
 }, { deep: true })
+
+const open_accordions = ref([] as string[])
+const toggleAccordion = (name: string) => {
+    if (open_accordions.value.includes(name)) {
+        open_accordions.value.splice(open_accordions.value.indexOf(name), 1)
+    } else {
+        open_accordions.value.push(name)
+    }
+}
 </script>
 <template>
     <div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
@@ -30,7 +40,21 @@ watch(() => sidebar, () => {
         <template v-else>
             <div class="sidebar-content">
                 <h2>{{ sidebar_scene.name }}</h2>
-                <div class="sidebar-list">
+                <div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('obj') }]">
+                    <div class="sidebar-accordion-title" @click="toggleAccordion('obj')">
+                        <i-mdi-minus-circle v-if="open_accordions.includes('obj')" />
+                        <i-mdi-plus-circle v-else />
+                        <h3>Объекты</h3>
+                    </div>
+                </div>
+                <div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('desc') }]">
+                    <div class="sidebar-accordion-title" @click="toggleAccordion('desc')">
+                        <i-mdi-minus-circle v-if="open_accordions.includes('desc')" />
+                        <i-mdi-plus-circle v-else />
+                        <h3>Описание</h3>
+                    </div>
+                </div>
+                <div class="sidebar-list" v-if="false">
                     <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.toString()"
                             :checked="opened_desc == item.id" @change="openedChange"
@@ -39,7 +63,7 @@ watch(() => sidebar, () => {
                     </div>
                 </div>
             </div>
-            <div class="sidebar-content" v-if="sidebar.title">
+            <div class="sidebar-content" v-if="false">
                 <h2>{{ sidebar.title }}</h2>
                 <div class="sidebar-inner" v-if="sidebar.description">
                     <template v-for="p in sidebar.description.replace(/(\n|\r)+/g, '\n').split('\n')">