fix(shop): mount cart drawer at root so it works on non-shop pages

The drawer was inside ShopLayout, which only mounts on /shop/* routes.
Clicking the navbar cart button on /docs or /blog called the zustand
store's openDrawer() but nothing was listening. Moved the drawer mount
to __root.tsx so it's globally available — same as the search modal.

Author: tannerlinsley

src/components/shop/ShopLayout.tsx

@@ -14,8 +14,6 @@ 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>
@@ -150,18 +148,10 @@ export function ShopLayout({ collections, children }: ShopLayoutProps) {
       >
         {children}
       </main>
-
-      <GlobalCartDrawer />
     </div>
   )
 }
 
-function GlobalCartDrawer() {
-  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,6 +39,14 @@ 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}`
@@ -218,6 +226,7 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
           <ToastProvider>
             <PageViewTracker />
             {hideNavbar ? children : <Navbar>{children}</Navbar>}
+            <GlobalCartDrawer />
             {showDevtools && LazyAppDevtools ? (
               <React.Suspense fallback={null}>
                 <LazyAppDevtools />