diff --git a/src/app/globals.css b/src/app/globals.css index 9ea565b..83b7026 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -298,3 +298,14 @@ margin: 0 0 0.5rem; } .comment-md pre code { background: none; padding: 0; } + +/* DS-2 §8: with prefers-reduced-motion there is no motion at all. + Vaul animates the sheet via injected CSS and inline transitions while + dragging — !important overrides both, the sheet just appears/disappears. */ +@media (prefers-reduced-motion: reduce) { + [data-vaul-drawer], + [data-vaul-overlay] { + animation: none !important; + transition: none !important; + } +} diff --git a/src/components/student/course-sidebar.tsx b/src/components/student/course-sidebar.tsx index 6776528..4dcfad9 100644 --- a/src/components/student/course-sidebar.tsx +++ b/src/components/student/course-sidebar.tsx @@ -4,7 +4,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { useState } from "react"; import { Menu, X } from "lucide-react"; -import NumberFlow, { NumberFlowGroup } from "@number-flow/react"; +import NumberFlow from "@number-flow/react"; import { AubadeDrawer, ResponsiveDialogTitle } from "@/components/shared/responsive-dialog"; import { useIsMobile } from "@/hooks/use-media-query"; @@ -30,11 +30,14 @@ function CourseNavBody({ completedLessonIds, pathname, onNavigate, + animateProgress, }: { course: Course; completedLessonIds: Set; pathname: string; onNavigate: () => void; + /** DS-2: one animated moment per page — only the visible copy animates. */ + animateProgress: boolean; }) { const totalLessons = course.modules.reduce((s, m) => s + m.lessons.length, 0); const completedCount = course.modules @@ -66,14 +69,18 @@ function CourseNavBody({ {totalLessons > 0 && (
- - - из {totalLessons} уроков - - - - - + + {completedCount} из {totalLessons} уроков + + + {/* The page's single animated moment (DS-2 §8); static under reduced motion. */} + +
setOpen(false)} + animateProgress={!isMobile} /> @@ -218,6 +226,7 @@ export function CourseSidebar({ completedLessonIds={completedLessonIds} pathname={pathname} onNavigate={() => setSheetOpen(false)} + animateProgress /> )}