From 1688b2ac7d2f371d38db9f8e8142934c0331474e Mon Sep 17 00:00:00 2001 From: noobpiyush Date: Tue, 26 Nov 2024 13:32:21 +0530 Subject: [PATCH 1/3] fix: preserve scroll position on navbar back button Updates navbar back navigation to maintain scroll position when returning to previous page. Prevents unwanted scroll reset and improves UX. Add scroll position tracking Modify back button handler Implement position restoration --- src/components/Navbar.tsx | 37 +++++++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 052a855c5..66bb23dd7 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -3,7 +3,7 @@ import { motion, AnimatePresence } from 'framer-motion'; import { useSession } from 'next-auth/react'; import { usePathname, useRouter } from 'next/navigation'; -import React, { useState, useCallback, useMemo } from 'react'; +import React, { useState, useCallback, useMemo, useEffect } from 'react'; import Link from 'next/link'; import { ArrowLeft, Menu, Search, X } from 'lucide-react'; import { Button } from './ui/button'; @@ -12,6 +12,9 @@ import ThemeToggler from './ThemeToggler'; import ProfileDropdown from './profile-menu/ProfileDropdown'; import { SearchBar } from './search/SearchBar'; +//global map to store scroll positions +const scrollPositions = new Map(); + export const Navbar = () => { const { data: session } = useSession(); const router = useRouter(); @@ -39,6 +42,32 @@ export const Navbar = () => { }), [], ); + // Save scroll position when leaving a page + useEffect(() => { + const handleScroll = () => { + scrollPositions.set(pathname, window.scrollY); + }; + + window.addEventListener('scroll', handleScroll); + + return () => window.removeEventListener('scroll', handleScroll); + }, [pathname]); + + // Custom back navigation with scroll position restoration + + const handleBack = useCallback(() => { + scrollPositions.set(pathname, window.scrollY); + + // Use window.history to go back + window.history.back(); + + // Restore scroll position after a short delay to ensure the page has loaded + setTimeout(() => { + const previousPath = window.location.pathname; + const savedPosition = scrollPositions.get(previousPath) || 0; + window.scrollTo(0, savedPosition); + }, 100); + }, [pathname]); return ( <> @@ -63,7 +92,7 @@ export const Navbar = () => { > {session?.user && pathname !== '/home' && ( {course.certIssued ? ( @@ -83,11 +102,11 @@ export const CourseCard = ({ ) : ( - + Join Discord )} diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx index 2924e5d20..b4d0b4130 100644 --- a/src/components/CourseView.tsx +++ b/src/components/CourseView.tsx @@ -21,15 +21,15 @@ export const CourseView = ({ rest: string[]; course: any; courseContent: - | { - folder: true; - value: ChildCourseContent[]; - } - | { - folder: false; - value: ChildCourseContent; - } - | null; + | { + folder: true; + value: ChildCourseContent[]; + } + | { + folder: false; + value: ChildCourseContent; + } + | null; nextContent: any; searchParams: QueryParams; possiblePath: string; @@ -38,8 +38,8 @@ export const CourseView = ({ ? 'folder' : courseContent?.value.type; return ( -
-
+
+
{ - const [isOffline, setIsOffline] = useState(false); - const [mounted, setMounted] = useState(false); - - useEffect(() => { - setMounted(true); - setIsOffline(!window.navigator.onLine); - - const handleOnline = () => setIsOffline(false); - const handleOffline = () => setIsOffline(true); - - window.addEventListener('online', handleOnline); - window.addEventListener('offline', handleOffline); - - return () => { - window.removeEventListener('online', handleOnline); - window.removeEventListener('offline', handleOffline); - }; - }, []); - - if (!mounted) return null; - - if (!isOffline) return null; - - return ( -
-
- Offline -

- You are offline -

-

- Please check your internet connection -

-
-
- ); + const [isOffline, setIsOffline] = useState(false); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + setIsOffline(!window.navigator.onLine); + + const handleOnline = () => setIsOffline(false); + const handleOffline = () => setIsOffline(true); + + window.addEventListener('online', handleOnline); + window.addEventListener('offline', handleOffline); + + return () => { + window.removeEventListener('online', handleOnline); + window.removeEventListener('offline', handleOffline); + }; + }, []); + + if (!mounted) return null; + + if (!isOffline) return null; + + return ( +
+
+ Offline +

+ You are offline +

+

+ Please check your internet connection +

+
+
+ ); }; -export default OfflineNotification; \ No newline at end of file +export default OfflineNotification; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 302eae46e..d5aeb546e 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -206,9 +206,9 @@ export function Sidebar({ variants={sidebarVariants} className="fixed right-0 top-0 z-[99999] flex h-screen w-full flex-col gap-4 overflow-y-auto rounded-r-lg border-l border-primary/10 bg-neutral-50 dark:bg-neutral-900 md:max-w-[30vw]" > -
- {''} -

+
+ {''} +

Course Content