[v3] improve styles for reduced motion preferences

.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

@@ -38,4 +38,11 @@
       }
     }
   }
+
+  & g,
+  & path,
+  &.open g,
+  &.open path {
+    @apply motion-reduce:_transition-none;
+  }
 }

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

@@ -16,7 +16,7 @@ import {
 } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { useActiveAnchor, useMenu, useThemeConfig } from '../contexts'
-import { renderComponent } from '../utils'
+import { renderComponent, useIsWindowResizing } from '../utils'
 import { Anchor } from './anchor'
 import { Collapse } from './collapse'
 import { LocaleSwitch } from './locale-switch'
@@ -381,6 +381,7 @@ export function Sidebar({
   const hasI18n = themeConfig.i18n.length > 0
   const hasMenu =
     themeConfig.darkMode || hasI18n || themeConfig.sidebar.toggleButton
+  const isWindowResizing = useIsWindowResizing()
 
   return (
     <>
@@ -391,22 +392,23 @@ export function Sidebar({
         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'
+            ? 'max-md:_fixed max-md:_inset-0 max-md:_z-10 max-md:_bg-black/80 max-md: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',
           '_transform-gpu _transition-all _ease-in-out',
           'print:_hidden',
           showSidebar ? 'md:_w-64' : 'md:_w-20',
           asPopover ? 'md:_hidden' : 'md:_sticky md:_self-start',
           menu
             ? 'max-md:[transform:translate3d(0,0,0)]'
-            : 'max-md:[transform:translate3d(0,-100%,0)]'
+            : 'max-md:[transform:translate3d(0,-100%,0)]',
+          isWindowResizing && 'max-md:_transition-none _transition-none'
         )}
         ref={containerRef}
       >

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'

packages/nextra-theme-docs/src/utils/index.ts

@@ -1,3 +1,4 @@
 export { getGitIssueUrl } from './get-git-issue-url'
 export { renderComponent, renderString } from './render'
 export { useGitEditUrl } from './use-git-edit-url'
+export { useIsWindowResizing } from './use-is-window-resizing'

packages/nextra-theme-docs/src/utils/use-is-window-resizing.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useIsWindowResizing() {
+  const [isWindowResizing, setIsWindowResizing] = useState(false)
+  const innerState = useRef(false)
+
+  useEffect(() => {
+    let resizeTimer: ReturnType<typeof setTimeout>
+    const handleResize = () => {
+      if (innerState.current === false) {
+        innerState.current = true
+        setIsWindowResizing(true)
+      }
+
+      clearTimeout(resizeTimer)
+      resizeTimer = setTimeout(() => {
+        innerState.current = false
+        setIsWindowResizing(false)
+      }, 200)
+    }
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      clearTimeout(resizeTimer)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return isWindowResizing
+}