From 0313b085fee911d415a4e173214fd13e8b0a1406 Mon Sep 17 00:00:00 2001
From: hkirat <harkirat96@gmail.com>
Date: Sun, 25 Feb 2024 07:51:40 +0100
Subject: [PATCH] Added changes from #106

---
 src/app/courses/[...courseId]/page.tsx |  4 +-
 src/app/globals.css                    |  7 +-
 src/app/layout.tsx                     |  2 +-
 src/components/CourseView.tsx          | 92 ++++++++++++--------------
 src/components/Sidebar.tsx             | 21 +++---
 5 files changed, 59 insertions(+), 67 deletions(-)

diff --git a/src/app/courses/[...courseId]/page.tsx b/src/app/courses/[...courseId]/page.tsx
index aeb91435a..261a833bc 100644
--- a/src/app/courses/[...courseId]/page.tsx
+++ b/src/app/courses/[...courseId]/page.tsx
@@ -77,7 +77,7 @@ export default async function Course({
   }
 
   return (
-    <div className="justify-between mx-auto text-white">
+    <>
       <CourseView
         rest={rest}
         course={course}
@@ -88,6 +88,6 @@ export default async function Course({
         searchParams={searchParams}
         possiblePath={possiblePath}
       />
-    </div>
+    </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index fcd9cceb6..85b616f41 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -66,13 +66,14 @@
   transform: translateX(-50%);
 }
 
+
 /* Hide scrollbar for Chrome, Safari and Opera */
-.hide-scrollbar::-webkit-scrollbar {
+.no-scrollbar::-webkit-scrollbar {
   display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
-.hide-scrollbar {
+.no-scrollbar {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
-}
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index daecca454..9cd309020 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -42,7 +42,7 @@ export default function RootLayout({
         <GoogleAnalytics />
         <Providers>
           <Appbar />
-          <div className="min-h-screen">{children}</div>
+          <div className="h-[calc(100vh-64px)]">{children}</div>
           <Footer />
           <Toaster />
         </Providers>
diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
index 4047c07ca..e152071b9 100644
--- a/src/components/CourseView.tsx
+++ b/src/components/CourseView.tsx
@@ -27,54 +27,50 @@ export const CourseView = ({
   possiblePath: string;
 }) => {
   return (
-    <div>
-      <div className="flex">
-        <Sidebar fullCourseContent={fullCourseContent} courseId={course.id} />
-        <div className="grow">
-          <div className="p-2">
-            {contentType === 'notion' ? (
-              <NotionRenderer id={courseContent[0]?.id} />
-            ) : null}
-            {contentType === 'video' ? (
-              <ContentRenderer
-                nextContent={nextContent}
-                content={{
-                  thumbnail: courseContent[0]?.thumbnail || '',
-                  id: courseContent[0]?.id || 0,
-                  title: courseContent[0]?.title || '',
-                  type: contentType || 'video',
-                  description: courseContent[0]?.description || '',
-                  markAsCompleted:
-                    courseContent[0]?.videoProgress?.markAsCompleted || false,
-                }}
-              />
-            ) : null}
-            {(contentType === 'video' || contentType === 'notion') && (
-              <Comments
-                content={{
-                  id: courseContent[0]?.id || 0,
-                  commentCount: courseContent[0]?.commentsCount || 0,
-                  possiblePath,
-                }}
-                searchParams={searchParams}
-              />
-            )}
-            {contentType === 'folder' ? (
-              <FolderView
-                rest={rest}
-                courseContent={courseContent?.map((x: any) => ({
-                  title: x?.title || '',
-                  image: x?.thumbnail || '',
-                  type: x?.type || 'folder',
-                  id: x?.id || 0,
-                  markAsCompleted: x?.videoProgress?.markAsCompleted || false,
-                  percentComplete: getFolderPercentCompleted(x?.children),
-                }))}
-                courseId={parseInt(course.id, 10)}
-              />
-            ) : null}
-          </div>
-        </div>
+    <div className="flex h-full">
+      <Sidebar fullCourseContent={fullCourseContent} courseId={course.id} />
+      <div className="grow p-2 overflow-y-auto no-scrollbar">
+        {contentType === 'notion' ? (
+          <NotionRenderer id={courseContent[0]?.id} />
+        ) : null}
+        {contentType === 'video' ? (
+          <ContentRenderer
+            nextContent={nextContent}
+            content={{
+              thumbnail: courseContent[0]?.thumbnail || '',
+              id: courseContent[0]?.id || 0,
+              title: courseContent[0]?.title || '',
+              type: contentType || 'video',
+              description: courseContent[0]?.description || '',
+              markAsCompleted:
+                courseContent[0]?.videoProgress?.markAsCompleted || false,
+            }}
+          />
+        ) : null}
+        {(contentType === 'video' || contentType === 'notion') && (
+          <Comments
+            content={{
+              id: courseContent[0]?.id || 0,
+              commentCount: courseContent[0]?.commentsCount || 0,
+              possiblePath,
+            }}
+            searchParams={searchParams}
+          />
+        )}
+        {contentType === 'folder' ? (
+          <FolderView
+            rest={rest}
+            courseContent={courseContent?.map((x: any) => ({
+              title: x?.title || '',
+              image: x?.thumbnail || '',
+              type: x?.type || 'folder',
+              id: x?.id || 0,
+              markAsCompleted: x?.videoProgress?.markAsCompleted || false,
+              percentComplete: getFolderPercentCompleted(x?.children),
+            }))}
+            courseId={parseInt(course.id, 10)}
+          />
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c8392f10b..d5981dbd5 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -115,24 +115,19 @@ export function Sidebar({
   }
 
   return (
-    <div
-      className="w-84 self-start sticky overflow-y-auto h-screen hide-scrollbar"
-      style={{ width: '300px' }}
-    >
-      <div className="overflow-scroll min-h-screen overflow-y-auto bg-gray-50 dark:bg-gray-800 cursor-pointer  w-full sticky top-[64px] self-start w-84">
-        <div className="flex">
-          {/* <ToggleButton
+    <div className="overflow-scroll h-full w-[300px] min-w-[133px] overflow-y-auto bg-gray-50 dark:bg-gray-800 cursor-pointer sticky top-[64px] self-start w-84">
+      <div className="flex">
+        {/* <ToggleButton
             onClick={() => {
               setSidebarOpen((s) => !s);
             }}
           /> */}
-          <GoBackButton />
-        </div>
-        <Accordion type="single" collapsible className="w-full">
-          {/* Render course content */}
-          {renderContent(fullCourseContent)}
-        </Accordion>
+        <GoBackButton />
       </div>
+      <Accordion type="single" collapsible className="w-full">
+        {/* Render course content */}
+        {renderContent(fullCourseContent)}
+      </Accordion>
     </div>
   );
 }