<template>
  <div :class="[
    getModifiersClass('c-sidebar-container', modifiers),
    positionStatic && 'position-static'
  ]" :data-element-id="sidebarId"
    :aria-expanded="getModifiersClass('c-sidebar-container', modifiers)?.includes('c-sidebar-container--pinned') ? undefined : 'false'">
    <div :class="[
      getModifiersClass('c-sidebar', modifiers),
      positionStatic && 'position-static'
    ]">
      <div class="c-sidebar__header">
        <slot name="header" />
      </div>
      <div class="c-sidebar__content">
        <slot name="content" />
      </div>
      <div class="c-sidebar__footer">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from './sidebar.config';
import useComponentModifiers from '../../composable/useComponentModifiers';

defineProps<{
  sidebarId?: string;
  positionStatic?: boolean;
  modifiers?: ModifierItems;
}>();

const { getModifiersClass } = useComponentModifiers();
</script>
