<template>
  <div class="navbar bg-base-100 shadow-xl">
    <div class="navbar-start">
      <div class="dropdown">
        <div tabindex="0" role="button"
          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
          </svg>
        </div>
        <ul tabindex="0"
          class="menu menu-sm dropdown-content bg-base-100 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out">
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/" class="text-base font-medium">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                <polyline points="9 22 9 12 15 12 15 22" />
              </svg>
              首页
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/user" class="text-base font-medium">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              用户界面
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/project" class="text-base font-medium">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
              </svg>
              工程界面
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/test" class="text-base font-medium">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
              </svg>
              测试功能
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/markdown-test" class="text-base font-medium">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
              Markdown测试
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
              class="text-base font-medium">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <path d="M3 3h18v18H3z"></path>
                <path d="M8 8h8v8H8z" fill="currentColor"></path>
              </svg>
              OpenAPI文档
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="navbar-center lg:flex">
      <router-link to="/" class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105">
        <span class="text-primary">FPGA</span> Web Lab
      </router-link>
    </div>
    <div class="navbar-end">
      <router-link to="/login"
        class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3">
        登录
      </router-link>
      <div class="ml-2 transition-all duration-500 hover:rotate-12">
        <ThemeControlButton />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ThemeControlButton from "./ThemeControlButton.vue";
</script>

<style scoped>
@import "../assets/main.css";
</style>
