Address all feedback

Fix icon names
Extract navbar component into a separate function
Rm arrow and indentation
Move group name under logo
Fix visual sidebar stretchy thing
Fix visual bug

web/components/contract-search.tsx

@@ -387,9 +387,7 @@ function ContractSearchControls(props: {
   }
 
   return (
-    <Col
-      className={clsx('bg-base-200 sticky top-0 z-20 gap-3 pb-3', className)}
-    >
+    <Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
       <Row className="gap-1 sm:gap-2">
         <input
           type="text"

web/components/contract/contracts-grid.tsx

@@ -108,6 +108,7 @@ export function CreatorContractsList(props: {
 
   return (
     <ContractSearch
+      headerClassName="sticky"
       user={user}
       defaultSort="newest"
       defaultFilter="all"

web/components/editor/market-modal.tsx

@@ -90,7 +90,7 @@ export function MarketModal(props: {
                 '!bg-indigo-100 outline outline-2 outline-indigo-300',
             }}
             additionalFilter={{}} /* hide pills */
-            headerClassName="bg-white"
+            headerClassName="bg-white sticky"
           />
         </div>
       </Col>

web/components/nav/group-nav-bar.tsx

@@ -1,4 +1,4 @@
-import { BookOpenIcon, HomeIcon } from '@heroicons/react/outline'
+import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
 import { Item } from './sidebar'
 
 import clsx from 'clsx'
@@ -10,7 +10,7 @@ import router from 'next/router'
 import { userProfileItem } from './nav-bar'
 
 const mobileGroupNavigation = [
-  { name: 'About', key: 'about', icon: BookOpenIcon },
+  { name: 'About', key: 'about', icon: ClipboardIcon },
   { name: 'Markets', key: 'markets', icon: HomeIcon },
   { name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
 ]

web/components/nav/group-sidebar.tsx

@@ -1,4 +1,4 @@
-import { HomeIcon, BookOpenIcon } from '@heroicons/react/outline'
+import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import { useUser } from 'web/hooks/use-user'
 import { ManifoldLogo } from './manifold-logo'
@@ -11,10 +11,12 @@ import NotificationsIcon from '../notifications-icon'
 import { SidebarItem } from './sidebar'
 import { buildArray } from 'common/util/array'
 import { User } from 'common/user'
+import { Row } from '../layout/row'
+import { Col } from '../layout/col'
 
 const groupNavigation = [
-  { name: 'About', key: 'about', icon: BookOpenIcon },
   { name: 'Markets', key: 'markets', icon: HomeIcon },
+  { name: 'About', key: 'about', icon: ClipboardIcon },
   { name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
 ]
 
@@ -28,7 +30,7 @@ const generalNavigation = (user?: User | null) =>
     }
   )
 
-export default function GroupSidebar(props: {
+export function GroupSidebar(props: {
   groupName: string
   className?: string
   onClick: (key: string) => void
@@ -45,6 +47,16 @@ export default function GroupSidebar(props: {
       className={clsx('flex max-h-[100vh] flex-col', className)}
     >
       <ManifoldLogo className="pt-6" twoLine />
+      <Row className="pl-2">
+        <Col className="flex justify-center">
+          <CornerDownRightIcon className=" h-6 w-6 text-indigo-700" />
+        </Col>
+        <Col>
+          <div className={' text-2xl text-indigo-700 sm:mb-1 sm:mt-3'}>
+            {groupName}
+          </div>
+        </Col>
+      </Row>
 
       <div className=" min-h-0 shrink flex-col items-stretch gap-1  pt-6 lg:flex ">
         {user ? (
@@ -54,24 +66,15 @@ export default function GroupSidebar(props: {
         )}
       </div>
 
-      <div className={' text-2xl text-indigo-700 sm:mb-1 sm:mt-3'}>
-        {groupName}
-      </div>
-
       {/* Desktop navigation */}
-      <div className="relative hidden min-h-0 shrink flex-col items-stretch gap-1 pl-6 pb-0 lg:flex">
-        {/* adds a purple CornerDownRightIcon pointing to the sidebaritems */}
-        <CornerDownRightIcon className="absolute left-0 top-0 mt-2 h-6 w-6 text-indigo-700" />
-
-        {groupNavigation.map((item) => (
-          <SidebarItem
-            key={item.key}
-            item={item}
-            currentPage={currentKey}
-            onClick={props.onClick}
-          />
-        ))}
-      </div>
+      {groupNavigation.map((item) => (
+        <SidebarItem
+          key={item.key}
+          item={item}
+          currentPage={currentKey}
+          onClick={props.onClick}
+        />
+      ))}
       {generalNavigation(user).map((item) => (
         <SidebarItem
           key={item.key}

web/pages/experimental/home/index.tsx

@@ -120,6 +120,7 @@ function SearchSection(props: {
         }
         noControls
         maxResults={6}
+        headerClassName="sticky"
         persistPrefix={`experimental-home-${sort}`}
       />
     </Col>
@@ -147,6 +148,7 @@ function GroupSection(props: {
         additionalFilter={{ groupSlug: group.slug }}
         noControls
         maxResults={6}
+        headerClassName="sticky"
         persistPrefix={`experimental-home-${group.slug}`}
       />
     </Col>

web/pages/group/[...slugs]/index.tsx

@@ -49,9 +49,9 @@ import { Spacer } from 'web/components/layout/spacer'
 import { usePost } from 'web/hooks/use-post'
 import { useAdmin } from 'web/hooks/use-admin'
 import { track } from '@amplitude/analytics-browser'
-import GroupSidebar from 'web/components/nav/group-sidebar'
 import { GroupNavBar } from 'web/components/nav/group-nav-bar'
 import { ArrowLeftIcon } from '@heroicons/react/solid'
+import { GroupSidebar } from 'web/components/nav/group-sidebar'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -207,6 +207,7 @@ export default function GroupPage(props: {
         </div>
       </div>
       <ContractSearch
+        headerClassName="md:sticky"
         user={user}
         defaultSort={'newest'}
         defaultFilter={suggestedFilter}
@@ -254,22 +255,7 @@ export default function GroupPage(props: {
 
   return (
     <>
-      <header className="sticky top-0 z-50 w-full pb-2 md:hidden lg:col-span-12">
-        <div className="flex items-center  border-b border-gray-200 bg-white  px-4">
-          <div className="flex-shrink-0">
-            <Link href="/">
-              <a className="text-indigo-700 hover:text-gray-500 ">
-                <ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
-              </a>
-            </Link>
-          </div>
-          <div className="ml-3">
-            <h1 className="text-lg font-medium text-indigo-700">
-              {group.name}
-            </h1>
-          </div>
-        </div>
-      </header>
+      <TopGroupNavBar group={group} />
       <div>
         <div
           className={
@@ -290,7 +276,9 @@ export default function GroupPage(props: {
             description={`Created by ${creator.name}. ${group.about}`}
             url={groupPath(group.slug)}
           />
-          <main className={'px-2 pt-1 xl:col-span-8'}>{pageContent}</main>
+          <main className={'px-2 pt-1 lg:col-span-8 lg:pt-6 xl:col-span-8'}>
+            {pageContent}
+          </main>
         </div>
         <GroupNavBar
           currentPage={sidebarPages[sidebarIndex].key}
@@ -301,6 +289,27 @@ export default function GroupPage(props: {
   )
 }
 
+export function TopGroupNavBar(props: { group: Group }) {
+  return (
+    <header className="sticky top-0 z-50 w-full pb-2 md:hidden lg:col-span-12">
+      <div className="flex items-center  border-b border-gray-200 bg-white  px-4">
+        <div className="flex-shrink-0">
+          <Link href="/">
+            <a className="text-indigo-700 hover:text-gray-500 ">
+              <ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
+            </a>
+          </Link>
+        </div>
+        <div className="ml-3">
+          <h1 className="text-lg font-medium text-indigo-700">
+            {props.group.name}
+          </h1>
+        </div>
+      </div>
+    </header>
+  )
+}
+
 function JoinOrAddQuestionsButtons(props: {
   group: Group
   user: User | null | undefined
@@ -530,6 +539,7 @@ function AddContractButton(props: { group: Group; user: User }) {
           <div className={'overflow-y-scroll sm:px-8'}>
             <ContractSearch
               user={user}
+              headerClassName="md:sticky"
               hideOrderSelector={true}
               onContractClick={addContractToCurrentGroup}
               cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}

web/pages/home.tsx

@@ -26,6 +26,7 @@ const Home = () => {
             user={user}
             persistPrefix="home-search"
             useQueryUrlParam={true}
+            headerClassName="sticky"
           />
         </Col>
         <button