crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 05:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix responsiviness on search page

Browse Source
This commit is contained in:
Matheus Kuster 2020-11-06 11:51:01 -03:00
parent b6160b44ab
commit 29c3fc7803
1 changed files with 149 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
pages/search.tsx
View File

@ -1,3 +1,4 @@
import {useState} from 'react'
import cn from 'classnames'
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import Link from 'next/link'
@ -43,6 +44,8 @@ export default function Search({
categories,
brands,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false)
const router = useRouter()
const { asPath } = router
const { q, sort } = router.query
@ -66,11 +69,35 @@ export default function Search({
sort: typeof sort === 'string' ? sort : '',
})
return (
<Container>
<div className="grid grid-cols-12 gap-4 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
const Sort = () => (
<ul>
<li className="py-1 text-base font-bold tracking-wide">Sort</li>
<li
className={cn('py-1 text-accents-8', {
underline: !sort,
})}
>
<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>
)
const Categories = () => (
<ul className="mb-6 md:mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={{ pathname: getCategoryPath('', brand), query }}>
<a>All Categories</a>
@ -94,6 +121,9 @@ export default function Search({
</li>
))}
</ul>
)
const Designers = () => (
<ul>
<li className="py-1 text-base font-bold tracking-wide">
<Link href={{ pathname: getDesignerPath('', category), query }}>
@ -118,10 +148,19 @@ export default function Search({
</li>
))}
</ul>
)
return (
<Container>
<div className="grid grid-cols-12 gap-4 mt-3 mb-20">
<div className="col-span-2 hidden md:block">
<Categories />
<Designers />
</div>
<div className="col-span-8">
<div className="col-span-12 md:col-span-8">
{(q || activeCategory || activeBrand) && (
<div className="mb-12 transition ease-in duration-75">
<div className="mb-6 transition ease-in duration-75">
<div className="flex justify-between">
{data ? (
<>
<span
@ -156,12 +195,30 @@ export default function Search({
</span>
</>
) : q ? (
<>
<div>
Searching for: "<strong>{q}</strong>"
</>
</div>
) : (
<>Searching...</>
)}
<button
className="md:invisible text-accents-8 outline-none"
onClick={() => setShowMobileMenu(prev => !prev)}
>
Filter & Sort
</button>
</div>
{showMobileMenu && (
<div className="flex justify-between mt-4 md:hidden">
<div className="flex flex-col">
<Categories />
<Designers />
</div>
<Sort />
</div>
)}
</div>
)}
@ -190,31 +247,8 @@ 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,
})}
>
<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="col-span-2 hidden md:block">
<Sort />
</div>
</div>
</Container>