<template>
	<div class="layer-panel">
		<div class="icon" @click="showList = !showList">
			<svg-icon name="dc-layer" size="20" />
		</div>
		<layer-list v-show="showList" />
	</div>
</template>

<script setup lang="ts">
	import { ref, inject, computed } from 'vue'
	import layerList from './layer-list.vue'
	const props = defineProps({})
	const showList = ref(true)
</script>

<style lang="less" scoped>
	.layer-panel {
		position: absolute;
		width: 0;
		top: 2.2rem;
		left: 3rem;
		max-height: 90%;
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
		> div {
			border: 0.2rem solid #ebebeb;
			background: #ffffff;
			border-radius: 0.9rem;
			box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);
		}
		> .icon {
			flex-shrink: 0;
			width: 5rem;
			height: 5rem;
			border-radius: 1.2rem;
		}
	}
</style>
