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

side nav design updates

Browse Source
This commit is contained in:
StephDietz 2023-07-12 14:25:08 -05:00
parent 65bd26b090
commit 46fb942cfa
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/search/layout.tsx
View File

@ -7,7 +7,7 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) { export default function SearchLayout({ children }: { children: React.ReactNode }) {
return ( return (
<Suspense> <Suspense>
<div className="mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row"> <div className="mx-auto flex flex-col py-6 text-black dark:text-white md:flex-row">
<div className="order-first flex-none md:w-1/6"> <div className="order-first flex-none md:w-1/6">
<Collections /> <Collections />
</div> </div>

4
components/layout/search/filter/index.tsx
View File

@ -19,9 +19,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
return ( return (
<> <>
<nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10"> <nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10">
{title ? ( {title ? <h3 className="hidden text-xs text-gray-500 md:block">{title}</h3> : null}
<h3 className="hidden font-semibold text-black dark:text-white md:block">{title}</h3>
) : null}
<ul className="hidden md:block"> <ul className="hidden md:block">
<FilterItemList list={list} /> <FilterItemList list={list} />
</ul> </ul>

19
components/layout/search/filter/item.tsx
View File

@ -21,13 +21,15 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
}, [pathname, item.path]); }, [pathname, item.path]);
return ( return (
<li className="mt-2 flex text-sm text-gray-400" key={item.title}> <li className="mt-2 flex text-black dark:text-white" key={item.title}>
<Link <Link
href={createUrl(item.path, newParams)} href={createUrl(item.path, newParams)}
className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', { className={clsx(
'text-gray-600 dark:text-gray-400': !active, 'w-full text-sm underline-offset-4 hover:underline dark:hover:text-gray-100',
'font-semibold text-black dark:text-white': active {
})} 'underline underline-offset-4': active
}
)}
> >
{item.title} {item.title}
</Link> </Link>
@ -57,13 +59,12 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
: pathname; : pathname;
return ( return (
<li className="mt-2 flex text-sm text-gray-400" key={item.title}> <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
<Link <Link
prefetch={false} prefetch={false}
href={href} href={href}
className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', { className={clsx('w-full', {
'text-gray-600 dark:text-gray-400': !active, 'underline underline-offset-4': active
'font-semibold text-black dark:text-white': active
})} })}
> >
{item.title} {item.title}