159 lines
3.8 KiB
Vue
159 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { RouterLink, useRoute } from 'vue-router';
|
|
import { usePromoSidebar } from '../../stores/promo_sidebar';
|
|
import { usePromoScene } from '../../stores/promo_scene';
|
|
|
|
const sidebar = usePromoSidebar()
|
|
const sidebar_scene = usePromoScene()
|
|
const sidebar_obj = ref()
|
|
|
|
const route = useRoute()
|
|
|
|
</script>
|
|
<template>
|
|
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
|
|
<a href="#" @click.prevent="sidebar.close" class="sidebar-close">
|
|
<i-mdi-close />
|
|
</a>
|
|
<div class="sidebar-content">
|
|
<template v-if="!sidebar.is_open"></template>
|
|
<template v-else-if="sidebar.title">
|
|
<h2>{{ sidebar.title }}</h2>
|
|
<template v-if="sidebar.description">
|
|
<template v-for="p in sidebar.description.split('\n')">
|
|
<p>{{ p }}</p>
|
|
</template>
|
|
</template>
|
|
<RouterLink class="btn" :to="`/${route.params.item}/${sidebar.target}`" v-if="sidebar.target">
|
|
{{ sidebar.target_name }}
|
|
</RouterLink>
|
|
</template>
|
|
<template v-else>
|
|
<span class="sidebar-list-item" v-for="item in sidebar_scene.list">
|
|
<input type="checkbox" v-model="item.is_enabled" :id="item.name" :disabled="item.can_not_disable" />
|
|
<label :for="item.name">
|
|
<h3>{{ item.name }}</h3>
|
|
<template v-for="p in (item.description || '').split('\n')">
|
|
<p>{{ p }}</p>
|
|
</template>
|
|
</label>
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.sidebar {
|
|
min-width: 20vw;
|
|
max-width: 23vw;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
right: -50%;
|
|
bottom: 0;
|
|
transition: all 300ms linear;
|
|
line-height: 1.25;
|
|
|
|
padding: 3rem 2rem 2rem;
|
|
|
|
@media(max-width:768px) {
|
|
padding-top: 2rem;
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
max-width: 48%;
|
|
}
|
|
|
|
&.open {
|
|
right: 0;
|
|
}
|
|
|
|
&-close {
|
|
position: absolute;
|
|
left: 1.5rem;
|
|
top: 0.5rem;
|
|
font-size: 2rem;
|
|
color: black;
|
|
|
|
@media(max-width:768px) {
|
|
left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
&-list-item {
|
|
display: flex;
|
|
|
|
label {
|
|
flex-grow: 1;
|
|
margin-left: 0.25rem
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
margin: 1rem;
|
|
|
|
@media(max-width:768px) {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
p,
|
|
h3 {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.25rem;
|
|
|
|
@media(max-width:768px) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
|
|
@media(max-width:768px) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: block;
|
|
margin: 0 auto;
|
|
|
|
background: #4FD1C5;
|
|
background: linear-gradient(90deg, rgba(129, 230, 217, 1) 0%, rgba(79, 209, 197, 1) 100%);
|
|
color: #313133;
|
|
transition: .2s linear;
|
|
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
|
|
text-align: center;
|
|
text-decoration: none;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.3px;
|
|
|
|
border-radius: 1000px;
|
|
|
|
box-shadow: 12px 12px 24px rgba(79, 209, 197, .64);
|
|
}
|
|
|
|
.btn:hover {
|
|
box-shadow: 0 0 0 2px white, inset 0 0 0 4px #3C82F8;
|
|
}
|
|
}
|
|
</style> |