<template>
  <nav class="nav-sidebar">
    <div
      v-if="$slots.logo"
      class="nav-sidebar__logo"
    >
      <slot name="logo" />
    </div>
    <div class="nav-sidebar__content">
      <slot />
    </div>
    <div class="nav-sidebar__bottom">
      <slot name="bottom" />
    </div>
  </nav>
</template>

<style lang="scss">
.nav-sidebar {
  display: flex;
  flex-direction: column;

  background: #{$clr-black};
  color: #{$clr-white};
  padding: 32px 27px 32px 27px;

  width: 120px;
  height: 100%;
  text-align: center;

  overflow: hidden;

  &__logo {
    margin-bottom: 60px;
  }

  &__content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 20px;
    margin-inline: -27px;
    flex: 1;
  }
}
</style>
