Merge pull request #475 from vijaysingh2219/main

Implementing Next.js Link Component in Sidebar

src/components/Sidebar.tsx

@@ -14,6 +14,7 @@ import { sidebarOpen as sidebarOpenAtom } from '@/store/atoms/sidebar';
 import { useEffect, useState } from 'react';
 import { handleMarkAsCompleted } from '@/lib/utils';
 import BookmarkButton from './bookmark/BookmarkButton';
+import Link from 'next/link';
 
 export function Sidebar({
   courseId,
@@ -22,7 +23,6 @@ export function Sidebar({
   fullCourseContent: Folder[];
   courseId: string;
 }) {
-  const router = useRouter();
   const pathName = usePathname();
 
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
@@ -86,8 +86,9 @@ export function Sidebar({
     const pathArray = findPathToContent(fullCourseContent, contentId);
     if (pathArray) {
       const path = `/courses/${courseId}/${pathArray.join('/')}`;
-      router.push(path);
+      return path;
     }
+    return null;
   };
 
   const renderContent = (contents: any) => {
@@ -119,16 +120,14 @@ export function Sidebar({
       }
       // This is a video or a content item without children
       return (
-        <div
+        <Link
           key={content.id}
+          href={navigateToContent(content.id) || '#'}
           className={`p-2 flex border-b hover:bg-gray-200 cursor-pointer ${
             isActiveContent
               ? 'dark:bg-gray-700 bg-gray-300 dark:text-white text-black dark:hover:bg-gray-500'
               : 'bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white text-black'
           }`}
-          onClick={() => {
-            navigateToContent(content.id);
-          }}
         >
           <div className="flex justify-between w-full">
             <div className="flex">
@@ -150,7 +149,7 @@ export function Sidebar({
               </div>
             ) : null}
           </div>
-        </div>
+        </Link>
       );
     });
   };