code changes requests + ticket #449

app/components/Nav/Mobile/index.tsx

@@ -6,34 +6,54 @@ 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 {sortFuncs} from '~/routes/tags.$'
-import {questionUrl, tagsUrl, tagUrl} from '~/routesMapper'
-import {TOCItem} from '~/routes/questions.toc'
+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(!showMenu)
+    setShowMenu(false)
     setShowArticles(false)
+    setShowSearch(false)
+  }
+  const toggleSearch = () => {
+    setShowSearch(!showSearch)
   }
   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} />
+            {!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">
@@ -42,13 +62,13 @@ export const MobileNav = ({toc, categories}: NavProps) => {
                 className="secondary full-width space-between"
                 icon={<CarrotLarge />}
               >
-                <p className={'composite-elements'}>
+                <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'}>
+                <p className={'composite-elements small'}>
                   <BotIcon className={'icon-margin'} />
                   Stampy chatbot
                 </p>
@@ -69,46 +89,7 @@ export const MobileNav = ({toc, categories}: NavProps) => {
           </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>
+            <ArticlesDropdown toc={toc} categories={categories || []} />
           </div>
         </>
       )}

app/components/Nav/Mobile/navMobile.css

@@ -4,7 +4,7 @@
   }
   .top-nav {
     justify-content: space-between;
-    padding: var(--spacing-20) var(--spacing-24);
+    padding: var(--spacing-16);
   }
   .top-logo {
     padding: 0;
@@ -24,7 +24,6 @@
   }
   .mobile-menu > .button {
     border-radius: 0;
-    font-size: 16px;
   }
   .mobile-menu > .button:first-child {
     border-bottom: 0;
@@ -36,24 +35,51 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--spacing-24);
+    padding: var(--spacing-16);
     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);
+  .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%;
   }
-  .top-margin {
-    margin-top: var(--spacing-40);
+  .container-search-results {
+    height: 50vh !important;
+    width: 100% !important;
+    position: inherit !important;
+    margin-top: var(--spacing-8);
   }
 }

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/index.ts

@@ -27,6 +27,7 @@ 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'

app/newRoot.css

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