|
|
@ -12,7 +12,7 @@ const props = defineProps<{
|
|
|
|
collapsed?: boolean
|
|
|
|
collapsed?: boolean
|
|
|
|
}>()
|
|
|
|
}>()
|
|
|
|
|
|
|
|
|
|
|
|
const collapsed = ref(!!props.collapsed)
|
|
|
|
const collapsed = ref(props.collapsible && props.collapsed)
|
|
|
|
|
|
|
|
|
|
|
|
function toggle() {
|
|
|
|
function toggle() {
|
|
|
|
if (props.collapsible) {
|
|
|
|
if (props.collapsible) {
|
|
|
@ -23,7 +23,7 @@ function toggle() {
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<section class="VPSidebarGroup" :class="{ collapsible, collapsed }">
|
|
|
|
<section class="VPSidebarGroup" :class="{ collapsible, collapsed }">
|
|
|
|
<div class="title" role="button" @click="toggle">
|
|
|
|
<div class="title" :role="collapsible ? 'button' : undefined" @click="toggle">
|
|
|
|
<h2 class="title-text">{{ text }}</h2>
|
|
|
|
<h2 class="title-text">{{ text }}</h2>
|
|
|
|
<div class="action">
|
|
|
|
<div class="action">
|
|
|
|
<VPIconMinusSquare class="icon minus" />
|
|
|
|
<VPIconMinusSquare class="icon minus" />
|
|
|
@ -47,10 +47,6 @@ function toggle() {
|
|
|
|
z-index: 2;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.VPSidebarGroup.collapsible .title {
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.title-text {
|
|
|
|
.title-text {
|
|
|
|
padding-top: 6px;
|
|
|
|
padding-top: 6px;
|
|
|
|
padding-bottom: 6px;
|
|
|
|
padding-bottom: 6px;
|
|
|
|