DynamicIsland

滾動觸發的浮動導覽列，靈感來自 iPhone Dynamic Island。向下滾動超過門檻後以淡入 + 上滑動畫出現，支援三種變體。

視覺預覽

以下為三種變體在收合與展開狀態下的外觀。實際使用時會以 createPortal 浮動在頁面頂部。

General — 一般頁面

Brickverse

入門課程進階課程課程包班文章

探索

Course — 課程頁面

進階 AI 寫程式

探索諮詢報名

Article — 文章頁面

Brickverse

探索回上一頁

響應式按鈕規範

Course 變體的 inline 按鈕依照 navActionTextStyles token 在三種斷點下有不同尺寸，確保手機版標題有足夠空間顯示。

斷點	按鈕字級	按鈕 padding	標題字級	Nav 高度	間距
手機 (<640px)	`text-xs` 12px	`px-3 py-2`	`text-sm` 14px	56px	`gap-1.5`
平板 (640–1024px)	`text-sm` 14px	`px-4 py-2`	`text-base` 16px	64px	`gap-2`
桌面 (>1024px)	`text-sm` 14px	`px-4 py-2`	`text-lg` 18px	64px	`gap-2`

視覺對照

手機版 — 375px ・h-14 (56px)

進階 AI 寫程式

探索諮詢報名

平板版 — 768px ・h-16 (64px)

進階 AI 寫程式

探索諮詢報名

桌面版 — 1280px ・h-16 (64px)

進階 AI 寫程式

探索諮詢報名

Tailwind 用法

響應式 inline 按鈕

{/* 一般按鈕（探索/諮詢） */}
<button className="text-xs sm:text-sm font-medium px-3 sm:px-4 py-2 rounded-full border border-border">
  探索
</button>

{/* CTA 按鈕（報名） */}
<button className="text-xs sm:text-sm font-semibold bg-accent px-3.5 sm:px-5 py-2 rounded-full">
  報名
</button>

{/* 課程標題 */}
<span className="text-sm sm:text-base lg:text-lg font-semibold truncate mr-2 sm:mr-3 lg:mr-4">
  {courseTitle}
</span>

三種變體

General（一般模式）

用於一般頁面。收合狀態顯示 Logo + 桌面版導覽連結 + 手機版探索按鈕。高度 56px。

一般模式用法

<DynamicIsland
  variant="general"
  links={navLinks}        // 桌面版 inline 連結 & 展開選單
  mobileLinks={allLinks}  // 手機版展開選單（含首頁）
/>

Course（課程模式）

用於課程頁面。收合狀態顯示課程標題 + 探索/諮詢/報名按鈕。高度手機版 56px、平板及桌面 64px。按鈕與標題皆有響應式縮放，詳見上方「響應式按鈕規範」。

課程模式用法

<DynamicIsland
  variant="course"
  courseTitle="進階 AI 寫程式"
  links={allNavLinks}
  consultUrl="https://..."          // 選填
  registrationAnchor="registration" // 選填
/>

Article（文章模式）

用於部落格文章頁面。收合狀態顯示 Logo + 探索/回上一頁按鈕。高度 56px。

文章模式用法

<DynamicIsland
  variant="article"
  links={expandedLinks}
  logoHref="https://brickverse.com.tw"
  logoExternal
  onBack={() => router.back()}
/>

Props

共用 Props

名稱	類型	說明
variant	'general' \| 'course' \| 'article'	變體模式（必填）
links	NavLink[]	展開選單的導覽連結（必填）
threshold	number	滾動觸發門檻（px），預設 100

General 模式

名稱	類型	說明
mobileLinks	NavLink[]	手機版展開選單連結，預設同 links
logoHref	string	Logo 連結，預設 /
logoExternal	boolean	Logo 是否為外部連結

Course 模式

名稱	類型	說明
courseTitle	string	課程標題（必填）
consultUrl	string	諮詢連結
registrationAnchor	string	報名區塊 ID，預設 registration

Article 模式

名稱	類型	說明
logoHref	string	Logo 連結，預設 /
logoExternal	boolean	Logo 是否為外部連結
onBack	() => void	回上一頁 callback（必填）

共用行為

滾動超過門檻後以淡入 + 上滑動畫出現
使用 createPortal 渲染到 body，不受父層 overflow 影響
點擊「探索」展開完整導覽選單，連結有 staggered fade 動畫
ESC 鍵 / 點擊遮罩關閉展開選單
滾動回頂部時自動收合
展開時鎖定 body 滾動

來源對照

變體	原始來源	使用場景
General	brickverse-web IslandNavigation	一般頁面（首頁、包班、小聚等）
Course	brickverse-web IslandNavigation (courseTitle)	課程頁面（入門、進階）
Article	BlogFrontend DynamicIsland	部落格文章頁面