Minimal Navbar

NavbarEasy

ชื่ออยู่ซ้าย ลิงก์อยู่ขวา มีเส้นใต้บาง ๆ

วิธีใช้

สร้างไฟล์แล้ววางโค้ด
ใน Portfolio Starter สร้างไฟล์ components/NavbarMinimal.tsx กด Copy code ด้านบน แล้ววางทั้งหมด
Import มาใช้
เปิด app/page.tsx เพิ่มบรรทัด import ไว้บนสุด แล้ววาง component ใน return
```
import NavbarMinimal from "@/components/NavbarMinimal";

export default function Home() {
  return (
    <main>
      <NavbarMinimal />
    </main>
  );
}
```
ใส่ข้อมูลของคุณผ่าน props
ไม่ใส่ props ก็แสดงข้อมูลตัวอย่างได้ พอพร้อมแล้วส่งข้อมูลของคุณเข้าไปแบบนี้
```
<NavbarMinimal
  name="Mint"
  links={[
    { label: "About", href: "#about" },
    { label: "Projects", href: "#projects" },
  ]}
/>
```

Prop	Type	ใช้ทำอะไร
`name`	`string`	ชื่อที่แสดงมุมซ้าย
`links`	`{ label: string; href: string }[]`	ลิงก์ในเมนู ใส่ `#id` เพื่อเลื่อนไปที่ section นั้น

ทุก prop ไม่บังคับ (มี ? ในโค้ด) ถ้าไม่ใส่จะใช้ค่าตัวอย่างในวงเล็บ = … ของ function

ไม่ต้องติดตั้งอะไรเพิ่ม ใช้ได้กับ Portfolio Starter ทันที (Next.js + React + Tailwind CSS)