Membangun Header Pil Mengambang dengan Next.js & Tailwind

Zoom

1. Kepadatan Informasi vs. Ruang Layar: Header harus menyediakan akses cepat ke halaman utama, pencarian, dan daftar bacaan, tetapi tidak boleh memenuhi layar (terutama pada perangkat seluler).
2. Transisi UI yang Dinamis: Pelebaran bilah pencarian (search bar) atau pembukaan menu dropdown harus terasa mulus tanpa pergeseran tata letak yang kasar atau patah-patah.
3. Perilaku Berbasis Scroll: Navigasi harus menyingkir saat pengguna sedang membaca (scroll ke bawah), tetapi langsung muncul kembali saat mereka membutuhkannya (scroll ke atas).
4. Kontras Visual: Dalam tata letak SnipGeek yang kaku dan tajam, header berfungsi sebagai elemen melayang unik yang terasa ringan dan dinamis.

Teknologi Utama

• Next.js App Router: Untuk struktur komponen dan rendering sisi server.
• React Hooks: Terutama useState, useEffect, dan useRef untuk mengelola state, efek samping, dan referensi DOM langsung.
• Tailwind CSS: Untuk semua penataan gaya, memungkinkan desain cepat berbasis utilitas. Kami juga menggunakan clsx untuk penerapan class secara kondisional.
• Lucide React: Untuk penyediaan ikon.

Langkah 1: Struktur Dasar & Posisi Mengambang

<header className="fixed top-4 left-4 right-4 md:left-1/2 md:-translate-x-1/2 ... z-50">
  <nav className="relative ... rounded-full bg-primary/90 backdrop-blur-sm ...">
    {/* Konten di sini */}
  </nav>
</header>

• fixed top-4: Menempelkan header di dekat bagian atas layar.
• left-4 right-4: Di layar seluler, header merentang hampir di seluruh lebar.
• md:left-1/2 md:-translate-x-1/2: Di layar sedang ke atas, header memposisikan dirinya tepat di tengah secara horizontal.
• bg-primary/90 backdrop-blur-sm: Menciptakan efek kaca buram yang semi-transparan.
• rounded-full: Memberikan bentuk "pil" yang ikonik.

Langkah 2: Otak - Manajemen Tampilan (View State)

type ActiveView = 'none' | 'search' | 'menu' | 'readingList';
const [activeView, setActiveView] = useState<ActiveView>('none');

Langkah 3: Pengalaman Pencarian Dinamis

1. Transisi State: Mengklik ikon cari mengatur activeView = 'search'.
2. Animasi Kondisional: Class CSS beralih menggunakan clsx. Link navigasi utama memudar (opacity-0) sementara wadah input pencarian muncul (opacity-100).
3. Auto-focus: Hook useEffect berjalan saat tampilan pencarian aktif, secara otomatis memfokuskan kursor ke elemen <input> demi kenyamanan pengguna.

   const searchInputRef = useRef<HTMLInputElement>(null);
   
   useEffect(() => {
     if (isSearchOpen) {
       // Timeout singkat memastikan elemen terlihat sebelum difokuskan
       setTimeout(() => searchInputRef.current?.focus(), 100);
     }
   }, [isSearchOpen]);

4. Penyaringan Real-time: useEffect lain memantau perubahan pada state query. Ia menyaring array data postingan dan catatan untuk menampilkan hasil secara instan.

Langkah 4: Visibilitas Pintar Saat Scroll

const lastScrollY = useRef(0);
const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
  const handleScroll = () => {
    const currentScrollY = window.scrollY;
    // Tampilkan jika scroll ke atas atau dekat puncak halaman
    if (currentScrollY < lastScrollY.current || currentScrollY < 10) {
      setIsVisible(true);
    } else if (currentScrollY > 100 && currentScrollY > lastScrollY.current) {
      // Sembunyikan jika scroll ke bawah melewati ambang batas tertentu
      setIsVisible(false);
    }
    lastScrollY.current = currentScrollY;
  };

  window.addEventListener('scroll', handleScroll, { passive: true });
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

Langkah 5: Detail Kecil yang Penting

• Tombol Escape: Event listener global disiapkan untuk menutup tampilan aktif (cari, menu, dll.) saat tombol 'Escape' ditekan.
• Klik di Luar: Listener serupa menutup tampilan jika pengguna mengklik di area mana pun di luar komponen header.
• Responsivitas: Komponen bertransisi mulus dari header mobile lebar penuh ke header desktop yang ringkas dan terpusat menggunakan prefix responsif Tailwind (md:).

Update Desain: Precision Tech (27 Februari 2026)

• Tailwind CSS — Responsive Design — Dokumentasi resmi yang mencakup prefix md: dan sistem breakpoint yang digunakan di seluruh header.
• React Docs — useRef — Referensi untuk useRef, mencakup DOM refs (pelacakan scroll, fokus input) dan variabel instance yang bisa diubah.
• MDN — Opsi passive pada EventTarget.addEventListener() — Menjelaskan opsi { passive: true } dan dampaknya terhadap performa scroll.
• clsx di npm — Utilitas ringan untuk membangun string className secara kondisional, digunakan secara luas dalam logika animasi header.