Header dan Footer Blog Berhenti Jadi Pill, Kini Jadi Bar
Refactor navbar dan footer dari pill max-w-6xl jadi bar selebar viewport: max-width naik satu tingkat, konten tetap mx-auto max-w-6xl.
Ringkasan
Navbar dan footer blog berubah dari bentuk pill jadi bar full-bleed dari tepi ke tepi viewport. Kuncinya max-w-6xl nggak dihapus tapi pindah ke container dalam dengan mx-auto, sementara elemen luar pegang latar semi transparan plus backdrop-blur. Slot border transparan yang berubah pas scroll mencegah layout shift, dan menu mobile otomatis full width tanpa hack tambahan.
Dua tahun lebih blog ini punya header dan footer bentuk pill: rounded penuh, dibatasi max-w-6xl, ngambang di atas background halaman kayak kapsul yang nempel di dua ujung. Hari ini saya buka situs lokal abis refactor, dan dua-duanya udah jadi bar yang nempel dari tepi kiri sampai tepi kanan viewport. Garis tipis, background semi transparan, blur halus di belakangnya. Bedanya kerasa di detik pertama page load.
Dugaan pertama saya salah arah. Kirain buat bikin bar full-bleed berarti max-w-6xl harus dibuang, terus semua konten di dalemnya ikutan melebar, dan teks footer jadi satu baris panjang yang nyiksa mata di monitor lebar. Untung nggak langsung eksekusi. Kenyataannya max-width cuma naik satu tingkat: elemen terluar yang pegang lebar penuh, konten di dalemnya tetap dibungkus mx-auto max-w-6xl. Bar-nya full-bleed, isinya nggak.
Pola ini ternyata yang dipakai banyak situs modern. Latar nempel ke edge, konten sejajar sama kolom artikel. Satu elemen buat latar, satu elemen buat konten.
Navbar yang dipasang nempel di viewport
Struktur Navbar barunya kayak gini. Elemen paling luar pakai position fixed dengan inset-x-0, top-0, plus z-50, dan nggak ada lagi padding horizontal dan atas kayak versi pill dulu. inset-x-0 bikin sisi kiri dan kanan sama-sama nol, jadi elemennya ngeregang nutupin seluruh lebar viewport dari tepi ke tepi [2]. Dan karena position-nya fixed, elemen ini keluar dari normal flow lalu diposisikan relatif ke viewport, bukan ke parent-nya [3]. Makanya dia bisa nembus keluar dari container mana pun di atasnya.
Trik kecil yang paling saya suka ada di scroll behavior-nya. Inner bar selalu punya slot border di bawah, cuma statusnya yang berubah: border-transparent pas halaman masih di atas, lalu bertransition jadi border-border/60 dengan backdrop-blur-2xl begitu user mulai scroll. Slot-nya nggak pernah ilang, jadi nggak ada layout shift sama sekali di momen transisi. Perpindahan sekecil apapun di navbar keliatan "lompat" di mata user, jadi ini bukan detail yang boleh disepelekan.
Kuncinya ada di background semi transparan, bg-background/70. MDN jelasin backdrop-filter nge-blur semua area di belakang elemen, dan efeknya baru keliatan kalo elemen itu sendiri nggak solid [4]. Kalo background-nya solid, blur-nya nggak ngaruh apa-apa.
Footer dan menu mobile ikutan melebar
Footer nggak serumit navbar karena dia nggak fixed. Cuma dikasih garis atas semi transparan dan backdrop-blur-xl, background-nya bg-card/30 biar ada pembeda tipis dari area artikel. Efek visualnya lumayan kerasa: garis penutup halaman sekarang nutung dari kiri ke kanan penuh, jadi akhir halaman berasa beneran ditutup, bukan berhenti mendadak di tengah kayak dulu.
Menu mobile kebagian dampaknya gratis. Karena parent-nya udah selebar viewport, dropdown menunya otomatis full width, tinggal dikasih border-b buat pemisah sama konten artikel di bawahnya. Nggak ada hack tambahan.
Max-width yang cuma pindah tempat, bukan dihapus
Angka max-w-6xl itu 72rem, alias 1152px [1]. Kalo angka itu dibuang dari konten, paragraf artikel bakal melebar jauh lebih dari 1152px di monitor lebar dan panjang barisnya susah diikuti mata. Jadi max-width tetep kepakai, cuma tanggung jawabnya pindah dari elemen pill terluar ke container konten di dalem bar.
Satu hal yang sempat bikin saya bingung di tengah jalan: container bawaan Tailwind itu nggak nengah dirinya sendiri, dia butuh mx-auto secara eksplisit [1]. Waktu pertama kali geser max-width ke dalem, kontennya nempel kiri dan saya sempat salahkan breakpoint. Ternyata bukan bug, emang begitu perilakunya dari sononya.
Keputusan akhirnya sederhana: bar luar full-bleed ngurusin latar, inner container tetap mx-auto max-w-6xl ngurusin keterbacaan, dan backdrop blur dipasang di header sama footer biar konsisten. Nggak ada class yang dihapus total, semuanya cuma dipindah ke tempat yang lebih masuk akal.