[🛠] Memulihkan Navigasi Blog dengan Mobile Menu dan Category Overview

✨ Ringkasan GPT-5.5 　

Catatan tentang membuat kategori bisa langsung dibuka di mobile, dan mengubah /categories/ dari dump seluruh tulisan menjadi layar overview yang menunjukkan struktur blog.

Setelah memasang kalender sidebar di sidebar, kali ini masalah navigasi yang lebih besar terlihat.

Di desktop, ada sidebar. Kategori terlihat, kalender juga terlihat.

Namun di mobile, ceritanya berbeda. Bahkan ketika menu atas dibuka, struktur kategori blog yang sebenarnya tidak langsung muncul. Tulisan mulai menumpuk lagi, tetapi di layar kecil sulit mencari apa ada di mana.

/categories/ juga sama.

Archive kategori bawaan secara fungsi memang benar. Namun pada blog yang tulisannya sudah banyak, ia hanya terlihat seperti daftar tulisan yang panjang. Di blog yang mencampur Daily Review, catatan pengembangan, diary, percakapan GPT-5.5, renungan Alkitab, dan tip, daftar sederhana tidak bisa menjelaskan struktur.

Jadi pekerjaan sore ini jelas.

Mengubah mobile menu dan halaman kategori menjadi layar navigasi yang menunjukkan struktur blog.

Aku menambahkan panel kategori ke mobile menu

Commit pertama adalah a1efaa1.

a1efaa1  [Fix] | Mobile nav: Show category panel

File yang diubah ada dua.

_includes/masthead.html
_sass/custom/customOverride.scss

Mobile menu yang ada sebelumnya berdiri di atas struktur greedy nav dari Minimal Mistakes. Link atas memang terlihat, tetapi struktur kategori sidebar yang menjadi inti blog ini tidak langsung terbuka.

Jadi aku menambahkan panel kategori khusus mobile di dalam masthead.html.

<nav class="masthead-mobile-menu" aria-label="Kategori mobile">
  <div class="masthead-mobile-menu__quick">
    {%- for link in site.data.navigation.main -%}
      <a href="{{ link.url | relative_url }}">{{ link.title }}</a>
    {%- endfor -%}
  </div>
  <div class="masthead-mobile-menu__categories">
    {%- for nav in site.data.navigation.sidebar-categories -%}
      ...
    {%- endfor -%}
  </div>
</nav>

Kuncinya adalah memakai ulang sidebar-categories dari _data/navigation.yml apa adanya.

Kalau sidebar dan mobile menu melihat data yang berbeda, suatu hari pasti melenceng. Bisa terjadi kategori ditambahkan, lalu muncul di desktop tetapi tidak muncul di mobile.

Karena itu mobile menu juga dibuat melihat sumber yang sama.

Aku juga memasukkan sidebar-nav-stats.html. Berkat itu, di dalam mobile menu pun jumlah tulisan dan tanggal tulisan terbaru untuk tiap kategori bisa terlihat.

Ini perbedaan kecil, tetapi besar dalam navigasi nyata.

Kalau yang terlihat hanya nama kategori, pengguna harus menekan dulu untuk tahu “apakah ada tulisan di sini?” Kalau jumlah tulisan dan tanggal terbaru terlihat, pengguna langsung bisa membedakan kategori yang hidup dan kategori yang sudah lama berhenti.

hidden-links yang lama kumatikan di mobile

Di SCSS, .hidden-links lama disembunyikan di mobile, lalu menu baru ditampilkan saat toggle terbuka.

.greedy-nav .hidden-links {
  display: none !important;
}

.greedy-nav__toggle.close ~ .masthead-mobile-menu {
  display: block;
}

Menu baru dibuat sebagai panel yang muncul tepat di bawah bar atas.

.masthead-mobile-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: min(72vh, 32rem);
  overflow-y: auto;
}

Yang penting di mobile bukan menampilkan semuanya sekaligus.

Pengguna harus bisa melihat seluruh kategori di layar kecil, tetapi isi tulisan tidak boleh terdorong permanen ke bawah. Karena itu panel hanya terlihat saat dibuka, dan jika terlalu panjang, ia bergulir di dalam panel.

