<template>
  <div class="menu__container">
    <div class="menu__top">
      <slot name="top"></slot>
    </div>

    <BmsMenuNav :items="items" :active-link="activeLink">
      <template #additional>
        <slot name="additional"></slot>
      </template>
      <template #icon-end="{ item }">
        <slot name="icon-end" :item="item"></slot>
      </template>
    </BmsMenuNav>

    <div class="menu__copyright">
      <slot name="footer">
        <p class="menu__copyright-madein">Made with ♥ by BMS</p>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { RouteLocationNormalizedLoaded } from 'vue-router';
import { MenuItem, ParentMenuItem } from '@/models';
import BmsMenuNav from './BmsMenuNav.vue';

interface Props {
  items: (MenuItem | ParentMenuItem)[];
  activeLink: RouteLocationNormalizedLoaded;
}
defineProps<Props>();
</script>

<style lang="scss" scoped>
.menu {
  &__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--bms-white);
    border-right: 1px solid var(--bms-border-color);
    padding: 0;

    nav {
      scrollbar-width: none;
      padding: 0;
      overflow-x: hidden;
      max-width: calc(var(--bms-menu-width) + 5px);

      :deep(ul) {
        li {
          width: var(--bms-menu-width);
        }
      }
    }
  }

  &__top {
    margin: 0.5em;
  }

  &__copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    overflow-x: hidden;
  }
}
</style>
