search bar ui

components/layout.js

@@ -4,6 +4,7 @@ import Container from 'react-bootstrap/Container'
 import { LightningProvider } from './lightning'
 import Footer from './footer'
 import Seo from './seo'
+import Search from './search'
 
 export default function Layout ({ noContain, noFooter, noFooterLinks, containClassName, noSeo, children }) {
   return (
@@ -22,6 +23,7 @@ export default function Layout ({ noContain, noFooter, noFooterLinks, containCla
             </Container>
             )}
         {!noFooter && <Footer noLinks={noFooterLinks} />}
+        {!noContain && <Search />}
       </LightningProvider>
     </>
   )

components/search.js

@@ -0,0 +1,61 @@
+import { Button, Container } from 'react-bootstrap'
+import styles from './search.module.css'
+import SearchIcon from '../svgs/search-fill.svg'
+import CloseIcon from '../svgs/close-line.svg'
+import { useState } from 'react'
+import { Form, Input, SubmitButton } from './form'
+
+export default function Search () {
+  const [searching, setSearching] = useState()
+  const [q, setQ] = useState()
+  return (
+    <>
+      <div className={`${styles.searchSection} ${searching ? styles.solid : styles.hidden}`}>
+        <Container className={`px-sm-0 ${styles.searchContainer}`}>
+          {searching
+            ? (
+              <Form
+                initial={{
+                  q: ''
+                }}
+                inline
+                className={`w-auto ${styles.active}`}
+              >
+                <Input
+                  name='q'
+                  required
+                  autoFocus
+                  groupClassName='mr-3 mb-0 flex-grow-1'
+                  className='w-100'
+                  onChange={async (formik, e) => {
+                    setQ(e.target.value?.trim())
+                  }}
+                />
+                {q
+                  ? (
+                    <SubmitButton variant='primary' className={styles.search}>
+                      <SearchIcon width={22} height={22} />
+                    </SubmitButton>
+                    )
+                  : (
+                    <Button
+                      className={styles.search} onClick={() => {
+                        setSearching(false)
+                      }}
+                    >
+                      <CloseIcon width={26} height={26} />
+                    </Button>)}
+
+              </Form>
+              )
+            : (
+              <Button className={`${styles.search} ${styles.active}`} onClick={() => setSearching(true)}>
+                <SearchIcon width={22} height={22} />
+              </Button>
+              )}
+        </Container>
+      </div>
+      <div className={styles.searchPadding} />
+    </>
+  )
+}

components/search.module.css

@@ -0,0 +1,51 @@
+.searchSection {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 88px;
+}
+
+.searchContainer {
+    height: 88px;
+    position: relative;
+}
+
+.searchSection.solid {
+    pointer-events: auto;
+    background: var(--theme-body);
+    box-shadow: 0 -4px 12px hsl(0deg 0% 59% / 10%);
+}
+
+.searchSection.hidden {
+    pointer-events: none;
+    background: transparent;
+}
+
+.search {
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+}
+
+.active {
+    pointer-events: auto;
+    bottom: 18px;
+    right: 18px;
+    position: absolute;
+}
+
+form.active {
+    left: 18px;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+}
+
+.searchPadding {
+    padding-bottom: 88px;
+}

svgs/search-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617z"/></svg>

svgs/search-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>