Tandai Halaman Link Aktif di Astro

Dapatkan url Halaman saat ini

Ini berisi path URL yang sedang dibuka, misalnya: /, /about, /blog/post1.

Astro.url.pathname;

Bandingkan URL menu dengan URL halaman saat ini Untuk setiap item menu (item.url), cek:

Astro.url.pathname === item.url;

Apakah sama persis dengan URL saat ini? Atau URL halaman ini adalah bagian dari sub-path menu (untuk halaman detail misalnya):

Astro.url.pathname.startsWith(item.url);

Tapi untuk homepage ('/'), harus sama persis, jangan startsWith supaya tidak salah aktif.

Simpan hasil Operator Perbandingan dalam Variabel Boolean, misalnya:

const isActive =
	Astro.url.pathname === item.url ||
	(item.url !== "/" && Astro.url.pathname.startsWith(item.url));

Gunakan isActive untuk beri gaya khusus pada menu yang aktif