<template>
  <header>
    <img alt="LCC logo" class="logo" src="../../assets/logo.svg" width="125" height="125" />
    <nav>
      <ul>
        <li><navigation-element class="navigationbox" to="/calculations">My Calculation</navigation-element></li>
        <li><navigation-element class="navigationbox" to="/reports">Reporting</navigation-element></li>
        <li><navigation-element class="navigationbox" to="/config">Configuration</navigation-element></li>
      </ul>
    </nav>
  </header>
</template>

<script>
import {PhCube, PhHeart, PhHorse} from "@phosphor-icons/vue";
import NavigationElement from "@/components/UI/NavigationElement.vue";
import Config from "@/pages/Config.vue";

export default {
  name: "TheHeader",
  components: {Parameterization: Config, NavigationElement, PhCube, PhHeart, PhHorse}
}
</script>

<style scoped>

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  margin: 0;
  padding: 0;
}

</style>