<template>
  <div class="sidebar-layout">
    <div class="sidebar-layout-main">
      <slot />
    </div>
    <EventsMiniSidebar :events="upcomingEvents" />
  </div>
</template>

<script setup>
const props = defineProps({
  limit: { type: Number, default: 3 },
})

const { data: upcomingEvents } = await useFetch('/api/events', {
  query: { limit: props.limit, upcoming: true },
  default: () => [],
})
</script>

<style scoped>
.sidebar-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 200px;
  align-items: stretch;
  min-height: 0;
}

.sidebar-layout-main {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 1024px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}
</style>
