From 54ec3df1d70819018a99b1851a4cbc49899e1b27 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@protonmail.com>
Date: Wed, 2 Apr 2025 17:14:39 -0500
Subject: [PATCH] Course page now has sidebar for lessons selection, basic tab
 menu on mobile to go to lessons tab or content tab

---
 .../content/courses/CourseSidebar.js          | 110 ++++++++++++++++++
 src/pages/course/[slug]/index.js              |   3 +-
 2 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 src/components/content/courses/CourseSidebar.js

diff --git a/src/components/content/courses/CourseSidebar.js b/src/components/content/courses/CourseSidebar.js
new file mode 100644
index 0000000..95cee03
--- /dev/null
+++ b/src/components/content/courses/CourseSidebar.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import { Tag } from 'primereact/tag';
+import { Button } from 'primereact/button';
+import Image from 'next/image';
+import { useImageProxy } from '@/hooks/useImageProxy';
+
+const CourseSidebar = ({ 
+    lessons, 
+    activeIndex, 
+    onLessonSelect, 
+    completedLessons, 
+    isMobileView, 
+    onClose,
+    sidebarVisible
+}) => {
+    const { returnImageProxy } = useImageProxy();
+
+    const LessonItem = ({ lesson, index }) => (
+        <li 
+            className={`
+                rounded-lg overflow-hidden transition-all duration-200
+                ${activeIndex === index 
+                    ? 'bg-blue-900/40 border-l-4 border-blue-500' 
+                    : 'hover:bg-gray-700/50 active:bg-gray-700/80 border-l-4 border-transparent'}
+                ${isMobileView ? 'mb-3' : 'mb-2'}
+            `}
+            onClick={() => onLessonSelect(index)}
+        >
+            <div className={`flex items-start p-3 cursor-pointer ${isMobileView ? 'p-4' : 'p-3'}`}>
+                {lesson.image && (
+                    <div className={`relative rounded-md overflow-hidden flex-shrink-0 mr-3 ${isMobileView ? 'w-16 h-16' : 'w-12 h-12'}`}>
+                        <Image
+                            src={returnImageProxy(lesson.image)}
+                            alt={`Lesson ${index + 1} thumbnail`}
+                            fill
+                            className="object-cover"
+                        />
+                    </div>
+                )}
+                <div className="flex-1 min-w-0">
+                    <div className="flex justify-between items-start w-full">
+                        <span className={`font-medium block mb-1 text-gray-300 ${isMobileView ? 'text-base' : 'text-sm'}`}>
+                            Lesson {index + 1}
+                        </span>
+                        {completedLessons.includes(lesson.id) && (
+                            <Tag severity="success" value="Completed" className="ml-1 py-1 text-xs" />
+                        )}
+                    </div>
+                    <h3 className={`font-medium leading-tight line-clamp-2 text-[#f8f8ff] ${isMobileView ? 'text-base' : ''}`}>
+                        {lesson.title}
+                    </h3>
+                </div>
+            </div>
+        </li>
+    );
+
+    // For desktop sidebar
+    const DesktopSidebarContent = () => (
+        <div className="h-full overflow-y-auto">
+            <div className="flex flex-col p-4 h-full bg-gray-800 text-[#f8f8ff]">
+                <div className="flex items-center justify-between border-b border-gray-700 pb-4 mb-4">
+                    <h2 className="font-bold text-white text-lg">Course Lessons</h2>
+                </div>
+                <div className="overflow-y-auto flex-1 pb-16">
+                    <ul className="space-y-2">
+                        {lessons.map((lesson, index) => (
+                            <LessonItem key={index} lesson={lesson} index={index} />
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+
+    // For mobile sidebar
+    const MobileSidebarContent = () => (
+        <div className="bg-gray-800 text-[#f8f8ff] p-4">
+            <div className="border-b border-gray-700 pb-4 mb-4">
+                <h2 className="font-bold text-white text-xl">Course Lessons</h2>
+            </div>
+            <ul className="space-y-0">
+                {lessons.map((lesson, index) => (
+                    <LessonItem key={index} lesson={lesson} index={index} />
+                ))}
+            </ul>
+        </div>
+    );
+
+    // Desktop sidebar
+    if (!isMobileView) {
+        return (
+            <div className="w-80 h-[calc(100vh-400px)] sticky top-8 overflow-hidden rounded-lg border border-gray-800 shadow-sm bg-gray-900">
+                <DesktopSidebarContent />
+            </div>
+        );
+    }
+
+    // Mobile sidebar - now integrated with tab system
+    if (isMobileView && sidebarVisible) {
+        return (
+            <div className="w-full bg-gray-900 rounded-lg border border-gray-800 shadow-sm overflow-visible mb-4">
+                <MobileSidebarContent />
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export default CourseSidebar; 
\ No newline at end of file
diff --git a/src/pages/course/[slug]/index.js b/src/pages/course/[slug]/index.js
index a99ef5e..c667716 100644
--- a/src/pages/course/[slug]/index.js
+++ b/src/pages/course/[slug]/index.js
@@ -7,8 +7,7 @@ import DocumentLesson from '@/components/content/courses/DocumentLesson';
 import CombinedLesson from '@/components/content/courses/CombinedLesson';
 import { useNDKContext } from '@/context/NDKContext';
 import { useSession } from 'next-auth/react';
-import axios from 'axios';
-import { nip04, nip19 } from 'nostr-tools';
+import { nip19 } from 'nostr-tools';
 import { useToast } from '@/hooks/useToast';
 import { ProgressSpinner } from 'primereact/progressspinner';
 import { Accordion, AccordionTab } from 'primereact/accordion';