mobile global nav

app/components/Button/index.tsx

@@ -8,20 +8,24 @@ type ButtonProps = {
   className?: string
   tooltip?: string
   icon?: ReactNode
+  leftIcon?: ReactNode
 }
-const Button = ({children, action, tooltip, icon, className}: ButtonProps) => {
+const Button = ({children, action, tooltip, icon, leftIcon, className}: ButtonProps) => {
   const classes = ['button', className, tooltip && 'tooltip'].filter((i) => i).join(' ')
   if (typeof action === 'string') {
     return (
       <Link to={action} className={classes} data-tooltip={tooltip}>
+        {leftIcon && leftIcon}
         {children}
         {icon && icon}
       </Link>
     )
   }
   return (
     <button className={classes} onClick={action} data-tooltip={tooltip}>
+      {leftIcon && leftIcon}
       {children}
+      {icon && icon}
     </button>
   )
 }

app/components/Nav/Mobile/index.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import {Link} from '@remix-run/react'
+import AISafetyIcon from '~/components/icons-generated/Aisafety'
+import {ListLarge} from '~/components/icons-generated'
+import {XLarge} from '~/components/icons-generated'
+import {CarrotLarge} from '~/components/icons-generated'
+import OpenBookIcon from '~/components/icons-generated/OpenBook'
+import BotIcon from '~/components/icons-generated/Bot'
+import {NavProps} from '~/components/Nav'
+import Button from '~/components/Button'
+import '../nav.css'
+import './navMobile.css'
+import {sortFuncs} from '~/routes/tags.$'
+import {questionUrl, tagsUrl, tagUrl} from '~/routesMapper'
+import {TOCItem} from '~/routes/questions.toc'
+export const MobileNav = ({toc, categories}: NavProps) => {
+  const [showMenu, setShowMenu] = React.useState(false)
+  const [showArticles, setShowArticles] = React.useState(false)
+  const toggleMenu = () => {
+    setShowMenu(!showMenu)
+    setShowArticles(false)
+  }
+  console.log('toc', toc)
+  return (
+    <header className="top-header">
+      {!showArticles && (
+        <>
+          <nav className="top-nav">
+            <Link to="/" className="top-logo">
+              <AISafetyIcon />
+            </Link>
+            {!showMenu ? (
+              <ListLarge className={'menu-button'} onClick={toggleMenu} />
+            ) : (
+              <XLarge className={'menu-button'} onClick={toggleMenu} />
+            )}
+          </nav>
+          {showMenu && (
+            <div className="mobile-menu">
+              <Button
+                action={() => setShowArticles(!showArticles)}
+                className="secondary full-width space-between"
+                icon={<CarrotLarge />}
+              >
+                <p className={'composite-elements'}>
+                  <OpenBookIcon className={'icon-margin'} />
+                  Articles
+                </p>
+              </Button>
+              <Button action="https://xkcd.com/285/" className="secondary full-width flex-start">
+                <p className={'composite-elements'}>
+                  <BotIcon className={'icon-margin'} />
+                  Stampy chatbot
+                </p>
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+      {showArticles && (
+        <>
+          <nav className="articles-header">
+            <CarrotLarge className={'back-icon'} onClick={() => setShowArticles(false)} />
+            <p className={'composite-elements'}>
+              <OpenBookIcon className={'icon-margin'} />
+              Articles
+            </p>
+            <XLarge className={'menu-button'} onClick={toggleMenu} />
+          </nav>
+
+          <div className={'articles-mobile'}>
+            <div className="default-bold margin-bottom">Introductory</div>
+            {toc
+              .filter((item) => item.category === 'Introductory')
+              .map((item: TOCItem) => (
+                <Link
+                  key={`${item.pageid}-${item.title}`}
+                  className="articles-entry"
+                  to={questionUrl(item)}
+                >
+                  {item.title}
+                </Link>
+              ))}
+            <div className="default-bold margin-bottom top-margin">Advanced</div>
+            {toc
+              .filter((item) => item.category === 'Advanced')
+              .map((item: TOCItem) => (
+                <Link
+                  key={`${item.pageid}-${item.title}`}
+                  to={questionUrl(item)}
+                  className="articles-entry"
+                >
+                  {item.title}
+                </Link>
+              ))}
+            <div className="default-bold margin-bottom top-margin">Browse by category</div>
+            {categories
+              ?.sort(sortFuncs['by number of questions'])
+              .slice(0, 12)
+              .map((tag) => (
+                <Link
+                  key={tag.rowId}
+                  className="articles-dropdown-teal-entry articles-entry"
+                  to={tagUrl(tag)}
+                >
+                  {tag.name}
+                </Link>
+              ))}
+            <Button action={tagsUrl()} className="secondary">
+              <span> Browse all categories</span>
+            </Button>
+          </div>
+        </>
+      )}
+    </header>
+  )
+}
+export default MobileNav

app/components/Nav/Mobile/navMobile.css

@@ -0,0 +1,59 @@
+@media only screen and (max-width: 640px) {
+  .top-header {
+    padding: 0;
+  }
+  .top-nav {
+    justify-content: space-between;
+    padding: var(--spacing-20) var(--spacing-24);
+  }
+  .top-logo {
+    padding: 0;
+  }
+  .menu-button {
+    cursor: pointer;
+  }
+  .composite-elements {
+    display: flex;
+    align-items: center;
+  }
+  .space-between {
+    justify-content: space-between;
+  }
+  .flex-start {
+    justify-content: flex-start;
+  }
+  .mobile-menu > .button {
+    border-radius: 0;
+    font-size: 16px;
+  }
+  .mobile-menu > .button:first-child {
+    border-bottom: 0;
+  }
+  .icon-margin {
+    margin-right: var(--spacing-8);
+  }
+  .articles-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-24);
+    border-bottom: 1px solid var(--colors-cool-grey-200);
+  }
+  .back-icon {
+    cursor: pointer;
+    transform: rotate(180deg);
+  }
+  .articles-entry {
+    display: block;
+    margin-bottom: var(--spacing-16);
+  }
+  .articles-mobile {
+    padding: var(--spacing-24);
+  }
+  .margin-bottom {
+    margin-bottom: var(--spacing-24);
+  }
+  .top-margin {
+    margin-top: var(--spacing-40);
+  }
+}

app/components/icons-generated/CarrotLarge.tsx

@@ -0,0 +1,7 @@
+import type {SVGProps} from 'react'
+const SvgCarrotLarge = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path stroke="#AFB7C2" d="m8 3 9 9-9 9" />
+  </svg>
+)
+export default SvgCarrotLarge

app/components/icons-generated/ListLarge.tsx

@@ -0,0 +1,9 @@
+import type {SVGProps} from 'react'
+const SvgListLarge = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <g stroke="#788492" strokeLinecap="round">
+      <path d="M22 12H2M22 7H2M22 17H2" />
+    </g>
+  </svg>
+)
+export default SvgListLarge

app/components/icons-generated/XLarge.tsx

@@ -0,0 +1,10 @@
+import type {SVGProps} from 'react'
+const SvgXLarge = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#AFB7C2"
+      d="M4.646 18.646a.5.5 0 0 0 .708.708L12 12.707l6.646 6.647a.5.5 0 0 0 .708-.708L12.707 12l6.647-6.646a.5.5 0 0 0-.708-.708L12 11.293 5.354 4.646a.5.5 0 1 0-.708.708L11.293 12z"
+    />
+  </svg>
+)
+export default SvgXLarge

