mobile global nav

app/components/Button/index.tsx

@@ -22,6 +22,7 @@ const Button = ({children, action, tooltip, icon, className}: ButtonProps) => {
   return (
     <button className={classes} onClick={action} data-tooltip={tooltip}>
       {children}
+      {icon && icon}
     </button>
   )
 }

app/components/Nav/Mobile/index.tsx

@@ -0,0 +1,99 @@
+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 MagnifyingLarge from '~/components/icons-generated/MagnifyingLarge'
+import {NavProps} from '~/components/Nav'
+import Button from '~/components/Button'
+import '../nav.css'
+import './navMobile.css'
+import ArticlesDropdown from '~/components/ArticlesDropdown'
+import Search from '~/components/search'
+export const MobileNav = ({toc, categories}: NavProps) => {
+  const [showMenu, setShowMenu] = React.useState(false)
+  const [showSearch, setShowSearch] = React.useState(false)
+  const [showArticles, setShowArticles] = React.useState(false)
+  const toggleMenu = () => {
+    setShowMenu(false)
+    setShowArticles(false)
+    setShowSearch(false)
+  }
+  const toggleSearch = () => {
+    setShowSearch(!showSearch)
+  }
+  console.log('toc', toc)
+  return (
+    <header className="top-header">
+      {!showArticles && (
+        <>
+          <nav className="top-nav">
+            {!showSearch && (
+              <>
+                <Link to="/" className="top-logo">
+                  <AISafetyIcon />
+                </Link>
+
+                {!showMenu ? (
+                  <div>
+                    <MagnifyingLarge className={'search-icon'} onClick={toggleSearch} />
+                    <ListLarge className={'menu-button'} onClick={() => setShowMenu(true)} />
+                  </div>
+                ) : (
+                  <XLarge className={'menu-button'} onClick={toggleMenu} />
+                )}
+              </>
+            )}
+
+            {showSearch ? (
+              <div className={'mobile-searchbar'}>
+                <XLarge className={'menu-button'} onClick={toggleMenu} />
+                <Search />
+              </div>
+            ) : null}
+          </nav>
+          {showMenu && (
+            <div className="mobile-menu">
+              <Button
+                action={() => setShowArticles(!showArticles)}
+                className="secondary full-width space-between"
+                icon={<CarrotLarge />}
+              >
+                <p className={'composite-elements small'}>
+                  <OpenBookIcon className={'icon-margin'} />
+                  Articles
+                </p>
+              </Button>
+              <Button action="https://xkcd.com/285/" className="secondary full-width flex-start">
+                <p className={'composite-elements small'}>
+                  <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'}>
+            <ArticlesDropdown toc={toc} categories={categories || []} />
+          </div>
+        </>
+      )}
+    </header>
+  )
+}
+export default MobileNav

app/components/Nav/Mobile/navMobile.css

@@ -0,0 +1,85 @@
+@media only screen and (max-width: 640px) {
+  .top-header {
+    padding: 0;
+  }
+  .top-nav {
+    justify-content: space-between;
+    padding: var(--spacing-16);
+  }
+  .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;
+  }
+  .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-16);
+    border-bottom: 1px solid var(--colors-cool-grey-200);
+  }
+  .back-icon {
+    cursor: pointer;
+    transform: rotate(180deg);
+  }
+  .articles-mobile {
+    padding: var(--spacing-24);
+  }
+  .articles-dropdown-container {
+    visibility: visible !important;
+    flex-direction: column;
+    border: 0;
+    box-shadow: none;
+    position: static !important;
+    padding: 0 !important;
+    width: 100% !important;
+  }
+  .search-icon {
+    margin-right: var(--spacing-16);
+  }
+  .search-content > svg:nth-of-type(2) {
+    visibility: hidden;
+  }
+  .mobile-searchbar {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  .mobile-searchbar > svg {
+    margin-top: var(--spacing-12);
+    margin-left: var(--spacing-16);
+  }
+  .mobile-searchbar > * .search-box.expandable:focus-within,
+  .mobile-searchbar > * .search-box.expandable {
+    width: 100%;
+  }
+  .container-search-results {
+    height: 50vh !important;
+    width: 100% !important;
+    position: inherit !important;
+    margin-top: var(--spacing-8);
+  }
+}

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/MagnifyingLarge.tsx

@@ -0,0 +1,12 @@
+import type {SVGProps} from 'react'
+const SvgMagnifyingLarge = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#788492"
+      fillRule="evenodd"
+      d="M15.292 16a8 8 0 1 1 .707-.707l5.355 5.353a.5.5 0 0 1-.708.708zM17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgMagnifyingLarge

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,7 +25,9 @@ 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 MagnifyingLarge} from './MagnifyingLarge'
 export {default as Magnifying} from './Magnifying'
 export {default as OpenBook} from './OpenBook'
 export {default as Paper} from './Paper'
@@ -45,4 +48,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'