Layouting Menu pada Web

Merapikan Layout Menu

• Tujuan: Membuat layout menu yang lebih rapi
• Gunakan inline-flex agar menu sejajar
• Setiap komponen menu bisa memiliki background berbeda (misal: BG Zinc atau BG Black)
• Penyesuaian teks (contoh: teks putih, padding py-3, ukuran teks lg)

Membuat Komponen Menu yang Reusable

• Membuat komponen baru MenuItem
• Komponen di-encapsulated agar mudah dimodifikasi tanpa memengaruhi yang lain
• Menambahkan url dan title pada MenuItem
• Contoh implementasi: mengganti URL dan title sesuai kebutuhan

Menambah Styling dan Kontainer

• Menambahkan gap antarmenu dengan space-x-3
• Menambakan sudut rounded pada menu dengan rounded-lg
• Menggunakan kontainer dengan mx-auto dan full-width
• Menambahkan padding/margin agar lebih estetis
• Penyesuaian padding/margin berdasarkan kebutuhan desain

Penyesuaian Formulir dan Tombol

• Membuat form full-width dengan full dan flex
• Menambahkan button pencarian dengan background bg-blue
• Menambahkan padding pada button py-2 px-3
• Menambahkan border pada form dan button
• Mengubah form menjadi flex agar layout lebih rapi

Styling Custom Class

• Memisahkan header dan menu ke dalam div baru
• Memisahkan file header dan menu ke dalam komponen terpisah (misal: Header.js)
• Menambahkan custom class untuk styling khusus (misal: margin-top mt-10)
• Menyesuaikan inline flex dengan div untuk membuat layout vertikal dan horizontal

Mengatur Gambar dan Nama User

• Menggunakan next/image untuk mengatur gambar
• Menambahkan atribut ukuran (width dan height) pada gambar
• Menambahkan alternatif teks pada gambar
• Mengatur gambar dalam bentuk bulat dengan rounded-full
• Menambahkan border pada gambar dengan border-black atau border-2

Menambahkan Hasil Pencarian

• Membuat komponen hasil pencarian (ListItemSearch)
• Menambahkan props name dan imageURL
• Mengimpor dan menggunakan komponen ListItemSearch

Tantangan dan Penutup

• Tantangan: Membuat komponen untuk halaman detail
• Penutup o Maaf jika terlalu cepat, bisa bertanya jika ada kesulitan
• Video ini adalah yang terakhir dari seri belajar Next.js dasar
• Seri selanjutnya membahas materi lanjutan (optimization, SEO, deployment, dll.)
• Terima kasih sudah menonton!