<template>
  <header class="app-header">
    <router-link to="/" class="logo-link">
      <div class="logo">Email Unlimit</div>
    </router-link>
    <nav class="nav-links">
      <a href="https://gitea.shenjianl.cn/shenjianZ/email-unlimit" target="_blank">Gitee</a>
      <router-link to="/settings" class="settings-link" title="设置">
        <img src="@/assets/setting.svg" alt="Settings" class="settings-icon" />
      </router-link>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'AppHeader',
};
</script>

<style scoped>
.logo-link {
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.settings-link {
  display: flex;
  align-items: center;
}

.settings-icon {
  width: 24px;
  height: 24px;
  transition: filter 0.3s ease;
}

.settings-link:hover .settings-icon {
  /* Generated by https://codepen.io/sosuke/pen/Pjoqqp */
  /* This filter converts black to the --primary-purple color */
  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(3750%) hue-rotate(261deg) brightness(95%) contrast(94%);
}
</style>