From 561770a46972c7893ef7d37776ffab2bc21502b3 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 16 Apr 2023 20:46:38 -0700
Subject: [PATCH] Add selected state.

---
 components/layout/SideNav.js         | 8 +++++++-
 components/layout/SideNav.module.css | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/layout/SideNav.js b/components/layout/SideNav.js
index e521fe42..2b93c3f2 100644
--- a/components/layout/SideNav.js
+++ b/components/layout/SideNav.js
@@ -1,12 +1,18 @@
+import classNames from 'classnames';
 import { Menu, Item } from 'react-basics';
+import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './SideNav.module.css';
 
 export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
+  const { asPath } = useRouter();
   return (
     <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
       {({ key, label, url }) => (
-        <Item key={key} className={styles.item}>
+        <Item
+          key={key}
+          className={classNames(styles.item, { [styles.selected]: asPath.startsWith(url) })}
+        >
           <Link href={url} shallow={shallow}>
             {label}
           </Link>
diff --git a/components/layout/SideNav.module.css b/components/layout/SideNav.module.css
index b664194d..5dbe4105 100644
--- a/components/layout/SideNav.module.css
+++ b/components/layout/SideNav.module.css
@@ -13,3 +13,7 @@
   padding: 0;
   border-radius: var(--border-radius);
 }
+
+.selected {
+  font-weight: 700;
+}