fix(shop): drawer on shop routes, link everywhere else

Cart drawer only mounts inside ShopLayout (/shop/*). On non-shop routes
the navbar cart button is now a Link to /shop/cart instead of a drawer
trigger — the drawer doesn't exist there, so clicking did nothing.

Author: tannerlinsley

src/components/NavbarCartButton.tsx

@@ -1,19 +1,35 @@
-import { useLocation } from '@tanstack/react-router'
+import { Link, useLocation } from '@tanstack/react-router'
 import { ShoppingCart } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useCart } from '~/hooks/useCart'
 import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
 
+const badgeClasses = twMerge(
+  'absolute -top-1 -right-1 min-w-[1.125rem] h-[1.125rem] px-1',
+  'flex items-center justify-center rounded-full',
+  'text-[0.65rem] font-bold leading-none',
+  'bg-black text-white dark:bg-white dark:text-black',
+)
+
+const buttonClasses = twMerge(
+  'relative flex items-center justify-center',
+  'h-9 w-9 rounded-lg transition-colors',
+  'hover:bg-gray-500/10 text-gray-700 dark:text-gray-300',
+)
+
 /**
  * Cart button in the main Navbar.
  *
- * Visibility rules:
+ * Behaviour:
+ *   • On /shop/* routes → opens the cart drawer (drawer is mounted in
+ *     ShopLayout, so it exists on these routes)
+ *   • Everywhere else → navigates to /shop/cart (no drawer mounted
+ *     outside the shop, and full navigation is the right UX anyway)
+ *
+ * Visibility:
  *   • Always visible on /shop/* routes (even at zero items)
  *   • Site-wide when the cart has at least one item
  *   • Hidden elsewhere when the cart is empty
- *
- * Click opens the global CartDrawer — no navigation, so the user keeps
- * their place in the docs or blog while reviewing their cart.
  */
 export function NavbarCartButton() {
   const { pathname } = useLocation()
@@ -23,30 +39,35 @@ export function NavbarCartButton() {
 
   if (!onShopRoute && totalQuantity === 0) return null
 
+  const badge =
+    totalQuantity > 0 ? (
+      <span className={badgeClasses}>
+        {totalQuantity > 99 ? '99+' : totalQuantity}
+      </span>
+    ) : null
+
+  const label = totalQuantity > 0 ? `Cart (${totalQuantity} items)` : 'Cart'
+
+  // On shop routes: open the drawer (it's mounted in ShopLayout)
+  if (onShopRoute) {
+    return (
+      <button
+        type="button"
+        onClick={openDrawer}
+        aria-label={label}
+        className={buttonClasses}
+      >
+        <ShoppingCart className="w-4 h-4" />
+        {badge}
+      </button>
+    )
+  }
+
+  // Everywhere else: navigate to the cart page
   return (
-    <button
-      type="button"
-      onClick={openDrawer}
-      aria-label={totalQuantity > 0 ? `Cart (${totalQuantity} items)` : 'Cart'}
-      className={twMerge(
-        'relative flex items-center justify-center',
-        'h-9 w-9 rounded-lg transition-colors',
-        'hover:bg-gray-500/10 text-gray-700 dark:text-gray-300',
-      )}
-    >
+    <Link to="/shop/cart" aria-label={label} className={buttonClasses}>
       <ShoppingCart className="w-4 h-4" />
-      {totalQuantity > 0 ? (
-        <span
-          className={twMerge(
-            'absolute -top-1 -right-1 min-w-[1.125rem] h-[1.125rem] px-1',
-            'flex items-center justify-center rounded-full',
-            'text-[0.65rem] font-bold leading-none',
-            'bg-black text-white dark:bg-white dark:text-black',
-          )}
-        >
-          {totalQuantity > 99 ? '99+' : totalQuantity}
-        </span>
-      ) : null}
-    </button>
+      {badge}
+    </Link>
   )
 }

src/components/shop/ShopLayout.tsx

@@ -14,6 +14,8 @@ import {
 import { twMerge } from 'tailwind-merge'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import type { CollectionListItem } from '~/utils/shopify-queries'
+import { CartDrawer } from './CartDrawer'
+import { useCartDrawerStore } from './cartDrawerStore'
 
 type ShopLayoutProps = {
   collections: Array<CollectionListItem>
@@ -148,10 +150,18 @@ export function ShopLayout({ collections, children }: ShopLayoutProps) {
       >
         {children}
       </main>
+
+      <ShopCartDrawer />
     </div>
   )
 }
 
+function ShopCartDrawer() {
+  const open = useCartDrawerStore((s) => s.open)
+  const setOpen = useCartDrawerStore((s) => s.setOpen)
+  return <CartDrawer open={open} onOpenChange={setOpen} />
+}
+
 function ShopSidebarNav({
   collections,
   showLabels,

src/routes/__root.tsx

@@ -39,14 +39,6 @@ import { THEME_COLORS } from '~/utils/utils'
 import { useHubSpotChat } from '~/hooks/useHubSpotChat'
 import { trackPageView } from '~/utils/analytics'
 import { twMerge } from 'tailwind-merge'
-import { CartDrawer } from '~/components/shop/CartDrawer'
-import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
-
-function GlobalCartDrawer() {
-  const open = useCartDrawerStore((s) => s.open)
-  const setOpen = useCartDrawerStore((s) => s.setOpen)
-  return <CartDrawer open={open} onOpenChange={setOpen} />
-}
 
 const GOOGLE_ANALYTICS_ID = 'G-JMT1Z50SPS'
 const GOOGLE_ANALYTICS_SCRIPT_SRC = `https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`
@@ -226,7 +218,6 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
           <ToastProvider>
             <PageViewTracker />
             {hideNavbar ? children : <Navbar>{children}</Navbar>}
-            <GlobalCartDrawer />
             {showDevtools && LazyAppDevtools ? (
               <React.Suspense fallback={null}>
                 <LazyAppDevtools />