Layout updates.

src/components/layout/SideNav.js

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { Menu, Item } from 'react-basics';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import styles from './SideNav.module.css';
+
+export function SideNav({
+  selectedKey,
+  items,
+  shallow = true,
+  scroll = false,
+  onSelect = () => {},
+}) {
+  const pathname = usePathname();
+  return (
+    <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
+      {({ key, label, url }) => (
+        <Item
+          key={key}
+          className={classNames(styles.item, { [styles.selected]: pathname.startsWith(url) })}
+        >
+          <Link href={url} shallow={shallow} scroll={scroll}>
+            {label}
+          </Link>
+        </Item>
+      )}
+    </Menu>
+  );
+}
+
+export default SideNav;