Skip to content

Commit b500aa1

Browse files
committed
style(shop): cart panel instead of full-height drawer
Floats in the top-right corner below the navbar as a rounded panel instead of a full-height sheet anchored to the viewport edge. Grows in height with content up to max-h viewport, scrolls internally when it overflows. Lighter overlay (20% vs 40%) since a panel feels less modal than a full drawer.
1 parent 216a425 commit b500aa1

File tree

1 file changed

+15
-10
lines changed

1 file changed

+15
-10
lines changed

src/components/shop/CartDrawer.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,35 +28,40 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
2828
<Dialog.Portal>
2929
<Dialog.Overlay
3030
className={twMerge(
31-
'fixed inset-0 z-[100] bg-black/40',
31+
'fixed inset-0 z-[100] bg-black/20',
3232
'data-[state=open]:animate-in data-[state=open]:fade-in-0',
3333
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
3434
)}
3535
/>
3636
<Dialog.Content
3737
className={twMerge(
38-
'fixed right-0 top-0 bottom-0 z-[100] w-full sm:max-w-md flex flex-col',
39-
'bg-white dark:bg-gray-950 shadow-xl border-l border-gray-200 dark:border-gray-800',
40-
'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',
41-
'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',
38+
'fixed right-4 top-[calc(var(--navbar-height,56px)+0.5rem)] z-[100]',
39+
'w-[calc(100vw-2rem)] sm:w-[24rem]',
40+
'max-h-[calc(100dvh-var(--navbar-height,56px)-1rem)]',
41+
'flex flex-col',
42+
'rounded-xl shadow-2xl',
43+
'bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800',
44+
'data-[state=open]:animate-in data-[state=open]:slide-in-from-right-5 data-[state=open]:fade-in-0',
45+
'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-5 data-[state=closed]:fade-out-0',
46+
'duration-200',
4247
)}
4348
aria-describedby={undefined}
4449
>
45-
<header className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
46-
<Dialog.Title className="font-semibold">
50+
<header className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-800">
51+
<Dialog.Title className="font-semibold text-sm">
4752
Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
4853
</Dialog.Title>
4954
<Dialog.Close
50-
className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900"
55+
className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
5156
aria-label="Close cart"
5257
>
53-
<X className="w-4 h-4" />
58+
<X className="w-3.5 h-3.5" />
5459
</Dialog.Close>
5560
</header>
5661

5762
{hasLines ? (
5863
<>
59-
<ul className="flex-1 overflow-y-auto px-6 divide-y divide-gray-200 dark:divide-gray-800">
64+
<ul className="overflow-y-auto px-5 divide-y divide-gray-200 dark:divide-gray-800">
6065
{cart.lines.nodes.map((line) => (
6166
<DrawerCartLine
6267
key={line.id}

0 commit comments

Comments
 (0)