<template>
  <!-- 侧边栏内容 -->
  <div 
    v-if="!collapsed"
    class="media-sidebar"
  >
    <div class="sidebar-content">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  position: 'left' | 'right'
  collapsed: boolean
  hasContent?: boolean
}>()

defineEmits<{
  'toggle-collapse': []
}>()
</script>

<style scoped>
/* 侧边栏内容 */
.sidebar-content {
  padding: 32px;
}

/* 响应式设计 */

@media (max-width: 768px) {
  .media-sidebar {
    position: fixed;
    top: 80px;
    left: 20px;
    right: 20px;
    z-index: 1000;
    max-height: 50vh;
    width: auto;
  }
}
</style>