[v3] improve styles for reduced motion preferences (#3196)

* [v3] improve styles for reduced motion preferences

* fix clear timeout missing

* add a passive option to resize listener

* Update packages/nextra-theme-docs/src/components/sidebar.tsx

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

* polish

---------

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

.changeset/purple-eggs-march.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+Improve styles for reduced motion preferences

packages/nextra-theme-docs/css/hamburger.css

@@ -1,38 +1,44 @@
 .nextra-hamburger svg {
+  g,
+  path {
+    @apply motion-reduce:!_transition-none;
+  }
+  --transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+
   g {
     @apply _origin-center;
-    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+    transition: var(--transition);
   }
   path {
     opacity: 1;
     transition:
-      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      var(--transition) 0.2s,
       opacity 0.2s ease 0.2s;
   }
 
   &.open {
     path {
       transition:
-        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+        var(--transition),
         opacity 0s ease 0.2s;
     }
     g {
-      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+      transition: var(--transition) 0.2s;
     }
   }
 
   &.open > {
     path {
-      @apply _opacity-0;
+      opacity: 0;
     }
     g:nth-of-type(1) {
-      @apply _rotate-45;
+      transform: rotate(45deg);
       path {
         transform: translate3d(0, 6px, 0);
       }
     }
     g:nth-of-type(2) {
-      @apply _-rotate-45;
+      transform: rotate(-45deg);
       path {
         transform: translate3d(0, -6px, 0);
       }

packages/nextra-theme-docs/css/styles.css

@@ -86,15 +86,6 @@ summary {
   }
 }
 
-@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
-  article:before,
-  .nextra-sidebar-container,
-  .nextra-sidebar-container.open,
-  body.resizing .nextra-sidebar-container {
-    @apply _transition-none;
-  }
-}
-
 /* Content Typography */
 summary::-webkit-details-marker {
   @apply _hidden;

packages/nextra-theme-docs/package.json

@@ -64,7 +64,5 @@
     "tailwindcss": "^3.4.1",
     "vitest": "^2.0.3"
   },
-  "sideEffects": [
-    "./src/polyfill.ts"
-  ]
+  "sideEffects": false
 }

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -389,17 +389,16 @@ export function Sidebar({
       )}
       <div
         className={cn(
-          'motion-reduce:_transition-none [transition:background-color_1.5s_ease]',
-          menu
-            ? '_fixed _inset-0 _z-10 _bg-black/80 dark:_bg-black/60'
-            : '_bg-transparent'
+          '[transition:background-color_1.5s_ease] max-md:_fixed _inset-0 _z-10',
+          menu ? '_bg-black/80 dark:_bg-black/60' : '_bg-transparent'
         )}
         onClick={() => setMenu(false)}
       />
       <aside
         className={cn(
           'nextra-sidebar-container _flex _flex-col',
-          'md:_top-16 md:_shrink-0 motion-reduce:_transform-none',
+          'md:_top-16 md:_shrink-0 motion-reduce:_transform-none motion-reduce:_transition-none',
+          '[.resizing_&]:_transition-none',
           '_transform-gpu _transition-all _ease-in-out',
           'print:_hidden',
           showSidebar ? 'md:_w-64' : 'md:_w-20',

packages/nextra-theme-docs/src/contexts/config.tsx

@@ -69,6 +69,23 @@ export function ConfigProvider({
     document.body.classList.toggle('_overflow-hidden', menu)
   }, [menu])
 
+  useEffect(() => {
+    let resizeTimer: number
+
+    function addResizingClass() {
+      document.body.classList.add('resizing')
+      clearTimeout(resizeTimer)
+      resizeTimer = window.setTimeout(() => {
+        document.body.classList.remove('resizing')
+      }, 200)
+    }
+
+    window.addEventListener('resize', addResizingClass)
+    return () => {
+      window.removeEventListener('resize', addResizingClass)
+    }
+  }, [])
+
   const value = useMemo(() => ({ menu, setMenu }), [menu])
 
   return (

packages/nextra-theme-docs/src/index.tsx

@@ -1,4 +1,3 @@
-import './polyfill'
 import { ThemeProvider } from 'next-themes'
 import type { NextraThemeLayoutProps } from 'nextra'
 import { useRouter } from 'nextra/hooks'