From 9d04c9879181deb6ca4ddd4bb3c617aead68bd10 Mon Sep 17 00:00:00 2001
From: Buddy-web3 <0buddy.ne@gmail.com>
Date: Wed, 28 Feb 2024 04:44:51 +0200
Subject: [PATCH] code changes requests + ticket #449

---
 app/assets/icons/magnifying-large.svg         |  5 ++
 app/components/Nav/Mobile/index.tsx           | 87 ++++++++-----------
 app/components/Nav/Mobile/navMobile.css       | 48 +++++++---
 .../icons-generated/MagnifyingLarge.tsx       | 12 +++
 app/components/icons-generated/index.ts       |  1 +
 app/newRoot.css                               |  1 -
 6 files changed, 89 insertions(+), 65 deletions(-)
 create mode 100644 app/assets/icons/magnifying-large.svg
 create mode 100644 app/components/icons-generated/MagnifyingLarge.tsx

diff --git a/app/assets/icons/magnifying-large.svg b/app/assets/icons/magnifying-large.svg
new file mode 100644
index 00000000..54dcef61
--- /dev/null
+++ b/app/assets/icons/magnifying-large.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icons / magnifying glass - large">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M15.2923 15.9994C13.882 17.2445 12.0292 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 12.0292 17.2445 13.882 15.9994 15.2923L21.3536 20.6464C21.5488 20.8417 21.5488 21.1583 21.3536 21.3536C21.1583 21.5488 20.8417 21.5488 20.6464 21.3536L15.2923 15.9994ZM17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" fill="#788492"/>
+</g>
+</svg>
diff --git a/app/components/Nav/Mobile/index.tsx b/app/components/Nav/Mobile/index.tsx
index 03823cb0..0ac95d1a 100644
--- a/app/components/Nav/Mobile/index.tsx
+++ b/app/components/Nav/Mobile/index.tsx
@@ -6,19 +6,24 @@ 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 (
@@ -26,14 +31,29 @@ export const MobileNav = ({toc, categories}: NavProps) => {
       {!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>
         </>
       )}
diff --git a/app/components/Nav/Mobile/navMobile.css b/app/components/Nav/Mobile/navMobile.css
index 5066a5c3..56ff21e9 100644
--- a/app/components/Nav/Mobile/navMobile.css
+++ b/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);
   }
 }
diff --git a/app/components/icons-generated/MagnifyingLarge.tsx b/app/components/icons-generated/MagnifyingLarge.tsx
new file mode 100644
index 00000000..6016a7a9
--- /dev/null
+++ b/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
diff --git a/app/components/icons-generated/index.ts b/app/components/icons-generated/index.ts
index 564e02c8..4a0ee9e3 100644
--- a/app/components/icons-generated/index.ts
+++ b/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'
diff --git a/app/newRoot.css b/app/newRoot.css
index 294515e4..fed4531d 100644
--- a/app/newRoot.css
+++ b/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;