From a0f0c9191dd987b839c8a79dde6849da0faa850f Mon Sep 17 00:00:00 2001
From: Chung Leong <chernyshevsky@hotmail.com>
Date: Tue, 22 Jan 2019 00:31:28 +0100
Subject: [PATCH] Highlighting selected category and month (issue #9).

---
 src/style.scss           | 33 +++++++++++++++++++++++++++++++--
 src/widgets/side-nav.jsx | 25 +++++++++++++++----------
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/style.scss b/src/style.scss
index b594112..25f17cb 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -44,10 +44,39 @@ A {
         }
     }
 
+    .categories {
+        LI {
+            margin-top: 0.2em;
+            margin-bottom: 0.2em;
+
+            A {
+                padding: 0.2em 0.5em 0.17em 0.5em;
+                margin-left: -0.4em;
+
+                &.selected {
+                    border-radius: 0.5em;
+                    background-color: #990000;
+                    color: #eeeeee;
+                }
+            }
+        }
+    }
+
     .archive {
         LI {
-            margin-top: 0.1em;
-            margin-bottom: 0.1em;
+            margin-top: 0.2em;
+            margin-bottom: 0.2em;
+
+            A {
+                padding: 0.2em 0.5em 0.17em 0.5em;
+                margin-left: -0.4em;
+
+                &.selected {
+                    border-radius: 0.5em;
+                    background-color: #990000;
+                    color: #eeeeee;
+                }
+            }
         }
 
         .year {
diff --git a/src/widgets/side-nav.jsx b/src/widgets/side-nav.jsx
index 41641d0..e00f887 100644
--- a/src/widgets/side-nav.jsx
+++ b/src/widgets/side-nav.jsx
@@ -153,11 +153,10 @@ class SideNavSync extends PureComponent {
 
     renderCategory(category, i) {
         let { route, categoryPosts } = this.props;
-        let { monthSlug } = route.params;
+        let { monthSlug, categorySlug } = route.params;
         let name = _.get(category, 'name', '');
         let description = _.get(category, 'description', '');
-        let categorySlug = _.get(category, 'slug', '');
-        let slugs = [ categorySlug ];
+        let slugs = [ category.slug ];
         if (monthSlug) {
             slugs.unshift(monthSlug);
         }
@@ -166,9 +165,13 @@ class SideNavSync extends PureComponent {
         if (_.isEmpty(posts) && !_.isUndefined(posts)) {
             url = undefined;
         }
+        let className;
+        if (categorySlug === category.slug) {
+            className = 'selected';
+        }
         return (
             <li key={i}>
-                <a href={url} title={description}>{name}</a>
+                <a className={className} href={url} title={description}>{name}</a>
             </li>
         );
     }
@@ -191,16 +194,13 @@ class SideNavSync extends PureComponent {
 
     renderYear(yearEntry, i) {
         let { selectedYear } = this.props;
-        let labelClass = 'year';
         let listClass = 'months';
-        if (yearEntry.year === selectedYear) {
-            labelClass += ' selected';
-        } else {
+        if (yearEntry.year !== selectedYear) {
             listClass += ' collapsed';
         }
         return (
             <li key={i}>
-                <span className={labelClass} data-year={yearEntry.year} onClick={this.handleYearClick}>
+                <span data-year={yearEntry.year} onClick={this.handleYearClick}>
                     {yearEntry.label}
                 </span>
                 <ul className={listClass}>
@@ -216,13 +216,18 @@ class SideNavSync extends PureComponent {
 
     renderMonth(monthEntry, i) {
         let { route } = this.props;
+        let { monthSlug } = route.params;
         let url = route.find([ monthEntry.slug ]);
         if (_.isEmpty(monthEntry.posts) && !_.isUndefined(monthEntry.posts)) {
             url = undefined;
         }
+        let className;
+        if (monthSlug === monthEntry.slug) {
+            className = 'selected';
+        }
         return (
             <li key={i}>
-                <a href={url}>{monthEntry.label}</a>
+                <a className={className} href={url}>{monthEntry.label}</a>
             </li>
         );
     }