<script setup lang="ts">
interface Props {
  horizontalPosition: 'left' | 'right';
  verticalPosition: 'top' | 'bottom';
}

withDefaults(defineProps<Props>(), {
    horizontalPosition: 'left',
    verticalPosition: 'top'
})
</script>

<template>
<div
    class="sidebar"
    :style="{
        top: verticalPosition === 'top' ? 0 : undefined,
        bottom: verticalPosition === 'bottom' ? 0 : undefined,
        left: horizontalPosition === 'left' ? 0 : undefined,
        right: horizontalPosition === 'right' ? 0 : undefined,
    }"
>
    <slot></slot>
</div>
</template>

<style scoped>
.sidebar {
    position: fixed;

    padding: 10px;

    z-index: 2;

    height: 100vh;
    overflow: auto;
}

.sidebar::-webkit-scrollbar{
    display: none;
  }
</style>