app/components/icons-generated/index.ts

@@ -5,6 +5,7 @@ export {default as Arrow} from './Arrow'
 export {default as Bot} from './Bot'
 export {default as BottomEclipse} from './BottomEclipse'
 export {default as BoxArrow} from './BoxArrow'
+export {default as CarrotLarge} from './CarrotLarge'
 export {default as Chatbot} from './Chatbot'
 export {default as Clipboard} from './Clipboard'
 export {default as Code} from './Code'
@@ -24,6 +25,7 @@ export {default as GroupTopEcplise} from './GroupTopEcplise'
 export {default as Hide} from './Hide'
 export {default as Like} from './Like'
 export {default as Link} from './Link'
+export {default as ListLarge} from './ListLarge'
 export {default as MagnifyingGlass} from './MagnifyingGlass'
 export {default as Magnifying} from './Magnifying'
 export {default as OpenBook} from './OpenBook'
@@ -45,4 +47,5 @@ export {default as ThumbUpLarge} from './ThumbUpLarge'
 export {default as ThumbUp} from './ThumbUp'
 export {default as Undo} from './Undo'
 export {default as Users} from './Users'
+export {default as XLarge} from './XLarge'
 export {default as X} from './X'

app/newRoot.css

@@ -32,6 +32,7 @@
   --spacing-8: 8px;
   --spacing-12: 12px;
   --spacing-16: 16px;
+  --spacing-20: 20px;
   --spacing-24: 24px;
   --spacing-32: 32px;
   --spacing-40: 40px;