Merge pull request #35 from thomasKn/thomas/fv-239-fix-responsive-med…

…ia-queries Update media queries
frontvibe · Feb 5, 2024 · 33f992f · 33f992f
2 parents 0000bc1 + 6453c4d
commit 33f992f
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 34 deletions.
diff --git a/.env.template b/.env.template
@@ -1,3 +1,4 @@
+NODE_ENV="development"
 # Shopify
 SESSION_SECRET="foobar"
 PUBLIC_STORE_DOMAIN="headless-journey.myshopify.com"

diff --git a/app/components/layout/CartDrawer.tsx b/app/components/layout/CartDrawer.tsx
@@ -4,14 +4,14 @@ import {Await, Link} from '@remix-run/react';
 import {CartForm} from '@shopify/hydrogen';
 import {cx} from 'class-variance-authority';
 import {Suspense, useCallback, useEffect, useMemo, useState} from 'react';
-import {useWindowSize} from 'react-use';
 
 import {useCartFetchers} from '~/hooks/useCartFetchers';
 import {useIsHydrated} from '~/hooks/useIsHydrated';
 import {useLocalePath} from '~/hooks/useLocalePath';
 import {useRootLoaderData} from '~/hooks/useRootLoaderData';
 import {useSanityThemeContent} from '~/hooks/useSanityThemeContent';
 
+import {useDevice} from '../../hooks/useDevice';
 import {Cart} from '../cart/Cart';
 import {IconBag} from '../icons/IconBag';
 import {IconLoader} from '../icons/IconLoader';