/categories/ kuubah dari daftar tulisan menjadi overview

Commit kedua adalah ee7c436.

ee7c436  [Fix] | Categories: Replace full post archive with overview

_layouts/categories.html yang lama memakai include taxonomy apa adanya.

{% include posts-taxonomy.html taxonomies=site.categories %}

Itu kuganti dengan include baru.

{% include category-overview.html %}

Lalu aku membuat _includes/category-overview.html.

Include ini menghitung struktur kategori blog berdasarkan site.posts dan _data/navigation.yml.

Nilai yang dihitung seperti ini.

Jumlah seluruh tulisan
Jumlah leaf category yang aktif
Jumlah tulisan tahun ini
Tanggal terbit terbaru
Kategori terbesar
Jumlah tulisan tiap kategori
Tanggal tulisan terbaru dan judul tulisan terbaru tiap kategori

Pada titik ini, category overview juga memuat bar persentase kategori.

{% assign category_share = category_post_count | times: 100 | divided_by: total_post_count %}

Belum bisa dibilang layar ini sempurna. Namun arahnya benar.

/categories/ bukan lagi “daftar panjang tulisan per kategori”, melainkan layar pertama yang menunjukkan blog ini bergerak dengan struktur seperti apa.

Mengapa overview dibutuhkan

Blog ini bukan blog satu topik.

Ada Daily Review, catatan pengembangan, diary, arsip percakapan AI, renungan Alkitab, dan tip. Kalau blog GitHub Pages ini mau dijalankan lagi, struktur campuran ini tidak boleh menjadi kelemahan.

Kalau semua tulisan hanya ditumpuk secara kronologis, semakin lama dibaca, strukturnya semakin kabur.

Sebaliknya, kalau ada category overview, pembaca melihat peta terlebih dahulu.

Kategori apa saja yang ada?
Kategori mana yang benar-benar aktif?
Tulisan terbaru menumpuk di mana?
Poros terbesar blog ini apa?

Ini juga penting dari sudut pandang portofolio.

Memperbaiki blog bukan hanya soal menulis tulisan, tetapi juga membuat ulang struktur informasi. Kalau hanya memakai fitur bawaan Jekyll, daftar tulisan memang muncul. Namun agar pembaca sungguhan tidak tersesat, seluruh blog harus dilihat seperti produk yang bisa dinavigasi.

Yang berubah hari ini

Commit inti sore ini ada dua.

a1efaa1  Menampilkan panel kategori di mobile menu
ee7c436  Mengganti /categories/ dari daftar semua tulisan menjadi overview

Dilihat dari file, cakupannya seperti ini.

_includes/masthead.html
_includes/category-overview.html
_layouts/categories.html
_sass/custom/customOverride.scss

Mobile menu memakai ulang sidebar-categories dari _data/navigation.yml. Category overview juga menghitung leaf category berdasarkan data navigation yang sama.

Bagian itu yang paling kusukai dari pekerjaan hari ini.

Aku tidak membuat sumber data baru. Aku memakai ulang definisi kategori yang sudah dimiliki blog. Karena itu sidebar desktop, mobile menu, dan category overview berbagi struktur yang sama.

Hasil

Sekarang kategori bisa dibuka di mobile juga.

Saat menu atas ditekan, navigation dasar dan grup kategori muncul bersama. Tiap kategori juga memiliki jumlah tulisan dan tanggal tulisan terbaru.

/categories/ juga bukan lagi dump tulisan panjang, melainkan overview yang menunjukkan struktur blog. Di sana terlihat jumlah seluruh tulisan, jumlah kategori aktif, jumlah tulisan tahun ini, tanggal terbit terbaru, dan tulisan terbaru tiap kategori.

Masih ada bagian yang perlu dipoles.

Apakah bar di category overview benar-benar membantu navigasi masih perlu dilihat lagi. Kepadatan mobile menu juga harus terus diperiksa di layar nyata. Namun inti hari ini sudah tertangkap.

Kalau blog ingin tumbuh lagi, menulis saja tidak cukup.

Tulisan yang menumpuk harus bisa ditemukan kembali. Pekerjaan hari ini mulai memecahkan masalah itu lewat mobile menu dan category overview.