<template>
  <nav class="navigation">
    <div class="navigation__list">
      <slot></slot>
    </div>
  </nav>
</template>

<style lang="scss">
.navigation {
  position: fixed;
  inset: var(--navigation-position);
  overflow: hidden;

  width: var(--navigation-width);
  height: var(--navigation-height);

  background-color: var(--color-navigation-background);

  transition: 0.4s;
  z-index: 1;

  &:hover {
    width: var(--navigation-width-expanded);
  }

  &__list {
    display: flex;
    flex-flow: var(--navigation-flow);
    justify-content: var(--navigation-justify);
    align-items: var(--navigation-align);

    width: 100%;
    height: 100%;
  }
}
</style>
