From 77ce22d8e5b53d59654410259de7e8657580e3d9 Mon Sep 17 00:00:00 2001
From: Ricardo Silva <ricardo.silva@codecomputerlove.com>
Date: Wed, 18 Nov 2020 16:17:20 +0000
Subject: [PATCH] put filters inside a dropdown in mobile devices

---
 pages/search.tsx | 380 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 307 insertions(+), 73 deletions(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index 2b272e265..bbac97382 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames'
 import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import Link from 'next/link'
+import { useState } from 'react'
 import { useRouter } from 'next/router'
 import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
 import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
@@ -43,6 +44,9 @@ export default function Search({
   categories,
   brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
+  const [activeFilter, setActiveFilter] = useState('')
+  const [toggleFilter, setToggleFilter] = useState(false)
+
   const router = useRouter()
   const { asPath } = router
   const { q, sort } = router.query
@@ -66,60 +70,222 @@ export default function Search({
     sort: typeof sort === 'string' ? sort : '',
   })
 
+  const handleClick = (event: any, filter: string) => {
+    if (filter !== activeFilter) {
+      setToggleFilter(true)
+    } else {
+      setToggleFilter(!toggleFilter)
+    }
+
+    setActiveFilter(filter)
+  }
+
   return (
     <Container>
-      <div className="grid grid-cols-12 gap-4 mt-3 mb-20">
-        <div className="col-span-2">
-          <ul className="mb-10">
-            <li className="py-1 text-base font-bold tracking-wide">
-              <Link href={{ pathname: getCategoryPath('', brand), query }}>
-                <a>All Categories</a>
-              </Link>
-            </li>
-            {categories.map((cat) => (
-              <li
-                key={cat.path}
-                className={cn('py-1 text-accents-8', {
-                  underline: activeCategory?.entityId === cat.entityId,
-                })}
-              >
-                <Link
-                  href={{
-                    pathname: getCategoryPath(cat.path, brand),
-                    query,
-                  }}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mt-3 mb-20">
+        <div className="col-span-8 lg:col-span-2 order-1 lg:order-none">
+          {/* Categories */}
+          <div className="relative inline-block w-full">
+            <div className="lg:hidden">
+              <span className="rounded-md shadow-sm">
+                <button
+                  type="button"
+                  onClick={(e) => handleClick(e, 'categories')}
+                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                  id="options-menu"
+                  aria-haspopup="true"
+                  aria-expanded="true"
                 >
-                  <a>{cat.name}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-          <ul>
-            <li className="py-1 text-base font-bold tracking-wide">
-              <Link href={{ pathname: getDesignerPath('', category), query }}>
-                <a>All Designers</a>
-              </Link>
-            </li>
-            {brands.flatMap(({ node }) => (
-              <li
-                key={node.path}
-                className={cn('py-1 text-accents-8', {
-                  underline: activeBrand?.entityId === node.entityId,
-                })}
-              >
-                <Link
-                  href={{
-                    pathname: getDesignerPath(node.path, category),
-                    query,
-                  }}
+                  {activeCategory?.name
+                    ? `Category: ${activeCategory?.name}`
+                    : 'All Categories'}
+                  <svg
+                    className="-mr-1 ml-2 h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
+                activeFilter !== 'categories' || toggleFilter !== true
+                  ? 'hidden'
+                  : ''
+              }`}
+            >
+              <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
+                <div
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="options-menu"
                 >
-                  <a>{node.name}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
+                  <ul>
+                    <li
+                      className={cn(
+                        'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
+                        {
+                          underline: !activeCategory?.name,
+                        }
+                      )}
+                    >
+                      <Link
+                        href={{ pathname: getCategoryPath('', brand), query }}
+                      >
+                        <a
+                          onClick={(e) => handleClick(e, 'categories')}
+                          className={
+                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                          }
+                        >
+                          All Categories
+                        </a>
+                      </Link>
+                    </li>
+                    {categories.map((cat) => (
+                      <li
+                        key={cat.path}
+                        className={cn(
+                          'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
+                          {
+                            underline:
+                              activeCategory?.entityId === cat.entityId,
+                          }
+                        )}
+                      >
+                        <Link
+                          href={{
+                            pathname: getCategoryPath(cat.path, brand),
+                            query,
+                          }}
+                        >
+                          <a
+                            onClick={(e) => handleClick(e, 'categories')}
+                            className={
+                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                            }
+                          >
+                            {cat.name}
+                          </a>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Designs */}
+          <div className="relative inline-block w-full">
+            <div className="lg:hidden mt-3">
+              <span className="rounded-md shadow-sm">
+                <button
+                  type="button"
+                  onClick={(e) => handleClick(e, 'brands')}
+                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                  id="options-menu"
+                  aria-haspopup="true"
+                  aria-expanded="true"
+                >
+                  {activeBrand?.name
+                    ? `Design: ${activeBrand?.name}`
+                    : 'All Designs'}
+                  <svg
+                    className="-mr-1 ml-2 h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
+                activeFilter !== 'brands' || toggleFilter !== true
+                  ? 'hidden'
+                  : ''
+              }`}
+            >
+              <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
+                <div
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="options-menu"
+                >
+                  <ul>
+                    <li
+                      className={cn(
+                        'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
+                        {
+                          underline: !activeBrand?.name,
+                        }
+                      )}
+                    >
+                      <Link
+                        href={{
+                          pathname: getDesignerPath('', category),
+                          query,
+                        }}
+                      >
+                        <a
+                          onClick={(e) => handleClick(e, 'brands')}
+                          className={
+                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                          }
+                        >
+                          All Designers
+                        </a>
+                      </Link>
+                    </li>
+                    {brands.flatMap(({ node }) => (
+                      <li
+                        key={node.path}
+                        className={cn(
+                          'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
+                          {
+                            underline: activeBrand?.entityId === node.entityId,
+                          }
+                        )}
+                      >
+                        <Link
+                          href={{
+                            pathname: getDesignerPath(node.path, category),
+                            query,
+                          }}
+                        >
+                          <a
+                            onClick={(e) => handleClick(e, 'brands')}
+                            className={
+                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                            }
+                          >
+                            {node.name}
+                          </a>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="col-span-8">
+        {/* Products */}
+        <div className="col-span-8 order-3 lg:order-none">
           {(q || activeCategory || activeBrand) && (
             <div className="mb-12 transition ease-in duration-75">
               {data ? (
@@ -190,31 +356,99 @@ export default function Search({
             </Grid>
           )}
         </div>
-        <div className="col-span-2">
-          <ul>
-            <li className="py-1 text-base font-bold tracking-wide">Sort</li>
-            <li
-              className={cn('py-1 text-accents-8', {
-                underline: !sort,
-              })}
+
+        {/* Sort */}
+        <div className="col-span-8 lg:col-span-2 order-2 lg:order-none">
+          <div className="relative inline-block w-full">
+            <div className="lg:hidden">
+              <span className="rounded-md shadow-sm">
+                <button
+                  type="button"
+                  onClick={(e) => handleClick(e, 'sort')}
+                  className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
+                  id="options-menu"
+                  aria-haspopup="true"
+                  aria-expanded="true"
+                >
+                  {sort ? `Sort: ${sort}` : 'Relevance'}
+                  <svg
+                    className="-mr-1 ml-2 h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </span>
+            </div>
+            <div
+              className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
+                activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
+              }`}
             >
-              <Link href={{ pathname, query: filterQuery({ q }) }}>
-                <a>Relevance</a>
-              </Link>
-            </li>
-            {SORT.map(([key, text]) => (
-              <li
-                key={key}
-                className={cn('py-1 text-accents-8', {
-                  underline: sort === key,
-                })}
-              >
-                <Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
-                  <a>{text}</a>
-                </Link>
-              </li>
-            ))}
-          </ul>
+              <div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none">
+                <div
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="options-menu"
+                >
+                  <ul>
+                    <li
+                      className={cn(
+                        'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
+                        {
+                          underline: !sort,
+                        }
+                      )}
+                    >
+                      <Link href={{ pathname, query: filterQuery({ q }) }}>
+                        <a
+                          onClick={(e) => handleClick(e, 'sort')}
+                          className={
+                            'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                          }
+                        >
+                          Relevance
+                        </a>
+                      </Link>
+                    </li>
+                    {SORT.map(([key, text]) => (
+                      <li
+                        key={key}
+                        className={cn(
+                          'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
+                          {
+                            underline: sort === key,
+                          }
+                        )}
+                      >
+                        <Link
+                          href={{
+                            pathname,
+                            query: filterQuery({ q, sort: key }),
+                          }}
+                        >
+                          <a
+                            onClick={(e) => handleClick(e, 'sort')}
+                            className={
+                              'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
+                            }
+                          >
+                            {text}
+                          </a>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </Container>