<template>
  <h4 v-if="heading" class="c-sidebar__label">
    {{ heading }}
  </h4>
  <nav class="c-sidebar-nav" ref="sidebar-nav">
    <slot></slot>
  </nav>
</template>

<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';

const { customScript } = defineProps<{
  heading?: string;
  customScript?: boolean;
}>();

const sidebarNav = useTemplateRef('sidebar-nav');

// initialise script for opening and closing sidebar nav items, if customScript is false
if (!customScript) {
  onMounted(() => {
    import('./sidebar-nav').then((SidebarNav) => {
      new SidebarNav.default(sidebarNav.value);
    });
  });
}
</script>