@@ -88,7 +88,7 @@ function Badge(props: {cart?: CartType | null; count: number}) {
 
   const buttonClass = cx([
     'relative flex size-8 items-center justify-center',
-    count > 0 && 'mr-3 md:mr-0',
+    count > 0 && 'mr-3 lg:mr-0',
   ]);
 
   return isHydrated ? (
@@ -99,7 +99,7 @@ function Badge(props: {cart?: CartType | null; count: number}) {
     >
       <DrawerTrigger className={buttonClass}>{BadgeCounter}</DrawerTrigger>
       <DrawerContent
-        className="flex h-[95dvh] max-h-screen w-screen flex-col gap-0 bg-background p-0 text-foreground md:left-auto md:right-0 md:h-screen md:max-w-lg"
+        className="flex h-[95dvh] max-h-screen w-screen flex-col gap-0 bg-background p-0 text-foreground lg:left-auto lg:right-0 lg:h-[100dvh] lg:max-w-lg"
         onCloseAutoFocus={(e) => e.preventDefault()}
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
@@ -118,17 +118,3 @@ function Badge(props: {cart?: CartType | null; count: number}) {
     </Link>
   );
 }
-
-function useDevice() {
-  const windowSize = useWindowSize();
-  const device = useMemo(() => {
-    if (windowSize.width < 640) {
-      return 'mobile';
-    } else if (windowSize.width < 728) {
-      return 'tablet';
-    }
-    return 'desktop';
-  }, [windowSize]);
-
-  return device;
-}
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
@@ -33,11 +33,11 @@ export function Header() {
   return (
     <HeaderWrapper>
       <style dangerouslySetInnerHTML={{__html: cssVars}} />
-      <div className="[--mobileHeaderXPadding:.75rem] md:container">
+      <div className="[--mobileHeaderXPadding:.75rem] lg:container">
         <div className="flex items-center justify-between">
           <Link prefetch="intent" to={homePath}>
             <Logo
-              className="h-auto w-[var(--logoWidth)] pl-[var(--mobileHeaderXPadding)] md:pl-0"
+              className="h-auto w-[var(--logoWidth)] pl-[var(--mobileHeaderXPadding)] lg:pl-0"
               sizes={logoWidth}
               style={
                 {

diff --git a/app/components/navigation/DesktopNavigation.tsx b/app/components/navigation/DesktopNavigation.tsx
@@ -28,7 +28,10 @@ export function DesktopNavigation(props: {data?: NavigationProps}) {
   );
 
   return (
-    <NavigationMenu className="hidden md:block" id="header-nav">
+    <NavigationMenu
+      className="hidden lg:block [@media(pointer:coarse)]:hidden"
+      id="header-nav"
+    >
       <CssVars
         dropdownWidth={dropdownWidth}
         viewportPosition={viewportPosition}

diff --git a/app/components/navigation/MobileNavigation.tsx b/app/components/navigation/MobileNavigation.tsx
@@ -1,5 +1,6 @@
 import {useCallback, useState} from 'react';
 
+import {useDevice} from '~/hooks/useDevice';
 import {cn} from '~/lib/utils';
 
 import type {NavigationProps} from './DesktopNavigation';
@@ -18,15 +19,20 @@ import {
 
 export function MobileNavigation(props: {data?: NavigationProps}) {
   const [open, setOpen] = useState(false);
+  const device = useDevice();
   const handleClose = useCallback(() => setOpen(false), []);
 
   if (!props.data) return null;
 
   // Todo => Add <Navlink /> support
   return (
-    <div className="md:hidden">
-      <Drawer onOpenChange={setOpen} open={open}>
-        <DrawerTrigger className="flex items-center justify-center p-2 pr-[var(--mobileHeaderXPadding)] md:pr-0">
+    <div className="lg:hidden [@media(pointer:coarse)]:block">
+      <Drawer
+        direction={device === 'desktop' ? 'right' : 'bottom'}
+        onOpenChange={setOpen}
+        open={open}
+      >
+        <DrawerTrigger className="flex items-center justify-center p-2 pr-[var(--mobileHeaderXPadding)] lg:pr-0">
           <IconMenu className="size-7" strokeWidth={1.5} />
         </DrawerTrigger>
         <MobileNavigationContent>
@@ -61,10 +67,12 @@ function MobileNavigationContent(props: {
 }) {
   return (
     <DrawerContent
-      className={cn(
-        'h-[var(--dialog-content-height)] max-h-screen w-screen bg-background p-0 text-foreground [--dialog-content-height:calc(100dvh_*_.75)]',
+      className={cn([
+        'h-[--dialog-content-height] max-h-screen w-screen bg-background p-0 text-foreground',
+        '[--dialog-content-height:calc(100dvh_*_.75)] [--dialog-content-max-width:calc(32rem)]',
+        'lg:left-auto lg:right-0 lg:max-w-[--dialog-content-max-width] lg:[--dialog-content-height:100dvh]',
         props.className,
-      )}
+      ])}
       onCloseAutoFocus={(e) => e.preventDefault()}
       onOpenAutoFocus={(e) => e.preventDefault()}
     >
@@ -83,7 +91,7 @@ function MobileNavigationNested(props: {
 }) {
   const {data, onClose} = props;
   const [open, setOpen] = useState(false);
-
+  const device = useDevice();
   const handleClose = useCallback(() => {
     onClose();
     setOpen(false);
@@ -94,14 +102,23 @@ function MobileNavigationNested(props: {
   const {childLinks} = data;
 
   return data.name && childLinks && childLinks.length > 0 ? (
-    <DrawerNestedRoot onOpenChange={setOpen} open={open}>
+    <DrawerNestedRoot
+      direction={device === 'desktop' ? 'right' : 'bottom'}
+      onOpenChange={setOpen}
+      open={open}
+    >
       <DrawerTrigger className="flex items-center gap-2">
         {data.name}
         <span>
           <IconChevron className="size-5" direction="right" />
         </span>
       </DrawerTrigger>
-      <MobileNavigationContent className="h-[calc(var(--dialog-content-height)*.95)]">
+      <MobileNavigationContent
+        className={cn([
+          'h-[calc(var(--dialog-content-height)*.95)]',
+          'lg:h-[--dialog-content-height] lg:max-w-[calc(var(--dialog-content-max-width)*.95)]',
+        ])}
+      >
         {childLinks &&
           childLinks.length > 0 &&
           childLinks.map((child) => (

diff --git a/app/components/navigation/NestedNavigation.tsx b/app/components/navigation/NestedNavigation.tsx
@@ -52,7 +52,7 @@ export function NestedNavigation(props: {
         )}
       </NavigationMenuTrigger>
       <NavigationMenuContent>
-        <ul className="m-0 grid w-full gap-1 p-2 md:w-[var(--dropdown-width)]">
+        <ul className="m-0 grid w-full gap-1 p-2 lg:w-[var(--dropdown-width)]">
           {childLinks.map((child) => (
             <li key={child._key}>
               <ListItem {...child} />

diff --git a/app/components/ui/Drawer.tsx b/app/components/ui/Drawer.tsx
@@ -70,15 +70,15 @@ const DrawerContent = forwardRef<
     <DrawerOverlay />
     <DrawerPrimitive.Content
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-3xl border bg-background md:rounded-none',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-3xl border bg-background lg:rounded-none',
         className,
       )}
       ref={ref}
       {...props}
     >
       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted md:hidden" />
       {children}
-      <DrawerClose className="absolute right-4 top-4 hidden rounded-sm ring-offset-background transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary md:block">
+      <DrawerClose className="absolute right-4 top-4 hidden rounded-sm ring-offset-background transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary lg:block">
         <IconClose className="size-6" strokeWidth={2} />
         <span className="sr-only">Close</span>
       </DrawerClose>

diff --git a/app/hooks/useDevice.tsx b/app/hooks/useDevice.tsx
@@ -0,0 +1,21 @@
+import {useMemo} from 'react';
+import {useMedia} from 'react-use';
+
+export function useDevice() {
+  const isMobile = useMedia('(max-width: 640px)', false);
+  const isTablet = useMedia(
+    '(min-width: 641px) and (max-width: 1024px)',
+    false,
+  );
+
+  const device = useMemo(() => {
+    if (isMobile) {
+      return 'mobile';
+    } else if (isTablet) {
+      return 'tablet';
+    }
+    return 'desktop';
+  }, [isMobile, isTablet]);
+
+  return device;
+}
diff --git a/app/hooks/useSanityClient.tsx b/app/hooks/useSanityClient.tsx
@@ -13,7 +13,7 @@ export function useSanityClient() {
         dataset: env?.SANITY_STUDIO_DATASET!,
         projectId: env?.SANITY_STUDIO_PROJECT_ID!,
         studioUrl: env?.SANITY_STUDIO_URL!,
-        useCdn: env?.NODE_ENV === 'production',
+        useCdn: !env?.NODE_ENV || env?.NODE_ENV === 'production',
         useStega: env?.SANITY_STUDIO_USE_STEGA!,
       }),
     [env],

diff --git a/server.ts b/server.ts
@@ -85,7 +85,7 @@ export default {
           dataset: envVars.SANITY_STUDIO_DATASET,
           projectId: envVars.SANITY_STUDIO_PROJECT_ID,
           studioUrl: envVars.SANITY_STUDIO_URL,
-          useCdn: envVars.NODE_ENV === 'production',
+          useCdn: !envVars.NODE_ENV || envVars.NODE_ENV === 'production',
           useStega: envVars.SANITY_STUDIO_USE_STEGA,
         },
         waitUntil,