Redesign
Filter by category
Now that I’m consistently writing again, I felt the need to add category filtering to the blog. I actually felt this way a few months ago and built the category pages, but never ended up finishing the nav for them. More recently, I found another reason to revisit category filtering, but I’ll write about that in the next post… For now, let’s focus on the design.
![category-filtering-all](https://images.ctfassets.net/zi79s2th73f3/6NNGV6NWLuuTBasU2Ksys4/ef5383e991aef93ff084a42eb0f78532/Screen_Shot_2020-07-03_at_2.38.06_PM.png?w=1332&q=80)
Luckily, the existing design for the categories helped direct the design of the category nav. I simply reused their component and linked them up. To give them a slightly more solid footing on the page, rather than leaving them floating, I gave the container a light grey background (whitesmoke
, to be specific). Then, I added a scroll behavior to make the category nav disappear as soon as you start scrolling.
![category-filtering-single](https://images.ctfassets.net/zi79s2th73f3/7MqGjKreCfcpf1qsxuS4M3/a52b5297728c087b7901b996f814becf/Screen_Shot_2020-07-03_at_2.38.32_PM.png?w=1332&q=80)
On the category pages themselves, I wanted to indicate which category the page represented, but I didn’t want to add an additional title element for this. Instead, I created an inactive style for the other categories, so the active category would be more prominent. I absolutely love how it looks—especially with the nav category matching the blog post categories listed below it.