62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
sideBarCollapsed: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
toggleSideBar: []
|
|
}>()
|
|
</script>
|
|
<template>
|
|
<label
|
|
class="dui-btn-ghost dui-btn dui-btn-sm dui-btn-circle relative inline-grid cursor-pointer select-none place-content-center"
|
|
>
|
|
<input type="checkbox" @click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed" />
|
|
<svg
|
|
class="swap-off fill-current"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
|
|
</svg>
|
|
<svg
|
|
class="swap-on fill-current"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<polygon
|
|
points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"
|
|
/>
|
|
</svg>
|
|
</label>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
input {
|
|
appearance: none;
|
|
}
|
|
label > * {
|
|
transition-duration: 0.2s;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-property: transform, opacity;
|
|
grid-column-start: 1;
|
|
grid-row-start: 1;
|
|
}
|
|
input:checked ~ .swap-off {
|
|
opacity: 0;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
input:checked ~ .swap-on {
|
|
opacity: 1;
|
|
transform: rotate(0deg);
|
|
}
|
|
.swap-on {
|
|
opacity: 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
</style>
|