<script lang="ts">
  let currentLanguage = 'it'
  export function changeLanguage(language = 'it'){
    currentLanguage = language
  }
  export const menu = {home:{it:"Home",en:"Home"},
              job:{it:"Esperienze",en:"Experiences"},
              school:{it:"Formazione",en:"Training"},
              contacts:{it:"Contatti",en:"Contacts"},
              portfolio:{it:"Portfolio",en:"Portfolio"}}
</script>

<div class="div-menu">
  <div class="wrapper">
    <a class="menu-element" href="#home" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
    <a class="menu-element" href="#jobs" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
    <a class="menu-element" href="#training" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
    <a class="menu-element" href="#portfolio" alt="{menu.portfolio[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.portfolio[currentLanguage]}</span></a>
    <!-- <a class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a> -->
  </div>
</div>

<style lang="scss">
  @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
  @import './static/colors.scss';
  .div-menu{
    width: 100%;
    background-color: $steel-blue;
  }

  .menu-element {
    background-color: $cultured;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-evenly;
    text-decoration: none;
    color: $rich-black-fogra-29;
    width: 13%;
    height: 30px;
    margin: 10px;
    border-radius: 10px;    
    text-align: center;
    border-color: $rich-black-fogra-29;
  }

  .menu-element:hover{
    background-color: $navajo-white;
  }

  .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    margin: auto;
    height: auto;
    max-width: $cv-max-width;
  }

  .hide{
    display: none;
  }

  @media screen and (min-width: 666px) {
    .div-menu{
      display: flex;
      height: auto;
    }

    .menu-element {
      background-color: $cultured;
      text-decoration: none;
      color: $rich-black-fogra-29;
      width: 17%;
      height: 30px;
      margin-left: 5px;
      margin-right: 5px;
      border-radius: 10px;
      text-align: center;
    }

    .hide{
      display: block;
    }
  }

</style>