73 lines
No EOL
3 KiB
Svelte
73 lines
No EOL
3 KiB
Svelte
<script lang="ts">
|
|
export let logo_url:string = "/images/logo.png"
|
|
export let title:string = "ใส่ชื่อองค์กรที่นี้"
|
|
export let supervised:string = "ใส่สังกัดที่นี้"
|
|
export let home:string = "/"
|
|
export let qualifying:string = "/qualifying"
|
|
export let competitive:string = "/competitive"
|
|
export let about:string = "/about"
|
|
|
|
import { page } from '$app/stores';
|
|
|
|
</script>
|
|
|
|
<div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4 ">
|
|
<div
|
|
class="container px-4 mx-auto flex flex-no-wrap items-center justify-between"
|
|
>
|
|
<div class="flex-1">
|
|
<div class="justify-start flex">
|
|
<div class="content-center grid" >
|
|
<div class="avatar">
|
|
<div class="w-10 rounded-full">
|
|
<a href="{home}"><img src={logo_url?logo_url:'/images/logo.png'} alt="logo"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="content-center grid pl-4" href="{home}">
|
|
{title}
|
|
<div class="textline2">{supervised}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex-none gap-2">
|
|
<div class="dropdown lg:hidden">
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<label tabindex="0" class="btn btn-ghost ">
|
|
<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>
|
|
</label>
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<ul tabindex="0" style="width: 150px;" class="menu menu-compact dropdown-content mt-3 right-0 p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li ><a class="hover:text-gray-500 active:bg-white" href="/">หน้าหลัก</a></li>
|
|
<li><a class="hover:text-gray-500 active:bg-white" href="/qualifying">การคัดเลือก</a></li>
|
|
<li><a class="hover:text-gray-500 active:bg-white" href="/competitive">การสอบแข่งขัน</a></li>
|
|
<li><a class="hover:text-gray-500 active:bg-white" href="/about">เกี่ยวกับเรา</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="tabs hidden lg:flex w-full"><!-- tab-active -->
|
|
<a href="{home}" class="{$page.url.pathname == home? 'tab text-gray-700': 'tab '}">หน้าแรก</a>
|
|
<a href="{qualifying}" class="{$page.url.pathname == qualifying? 'tab text-gray-700': 'tab '}">การคัดเลือก</a>
|
|
<a href="{competitive}" class="{$page.url.pathname == competitive? 'tab text-gray-700': 'tab '}">การสอบแข่งขัน</a>
|
|
<a href="{about}" class="{$page.url.pathname == about? 'tab text-gray-700': 'tab '}">เกี่ยวกับเรา</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/*
|
|
.textline1{
|
|
line-height:1.2rem !important;
|
|
font-weight: 400;
|
|
color: #02A998;
|
|
}
|
|
*/
|
|
.textline2{
|
|
font-size: 0.80rem;
|
|
line-height:1.3rem !important;
|
|
letter-spacing: 0.05rem;
|
|
font-weight: 400;
|
|
color: #96a9ad;
|
|
}
|
|
</style> |