From d326ae5c3005abd4ea679b384a0dfee6e49011b4 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Tue, 29 Mar 2022 09:35:33 -0700
Subject: [PATCH] Extract out sidebaricon; link to /about

---
 web/components/nav/sidebar.tsx | 84 +++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 38 deletions(-)

diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 0352ac2c..cc735227 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -1,10 +1,8 @@
 import {
   HomeIcon,
-  FireIcon,
   UserGroupIcon,
-  TrendingUpIcon,
   SearchIcon,
-  CollectionIcon,
+  BookOpenIcon,
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import Link from 'next/link'
@@ -13,11 +11,15 @@ import { useRouter } from 'next/router'
 const navigation = [
   { name: 'Home', href: '/home', icon: HomeIcon },
   { name: 'Markets', href: '/markets', icon: SearchIcon },
-  { name: 'Communities', href: '/folds', icon: UserGroupIcon },
-  { name: 'Trades', href: '/trades', icon: CollectionIcon },
-  // { name: 'Trending', href: '#', icon: TrendingUpIcon, current: false },
+  { name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
 ]
 
+type Item = {
+  name: string
+  href: string
+  icon: React.ComponentType<{ className?: string }>
+}
+
 const communities = [
   { name: 'Movies', href: '#' },
   { name: 'Food', href: '#' },
@@ -29,6 +31,36 @@ const communities = [
   { name: 'Gaming', href: '#' },
 ]
 
+function SidebarItem(props: { item: Item; currentPage: string }) {
+  const { item, currentPage } = props
+  return (
+    <Link href={item.href} key={item.name}>
+      <a
+        key={item.name}
+        href={item.href}
+        className={clsx(
+          item.href == currentPage
+            ? 'bg-gray-200 text-gray-900'
+            : 'text-gray-600 hover:bg-gray-50',
+          'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
+        )}
+        aria-current={item.href == currentPage ? 'page' : undefined}
+      >
+        <item.icon
+          className={clsx(
+            item.href == currentPage
+              ? 'text-gray-500'
+              : 'text-gray-400 group-hover:text-gray-500',
+            '-ml-1 mr-3 h-6 w-6 flex-shrink-0'
+          )}
+          aria-hidden="true"
+        />
+        <span className="truncate">{item.name}</span>
+      </a>
+    </Link>
+  )
+}
+
 export default function Sidebar() {
   const router = useRouter()
   const currentPage = router.pathname
@@ -37,47 +69,23 @@ export default function Sidebar() {
     <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
       <div className="space-y-1 pb-8">
         {navigation.map((item) => (
-          <Link href={item.href} key={item.name}>
-            <a
-              key={item.name}
-              href={item.href}
-              className={clsx(
-                item.href == currentPage
-                  ? 'bg-gray-200 text-gray-900'
-                  : 'text-gray-600 hover:bg-gray-50',
-                'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
-              )}
-              aria-current={item.href == currentPage ? 'page' : undefined}
-            >
-              <item.icon
-                className={clsx(
-                  item.href == currentPage
-                    ? 'text-gray-500'
-                    : 'text-gray-400 group-hover:text-gray-500',
-                  '-ml-1 mr-3 h-6 w-6 flex-shrink-0'
-                )}
-                aria-hidden="true"
-              />
-              <span className="truncate">{item.name}</span>
-            </a>
-          </Link>
+          <SidebarItem item={item} currentPage={currentPage} />
         ))}
       </div>
       <div className="pt-10">
-        <p
-          className="px-3 text-xs font-semibold uppercase tracking-wider text-gray-500"
-          id="communities-headline"
-        >
-          My communities
-        </p>
-        <div className="mt-3 space-y-2" aria-labelledby="communities-headline">
+        <SidebarItem
+          item={{ name: 'Communities', href: '/folds', icon: UserGroupIcon }}
+          currentPage={currentPage}
+        />
+
+        <div className="mt-3 space-y-2">
           {communities.map((community) => (
             <a
               key={community.name}
               href={community.href}
               className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
             >
-              <span className="truncate">{community.name}</span>
+              <span className="truncate">&nbsp; {community.name}</span>
             </a>
           ))}
         </div>