<template>
  <header>
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <a
          class="navbar-brand"
          href="/"
        >Reslate ES</a>
        <button
          class="navbar-toggler"
          type="button"
          style="height:1.25rem"
          data-bs-toggle="collapse"
          data-bs-target="#navigation"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="gg-menu" />
        </button>
        <div
          id="navigation"
          class="collapse navbar-collapse"
        >
          <div
            v-for="route in $router.getRoutes()"
            :key="route.path"
          >
            <div class="navbar-nav">
              <router-link
                class="nav-link"
                :to="route.path"
                active-class="active"
              >
                {{ route.name }}
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <router-view />
  </main>
  <footer>
    <!-- TODO: Proper footer. -->
  </footer>
</template>

<script>
  import "/node_modules/bootstrap/js/dist/collapse";
  export default {
    data() {
      console.log(this.$router.getRoutes());
      return {
      };
    }
  };
</script>

<style lang="scss">
@use "sass:color";
@use "@/styles/themer";

@use "/node_modules/css.gg/icons/scss/menu.scss";

@import "/node_modules/bootstrap/scss/functions";
@import "/node_modules/bootstrap/scss/variables";
@import "/node_modules/bootstrap/scss/mixins";
@import "/node_modules/bootstrap/scss/utilities";
@import "/node_modules/bootstrap/scss/nav";
@import "/node_modules/bootstrap/scss/navbar";
@import "/node_modules/bootstrap/scss/transitions";


.navbar {
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;

  border-bottom-style: solid;
  border-bottom-width: 1px;

  @include themer.themed {
    border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
    background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
  }

  .navbar-brand {
    @extend .navbar-brand;
    @include themer.themed {
      color: themer.color-of("navbar-brand");
    }
  }

  .nav-link {
    @include themer.themed {
      color: themer.color-of("navbar-link");
    }
    &.active {
      @include themer.themed {
        color: themer.color-of("navbar-active");
      }
    }
  }

  .navbar-toggler {
    @include themer.themed {
      color: color.invert(themer.color-of("navbar"), 100%);
    }
  }
}
</style>