我們做網頁呢，一開始想到的一定是頂端有個槓，然後上面可能會放一些功能

我們搜尋 DaisyUI 當然也有這功能啦，它叫做 Navbar

首先我們這條槓，因為基本上每個頁面都要呈現，所以我們必須放在 +layout.svelte
現在我們的 +layout.svelte 大概長這樣

<script lang="ts">
	import favicon from '$lib/assets/favicon.svg';
	import '../app.css';
	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>
<div class="navbar bg-neutral shadow-sm text-neutral-content">
	<div class="navbar-start">
		<div class="dropdown">
			<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
				<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-neutral text-neutral-content rounded-box z-1 mt-3 w-52 p-2 shadow"
			>
				<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">首頁</a></li>
				<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">怪物掉落查詢</a></li>
				<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">物品掉落查詢</a></li>

				<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">常見問題</a></li>
				<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">關於我們</a></li>
			</ul>
		</div>
		<a class="btn btn-ghost text-xl" href="https://127.0.0.1">Problytic</a>
	</div>
	<div class="navbar-center hidden lg:flex">
		<ul class="menu menu-horizontal px-1">
			<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">首頁</a></li>
			<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">怪物掉落查詢</a></li>
			<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">物品掉落查詢</a></li>

			<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">常見問題</a></li>
			<li><a class="btn btn-ghost text-xl" href="https://127.0.0.1">關於我們</a></li>
		</ul>
	</div>
	<div class="navbar-end">
		<a class="btn btn-primary" href="https://127.0.0.1">登入</a>
	</div>
</div>

{@render children?.()}

左邊就來叫做專案的名稱吧，然後放幾個頁面的按鈕，加上登入，一條槓就是這麼簡單的完成囉
然後有兩個區塊，因為一個是滿版 PC 呈現，一個是手機版呈現，都兼顧到惹

今天的情緒抒發:
明天來研究 svelte 的 route 吧，讓他可以根據各連結跳轉

不過 Artale 一些插件的開法者本身已經退坑了，突然有種寂寞感，上線沒一個好友