sidebar with elements

front/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     IMdiHexagonOutline: typeof import('~icons/mdi/hexagon-outline')['default']
     IMdiHome: typeof import('~icons/mdi/home')['default']
     IMdiMonitorScreenshot: typeof import('~icons/mdi/monitor-screenshot')['default']
+    IMdiPagePreviousOutline: typeof import('~icons/mdi/page-previous-outline')['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/components/Promo/main.vue

@@ -73,10 +73,15 @@ watch(() => route.params.target, () => {
                     <TresShadowMaterial :opacity="0.2" />
                 </TresMesh>
             </TresCanvas>
-            <RouterLink to="/promo/main/" class="homelink">
+            <div class="homelink">
+                <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">
+                    <i-mdi-page-previous-outline />
+                </a>
+                <RouterLink to="/promo/main/">
                     <i-mdi-home />
                 </RouterLink>
             </div>
+        </div>
         <Sidebar />
     </div>
 </template>
@@ -96,18 +101,25 @@ watch(() => route.params.target, () => {
     filter: blur(10px);
     transition: all 300ms linear;
 }
+
 .homelink {
     position: absolute;
     right: 0;
     bottom: 0;
+
+    svg {
+        font-size: 3rem;
+        padding: 1.5rem;
+    }
+
+    a {
+        margin-bottom: 2rem;
         border-radius: 50%;
         border: 1px solid white;
         background: white;
-    padding: 0.5rem;
         line-height: 1;
         font-size: 0;
-    svg {
+        display: block;
-        font-size: 5rem;
     }
 }
 </style>