<script setup lang="ts">
import { toggleDark } from '~/composables'
</script>

<template>
  <nav text-xl mt-6>
    <RouterLink class="icon-btn mx-2" to="/" title="首页">
      <div i-ri-home-2-line />
    </RouterLink>

    <button class="icon-btn mx-2 !outline-none" title="切换" @click="toggleDark()">
      <div i="ri-sun-line dark:ri-moon-line" />
    </button>

    <RouterLink class="icon-btn mx-2" to="/about" title="关于">
      <div i-ri-information-line />
    </RouterLink>

    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub">
      <div i-ri-github-line />
    </a>
  </nav>
</template>
