[🛠] Restoring Blog Navigation with a Mobile Menu and Category Overview

✨ GPT-5.5 Summary 　

A record of making categories open directly on mobile and turning /categories/ from a full post dump into an overview screen that shows the blog structure.

After adding the sidebar calendar to the sidebar, a larger navigation problem became visible.

On desktop, there is a sidebar. Categories are visible, and the calendar is visible too.

But mobile is a different story. Even when opening the top menu, the blog’s actual category structure did not appear right away. Posts had started accumulating again, but on a small screen, it was hard to find where anything was.

/categories/ had the same problem.

The default category archive was functionally correct. But on a blog with many posts, it just looked like a long list. In a blog where Daily Review, development logs, diaries, GPT-5.5 conversations, Bible reflections, and tips are mixed together, a simple list cannot explain the structure.

So this afternoon’s task was clear.

Turn the mobile menu and category page into navigation screens that show the blog structure.

I Added a Category Panel to the Mobile Menu

The first commit was a1efaa1.

a1efaa1  [Fix] | Mobile nav: Show category panel

The modified files were two:

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

The existing mobile menu sat on top of Minimal Mistakes’ greedy nav structure. The top links were visible, but the sidebar category structure, which is the core of this blog, did not open immediately.

So I added a mobile-only category panel inside masthead.html.

<nav class="masthead-mobile-menu" aria-label="Mobile categories">
  <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>

The key was reusing sidebar-categories from _data/navigation.yml.

If the sidebar and mobile menu look at different data, they will inevitably drift apart someday. A category could be added and appear on desktop but not on mobile.

So the mobile menu also reads from the same source.

I also included sidebar-nav-stats.html. Thanks to that, the mobile menu can show each category’s post count and latest post date.

This is a small difference, but in real navigation it matters.

If only the category name is visible, users have to tap to know whether anything is there. If the post count and latest date are visible, users can immediately distinguish active categories from categories that have been quiet for a long time.

I Turned Off the Existing hidden-links on Mobile

In SCSS, I hid the existing .hidden-links on mobile and showed the new menu when the toggle is open.

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

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

The new menu became a panel that opens directly below the top bar.

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

On mobile, the important thing is not to show everything at once.

Users need to be able to see the full category list on a small screen, but it should not permanently push the body content down. So the panel appears only when opened, and if it grows long, it scrolls internally.

I Changed /categories/ from a Post List into an Overview

The second commit was ee7c436.

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

The existing _layouts/categories.html used the taxonomy include as-is.

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

I replaced it with a new include.

{% include category-overview.html %}

Then I created _includes/category-overview.html.

This include calculates the blog’s category structure based on site.posts and _data/navigation.yml.

The values it calculates are things like these:

Total post count
Number of active leaf categories
Number of posts written this year
Latest publication date
Largest category
Post count for each category
Latest post date and latest post title for each category

At this point, the category overview also included a category share bar.

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

I cannot say this screen was perfect yet. But the direction was right.

/categories/ was no longer a “long list of posts by category.” It became a first screen that shows what kind of structure this blog runs on.

Why an Overview Was Needed

This blog is not a single-topic blog.

There are Daily Reviews, development logs, diaries, AI conversation archives, Bible reflections, and more. If I am going to run this GitHub Pages blog again, I need to make sure this mixed structure does not become a weakness.

If every post is simply stacked chronologically, the structure becomes blurrier the longer someone reads.

With a category overview, readers see a map first.

What categories exist?
Which categories are actually active?
Where are recent posts accumulating?
What is the largest axis of the blog?

This is important from a portfolio perspective too.

It shows that fixing the blog is not merely writing posts, but rebuilding the information structure. If I only use Jekyll’s default features, post lists will exist. But if I want actual readers not to get lost, I need to treat the whole blog like a navigable product.

What Changed Today

This afternoon’s core commits were two:

a1efaa1  Show the category panel in the mobile menu
ee7c436  Replace /categories/ from a full post list with an overview

By file, the scope was this:

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

The mobile menu reuses sidebar-categories from _data/navigation.yml. The category overview also calculates leaf categories based on the same navigation data.

That is the part I like most about today’s work.

I did not create a new data source. I reused the category definitions the blog already had. As a result, the desktop sidebar, mobile menu, and category overview share the same structure.

Result

Now categories can be opened on mobile too.

When the top menu is tapped, the basic navigation and category groups appear together. Each category also shows its post count and latest post date.

/categories/ is no longer a long post dump. It became an overview that shows the blog structure. It shows total post count, active category count, number of posts this year, latest publication date, and the latest post for each category.

There are still parts to polish.

I need to keep watching whether the bar in the category overview actually helps navigation. I also need to keep checking the density of the mobile menu on real screens. But today’s core is in place.

If the blog is going to grow again, writing posts is not enough.

Accumulated posts need to be findable again. Today’s work started solving that problem through the mobile menu and category overview.