Dashboard, Sidebar fixed and getMoreCoursesData added in actions from data/dashboard

src/actions/getMoreCourses.js

@@ -0,0 +1,35 @@
+"use server"
+
+import { ALLOWED_DOMAINS } from "@/constants";
+import { authOptions } from "@/server/auth/options";
+import { db } from "@/server/db";
+import { getServerSession } from "next-auth";
+
+export const getMoreCoursesData = async () => {
+    try {
+      const session = await getServerSession(authOptions);
+      if (!session) return {};
+
+      const domains = Object.values(ALLOWED_DOMAINS);
+      const data = await Promise.all(
+        domains.map(async (domain) => {
+          const data = await db.savedLearningPath.count({
+            where: {
+              learningPath: {
+                domain,
+              },
+            },
+          });
+          return {
+            domain,
+            stars: data,
+          };
+        })
+      );
+      return data;
+    } catch (error) {
+      console.log(error);
+      return {};
+    }
+  };
+

src/app/(dashboard)/dashboard/completed-courses/page.jsx

@@ -9,7 +9,7 @@ export default async function dashboard() {
   return (
     <div className="flex w-screen">
       <Sidebar/>
-      <div className="md:absolute xl:w-[80%] lg:w-[70%]  md:w-[96%] lg:left-[20%] 2xl:left-[14%] mt-20 sm:mt-12">
+      <div className="md:absolute xl:w-[80%] lg:w-[70%]  md:w-[96%] lg:left-[20%] 2xl:left-[14%] mt-20 sm:mt-12 ">
       <CompletedCourses data={data}></CompletedCourses>
       </div>
     </div>

src/components/dashboard/CompletedCourses.jsx

@@ -63,7 +63,7 @@ export default function CompletedCourses({data}) {
 
           </div>
 
-        <div className="HEADING DIV md:mt-12 mt-6 overflow-hidden relative flex w-full lg:ml-80 md:ml-60">
+        <div className="HEADING DIV md:mt-12 mt-6 overflow-hidden relative flex w-full lg:ml-80 md:ml-12 sm:ml-16 ml-10">
           <Title text="MORE COURSES FOR YOU" />
         </div>
 

src/components/dashboard/Dashboard.jsx

@@ -26,7 +26,7 @@ export default function dashboard({ data }) {
                   {/* Dashboard lower part */}
                   {/* <div className=" box-border m-auto sm:auto-cols-max mt-12 gap-60 sm:grid sm:grid-cols-3 lg:px-auto md:px-auto flex sm:overflow-visible overflow-scroll whitespace-nowrap no-scrollbar py-4  "> */}
                   <div
-                      className="z-1 flex flex-wrap sm:auto-cols-max md:flex-nowrap items-center justify-start gap-[30px] xl:gap-[20px] mt-16 sm:overflow-hidden overflow-scroll md:ml-10 sm:ml-[45px] ml-[40px] whitespace-nowrap no-scrollbar py-4  "
+                      className="z-1 flex flex-wrap sm:auto-cols-max md:flex-nowrap items-center justify-start lg:gap-[25px] sm:gap-[17px]  xl:gap-[20px] mt-16 sm:overflow-hidden overflow-scroll md:ml-10 sm:ml-[45px] ml-[40px] whitespace-nowrap no-scrollbar py-4  "
                       style={{flexWrap: "wrap"}}>
                         <MoreCourses/>
                       {/* eclipse image */}

src/components/dashboard/Dashcard.jsx

@@ -6,7 +6,7 @@ export default function DashCoursesCard({title, members, href}) {
         <>
             <Link
                 href={href}
-                className="hover:shadow-[0_0_16px_3px_#4a0f87] hover:scale-105 hover:backdrop-blur-[10px] transition-all backdrop-blur-sm border-[1.5px] border-purple-500 rounded-xl cursor-pointer min-h-max  sm:h-[130px] md:h-[130px] lg:h-[130px] h-[110px] relative flex flex-col justify-center group object-cover overflow-hidden xl:basis-[29%] lg:basis-[27%] md:basis-[25%] sm:basis-[40%] basis-[75%] mx-3 my-3  px-3 sm:py-5 py-3">
+                className="hover:shadow-[0_0_16px_3px_#4a0f87] hover:scale-105 hover:backdrop-blur-[10px] transition-all backdrop-blur-sm border-[1.5px] border-purple-500 rounded-xl cursor-pointer min-h-max  sm:h-[130px] md:h-[130px] lg:h-[130px] h-[110px] relative flex flex-col justify-center group object-cover overflow-hidden xl:basis-[29%] lg:basis-[27%] md:basis-[27%] sm:basis-[40%] basis-[70%] mx-3 my-3  px-3 sm:py-5 py-3 z-50">
                 <div className="relative flex flex-col justify-center items-center">
                     {/* title div */}
                     <h2 className="sm:text-[16px] text-[20px] lg:text-[20px] font-sans font-bold bg-gradient-to-r from-white to-purple-500 inline-block text-transparent bg-clip-text px-3">{title}</h2>

src/components/dashboard/MoreCourses.jsx

@@ -1,7 +1,19 @@
+"use client"
 import { MORE_COURSES } from "@/constants";
 import DashCoursesCard from "./Dashcard";
+import { useEffect, useState } from "react";
+// import { getMoreCoursesData } from "@/actions/getMoreCourses";
 
 export default function MoreCourses() {
+  // const [data,setData] = useState(null);
+  // useEffect(()=> {
+  //    getMoreCoursesData().then(res => {
+  //     setData(res);
+  //   }).then(() => console.log(data))
+
+
+  // },[])
+
   return (
     <>
       {MORE_COURSES.map(({ id, course, members, href }) => {

src/components/dashboard/SortBox.jsx

@@ -1,6 +1,9 @@
-export default function SortBox({CourseName}) {
+import Link from "next/link";
+
+export default function SortBox({CourseName,href}) {
   return (
-    <div className="text-white text-center font-light font-mono mx-2 z-30 text-xs border-[1px] px-2 py-1 rounded-3xl border-[#9d5ae3] basis-[65%] ">
-      {CourseName}</div>
+    <Link href={href} className="text-white text-center font-extralight font-mono mx-2 z-30 text-xs border-[1px] px-1 py-1 rounded-3xl border-[#9d5ae3] basis-[40%] ">
+      {CourseName}
+      </Link>
   )
 }

src/components/dashboard/SortCourses.jsx

@@ -1,21 +1,41 @@
-"use client"
+"use client";
 
-import SortBox from "./SortBox"
+import { useState } from "react";
+import SortBox from "./SortBox";
 import { MORE_COURSES } from "@/constants";
 
-
 export default function SortCourses() {
+  const [seeAll, setSeeAll] = useState(false);
+  const onClick = () => {
+    setSeeAll(!seeAll);
+  };
   return (
-    <div className="sm:hidden flex items-center  whitespace-nowrap max-w-screen-sm mx-auto ml-[40px] mt-16 z-30">
-            <h3 className="text-white font-medium mr-3 ">Sort By: </h3>
-
-            <div className="SORT DOMAINS DIV flex flex-wrap justify-start whitespace-nowrap gap-4">
-              {MORE_COURSES.map(({id, course}) => {
-                return (
-                    <SortBox key={id} CourseName={course.trimEnd()}></SortBox>
-                )
-              })}
-            </div>
-          </div>
-  )
-}
+    <div
+      className={`sm:hidden flex flex-col items-center  whitespace-nowrap max-w-screen-sm mx-auto mt-16 z-30 overflow-hidden
+    ${seeAll ? "h-auto" : "h-[120px]"}
+    `}
+    >
+      <div className="flex justify-between w-[92%]">
+        <h3 className="text-white  font-medium mr-3 mb-4 ">Sort By: </h3>
+        <h3
+          onClick={onClick}
+          className={`text-color-3 text-sm font-light mr-3 mb-4 `}
+        >
+          See {`${seeAll ? "less" : "more"}`}
+        </h3>
+      </div>
+      <div className="SORT DOMAINS  DIV flex flex-wrap justify-center whitespace-nowrap gap-4">
+        {MORE_COURSES.map(({ id, course, href }) => {
+          return (
+            <SortBox
+              key={id}
+              CourseName={course.trimEnd()}
+              href={href}
+            ></SortBox>
+          );
+        })}
+      </div>
+
+    </div>
+  );
+}

src/components/sidebar/Sidebar.jsx

@@ -11,7 +11,6 @@ import { PiPath } from "react-icons/pi";
 import { IoMdClose } from "react-icons/io";
 import { IoMenuOutline } from "react-icons/io5";
 import { IoHomeOutline } from "react-icons/io5";
-
 import Image from "next/image";
 import vector from "../../../public/assets/icons/Vector.svg";
 import { useState } from "react";
@@ -31,13 +30,13 @@ const Sidebar = () => {
           <IoMenuOutline onClick={onClick} className={`left-0 z-50`} size={50} />
         </div>
       <div
-        className={`fixed top-0 left-0 overflow-hidden w-4/5 md:w-[38%] lg:w-[20%] xl:w-1/5 2xl:w-1/5 h-full z-[99] bg-[#161a33] sm:px-2 px-10 text-transparent border-r-2 border-color-3 min-h-max border transform duration-300 translate-x-0 lg:visible ${
+        className={`fixed top-0 left-0 overflow-hidden w-4/5 md:w-[38%] lg:w-[20%] xl:w-1/5 2xl:w-1/5 h-full z-[99] bg-[#161a33] sm:px-1 px-7 text-transparent border-r-2 border-color-3 min-h-max border transform duration-300 translate-x-0 lg:visible ${
             // open ? "translate-x-0" : "-translate-x-full"
             open ? "visible" : "invisible"
           }`}
       >
 
-        <div className="sm:mt-6  mt-7">
+        <div className="sm:mt-5  mt-7">
           {/* NAME  */}
           <div
             className={`${
@@ -55,25 +54,40 @@ const Sidebar = () => {
           <div className="absolute top-0 right-0 z-30 text-slate-600 m-4">
             <IoMdClose onClick={onClick} className="h-[40px] w-[40px] z-50 lg:hidden" />
           </div>
+
           <Link
             href="/"
             onClick={onClick}
-            className={`flex items-center text-nowrap font-bold gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-4 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[15px] text-[15px]  rounded-xl my-6
+            className={`flex items-center text-nowrap font-bold gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 text-center md:mx-2 sm:mx-2 mx-4  hover:bg-white hover:text-color-2 sm:text-[14px] 2xl:text-2xl lg:text-[24px] text-[15px]  rounded-xl sm:my-4 my-6
                 ${
                   usePathname() === "/"
                     ? "border-2  border-color-2 text-color-2"
                     : "text-white"
                 } 
             `}
           >
-            <IoHomeOutline />
             AlgoArena
           </Link>
 
+          <Link
+            href="/"
+            onClick={onClick}
+            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-2 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-4
+                ${
+                  usePathname() === "/"
+                    ? "border-2  border-color-2 text-color-2"
+                    : "text-white "
+                } 
+            `}
+          >
+            < IoHomeOutline/>
+            Home
+          </Link>
+
           <Link
             href="/dashboard"
             onClick={onClick}
-            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-4 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-6
+            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-2 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-4
                 ${
                   usePathname() === "/dashboard"
                     ? "border-2  border-color-2 text-color-2"
@@ -88,7 +102,7 @@ const Sidebar = () => {
           <Link
             href="/create-post"
             onClick={onClick}
-            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-4 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-6
+            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-2 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-4
                 ${
                   usePathname() === "/create-post"
                     ? "border-2  border-color-2 text-color-2"
@@ -97,13 +111,13 @@ const Sidebar = () => {
             `}
           >
             <BsFileEarmarkPostFill />
-            Posts
+            Create Post
           </Link>
 
           <Link
             href="/dashboard/completed-courses"
             onClick={onClick}
-            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-4 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px]  rounded-xl my-6
+            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-2 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px]  rounded-xl my-4
                 ${
                   usePathname() === "/dashboard/completed-courses"
                     ? "border-2  border-color-2 text-color-2"
@@ -118,7 +132,7 @@ const Sidebar = () => {
           <Link
             href="/dashboard/saved-courses"
             onClick={onClick}
-            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-4 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-6
+            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-2 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-4
                 ${
                   usePathname() === "/dashboard/saved-courses"
                     ? "border-2  border-color-2 text-color-2"
@@ -133,7 +147,7 @@ const Sidebar = () => {
           <Link
             href="/community"
             onClick={onClick}
-            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-4 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-6
+            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:px-4 py-2 md:mx-2 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-4
                 ${
                   usePathname() === "/community"
                     ? "border-2  border-color-2 text-color-2"
@@ -142,13 +156,13 @@ const Sidebar = () => {
             `}
           >
             <LuLayoutDashboard />
-            Your Posts
+            Posts
           </Link>
 
           <Link
             href="/dashboard/create-path"
             onClick={onClick}
-            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:pl-4 md:pr-2 py-2 md:mx-4 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-6
+            className={`flex items-center text-nowrap font-medium gap-2 sm:-px-4 px-4 sm:px-[9px] md:pl-4 md:pr-2 py-2 md:mx-2 sm:mx-2 mx-4  hover:bg-color-2 hover:text-white sm:text-[14px] 2xl:text-xl lg:text-[14px] text-[15px] rounded-xl my-4
                 ${
                   usePathname() === "/dashboard/create-path"
                     ? "border-2  border-color-2 text-color-2"
@@ -157,14 +171,14 @@ const Sidebar = () => {
             `}
           >
             <PiPath />
-            Create Your Own Path
+            Create Your Path
           </Link>
 
           {/* sign out  */}
 
           <Link
             href="/sign-out"
-            className={`rounded-xl bg-color-3 text-white hover:bg-color-2 px-4 py-3 my-6 md:mx-6 sm:mx-4 mx-6`}
+            className={`rounded-xl bg-color-3 text-white hover:bg-color-2 px-4 py-2 my-6 md:mx-6 sm:mx-4 mx-6`}
           >
             Sign Out
           </Link>

src/components/startedCourses/DashboardStaredCourses.jsx

@@ -53,7 +53,7 @@ export default function DashboardStaredCourses({data}) {
 
         <SortCourses/>
 
-        <div className=" box-border lg:w-4/5  m-auto sm:auto-cols-max mt-12 sm:gap-6 gap-3 sm:grid sm:grid-cols-3 lg:px-auto md:px-auto sm:overflow-visible  overflow-scroll whitespace-nowrap no-scrollbar py-4 sm:w-11/12 w-screen hidden">
+        <div className=" box-border lg:w-4/5  m-auto sm:auto-cols-max mt-12 lg:gap-6 sm:gap-4 gap-3 sm:grid sm:grid-cols-3 lg:px-auto md:px-auto sm:overflow-visible  overflow-scroll whitespace-nowrap no-scrollbar py-4 sm:w-11/12 w-screen hidden">
           <MoreCourses/>
           <div className="absolute w-[55rem] h-[40rem] right-0 overflow-hidden block">
               <Image src="/dashboard-ellipse2.svg" alt="Ellipse" fill />

src/data/dashboard.js

@@ -152,30 +152,3 @@ export const getCompletedLearningPaths = async () => {
   return data.filter((learningPath) => learningPath.progress === 100);
 };
 
-export const getMoreCoursesData = async () => {
-  try {
-    const session = await getServerSession(authOptions);
-    if (!session) return {};
-
-    const domains = Object.values(ALLOWED_DOMAINS);
-    const data = await Promise.all(
-      domains.map(async (domain) => {
-        const data = await db.savedLearningPath.count({
-          where: {
-            learningPath: {
-              domain,
-            },
-          },
-        });
-        return {
-          domain,
-          stars: data,
-        };
-      })
-    );
-    return data;
-  } catch (error) {
-    console.log(error);
-    return {};
-  }
-};