Membangun Header Pil Mengambang dengan Next.js & Tailwind

Zoom

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)