feat(nav): organize header navigation into 3 groups

ヘッダーナビゲーションをUXベストプラクティスに基づいて整理：
- 6つの並列リンクから3グループに削減
- DaisyUI v5のドロップダウンコンポーネントを使用
- About (About, Activities, Join)
- Content (Articles, Projects)
- Members (直接リンク)

変更:
- src/routes/(site)/+layout.svelte: ドロップダウンメニューを実装
- docs/knowledges/ui-design.md: ナビゲーション構造を文書化

Author: aster-void

docs/knowledges/ui-design.md

@@ -41,6 +41,7 @@
 | Section labels      | Monospace, uppercase, tracking-widest, text-[#00D372]                                    |
 | Tech tags           | Monospace, text-xs, bg-zinc-100/zinc-800, rounded-lg                                     |
 | Page headers        | border-b, bg-zinc-50/50, py-16                                                           |
+| Dropdown menus      | dropdown-hover, border border-zinc-200, bg-white, shadow, hover:bg-primary/5             |
 
 ## Interaction Patterns
 
@@ -66,6 +67,15 @@ Applied to:
 - Card border radius: rounded-2xl
 - List pages: Header section + content section pattern
 
+## Navigation Structure
+
+**Header Navigation** (3 groups max for UX)
+- **About** dropdown: About, Activities, Join
+- **Content** dropdown: Articles, Projects
+- **Members**: Direct link
+
+Mobile: All items in drawer menu
+
 ## Public Pages Structure
 
 1. **Homepage**

src/routes/(site)/+layout.svelte

@@ -62,24 +62,77 @@
 							>⌘K</kbd
 						>
 					</button>
-					<a href="/about" class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
-						>About</a
-					>
-					<a href="/activities" class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
-						>Activities</a
-					>
-					<a href="/articles" class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
-						>Articles</a
-					>
-					<a href="/projects" class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
-						>Projects</a
-					>
+
+					<div class="dropdown dropdown-hover">
+						<div
+							tabindex="0"
+							role="button"
+							class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
+						>
+							About
+						</div>
+						<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+						<ul
+							tabindex="0"
+							class="menu dropdown-content z-[1] mt-3 w-52 rounded-lg border border-zinc-200 bg-white p-2 shadow"
+						>
+							<li>
+								<a
+									href="/about"
+									class="text-sm text-zinc-600 transition-colors hover:bg-primary/5 hover:text-primary"
+									>About</a
+								>
+							</li>
+							<li>
+								<a
+									href="/activities"
+									class="text-sm text-zinc-600 transition-colors hover:bg-primary/5 hover:text-primary"
+									>Activities</a
+								>
+							</li>
+							<li>
+								<a
+									href="/join"
+									class="text-sm text-zinc-600 transition-colors hover:bg-primary/5 hover:text-primary"
+									>Join</a
+								>
+							</li>
+						</ul>
+					</div>
+
+					<div class="dropdown dropdown-hover">
+						<div
+							tabindex="0"
+							role="button"
+							class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
+						>
+							Content
+						</div>
+						<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+						<ul
+							tabindex="0"
+							class="menu dropdown-content z-[1] mt-3 w-52 rounded-lg border border-zinc-200 bg-white p-2 shadow"
+						>
+							<li>
+								<a
+									href="/articles"
+									class="text-sm text-zinc-600 transition-colors hover:bg-primary/5 hover:text-primary"
+									>Articles</a
+								>
+							</li>
+							<li>
+								<a
+									href="/projects"
+									class="text-sm text-zinc-600 transition-colors hover:bg-primary/5 hover:text-primary"
+									>Projects</a
+								>
+							</li>
+						</ul>
+					</div>
+
 					<a href="/members" class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
 						>Members</a
 					>
-					<a href="/join" class="text-sm text-zinc-500 transition-colors hover:text-zinc-900"
-						>Join</a
-					>
 				</div>
 			</div>
 		</nav>