crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-21 08:56: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 }) {
return (
<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">
<Collections />
</div>

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

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

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

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