Layout updates.

src/components/layout/Grid.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import styles from './Grid.module.css';
 import { mapChildren } from 'react-basics';
+import styles from './Grid.module.css';
 
 export function Grid({ className, ...otherProps }) {
   return <div {...otherProps} className={classNames(styles.grid, className)} />;

src/components/layout/Page.module.css

@@ -5,6 +5,7 @@
   background: var(--base50);
   position: relative;
   max-width: 1320px;
+  min-height: calc(100vh - 60px);
   margin: 0 auto;
   padding: 0 20px;
 }

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;

src/components/layout/SideNav.module.css

@@ -0,0 +1,19 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.item a {
+  color: var(--font-color100);
+  flex: 1;
+  padding: var(--size300) var(--size600);
+}
+
+.item {
+  padding: 0;
+  border-radius: var(--border-radius);
+}
+
+.selected {
+  font-weight: 700;
+}