Made the breadcrumb sticky (#1473)

code100x · Oct 20, 2024 · 5802927 · 5802927
1 parent a055e68
commit 5802927
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
@@ -38,8 +38,8 @@ export const CourseView = ({
     ? 'folder'
     : courseContent?.value.type;
   return (
-    <div className="flex w-full flex-col gap-8 pb-16 pt-8 xl:pt-[9px]">
-      <div className="flex flex-col gap-4 xl:pt-2">
+    <div className="flex w-full flex-col gap-8 pb-16 pt-8 xl:pt-[9px] relative">
+      <div className="flex flex-col gap-4 xl:pt-2 sticky z-10 top-[120px] py-2 bg-background">
         <BreadCrumbComponent
           course={course}
           contentType={contentType}

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -186,7 +186,7 @@ export function Sidebar({
   );
 
   return (
-    <>
+    <div className='sticky top-[72px] z-20 bg-background py-2'>
       <Button
         ref={buttonRef}
         onClick={() => setSidebarOpen((s) => !s)}
@@ -223,7 +223,7 @@ export function Sidebar({
           </motion.div>
         )}
       </AnimatePresence>
-    </>
+    </div>
   );
 }