Boss Battle: ทำให้ Responsive

เป้าหมายของ Mission นี้: ทำให้เว็บที่สร้างมาทั้งคาบ (Navbar, Footer, Home, About, Contact) แสดงผลดีทั้งจอคอมและจอมือถือ

mobile-first คืออะไร

Tailwind ใช้แนวคิด mobile-first — class ที่ไม่มีคำนำหน้า คือค่าเริ่มต้นสำหรับจอเล็กสุดก่อน แล้วค่อยเติม md: ทับเข้าไปสำหรับจอที่ใหญ่ขึ้น

flowchart LR
    S["className: flex-col md:flex-row"] --> M["จอเล็ก (มือถือ): flex-col"]
    S --> D["จอ md ขึ้นไป: flex-row"]

ปรับ Navbar ให้ responsive

<nav className="flex flex-col items-center gap-2 p-4 md:flex-row md:justify-between">
  <span className="font-bold">โลโก้บริษัท</span>
  <div className="flex gap-4">
    <Link href="/">Home</Link>
    <Link href="/about">About</Link>
    <Link href="/contact">Contact</Link>
  </div>
</nav>

สังเกตว่า: จอเล็ก (มือถือ) — flex-col เรียงแนวตั้ง, จอใหญ่ตั้งแต่ md ขึ้นไป — md:flex-row เรียงแนวนอนแทน

สิ่งที่ต้องทำ

1. ปรับ Navbar ให้ใช้ flex-col บนจอเล็ก, md:flex-row บนจอใหญ่
2. เปิด DevTools (คลิกขวา → Inspect) แล้วลากขนาดจอทดสอบดูว่าเปลี่ยนถูกต้องไหม
3. ลองปรับหน้า Home/About/Contact ให้ padding เหมาะกับจอเล็กด้วย (เช่น p-4 md:p-8)

ทำครบแล้วแปลว่าจบ Chapter 1 — ไปเรียน React State กันต่อ!