53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { navList } from './config'
|
|
|
|
function skip(url: string) {
|
|
window.open(url, '_self')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full header-container">
|
|
<div class="p-0 navbar bg-base-100">
|
|
<div class="navbar-start max-lg:w-full">
|
|
<div class="dropdown">
|
|
<label tabindex="0" class="btn btn-ghost lg:hidden">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg" class="w-5 h-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>
|
|
</label>
|
|
<ul
|
|
tabindex="0"
|
|
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 text-lg flex flex-col gap-2"
|
|
>
|
|
<li v-for="item in navList" :key="item.id" class="cursor-pointer hover:text-gray-100 hover:bg-base-200" @click="skip(item.url)">
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="text-xl lg:pl-12 max-lg:mx-auto" href="https://vitejs.dev" target="_blank">
|
|
<img src="/vite.svg" class="logo" alt="Vite logo">
|
|
</a>
|
|
</div>
|
|
<div class="hidden navbar-center lg:flex">
|
|
<ul class="flex gap-10 px-1 text-lg cursor-pointer menu menu-horizontal">
|
|
<li v-for="item in navList" :key="item.id" class="hover:text-gray-100" @click="skip(item.url)">
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end max-lg:w-0">
|
|
<a class="btn">Button</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|