Fe hamburger is Addes

components/DSA/Badges.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { BsHexagon } from "react-icons/bs";
+
+export const Badges = () => {
+  const badges = 7;
+  return (
+    <>
+      <div className="text-lightblack  mt-0 md:mt-28  h-max md:h-80 w-6/6 md:w-2/6 p-3 bg-whitish mx-0 md:mx-2 my-4 rounded-xl">
+
+        <h1 className=" text-5xl md:text-5xl font-bold ml-4 md:ml-0">
+          Badges <span className="text-whitish">ex</span>
+        </h1>
+        <div className="flex flex-row space-between items-center space-x-20 mt-8">
+          <h1 className="text-9xl ml-8 md:ml-0">{`${badges}`}</h1>
+          <BsHexagon className="h-40 w-40 text-badge" />
+        </div>
+      </div>
+    </>
+  );
+};

components/DSA/Problem.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { CircularProgressbar } from "react-circular-progressbar";
+import "react-circular-progressbar/dist/styles.css";
+import { linebar } from "@/constant/DSA/problem_stats";
+export const Problem = () => {
+  const percentage = 70; //percentage
+
+  return (
+    <>
+      <div className="text-lightblack mt-28 h-max md:h-80 w-6/6 md:w-4/6 p-3 bg-whitish my-4  rounded-lg">
+        <h1 className="text-4xl font-bold mb-4 ml-4 md:ml-0">
+          Solved Problems <span className="text-whitish">ext</span>
+        </h1>
+        <div className="flex flex-col md:flex-row items-center space-x-0 md:space-x-16">
+          <div className="w-48 h-48 mr-8">
+            <div className="relative h-full">
+              <CircularProgressbar
+                value={percentage}
+                text={`${percentage}%`}
+                strokeWidth={15}
+                styles={{
+                  path: {
+                    stroke: "#FF904D",
+                    strokeLinecap: "butt",
+                    transition: "stroke-dashoffset 0.5s ease 0s",
+                    transform: "rotate(0.25turn)",
+                    transformOrigin: "center center",
+                  },
+                  trail: {
+                    stroke: "#FFBD58",
+                    strokeLinecap: "butt",
+                    transform: "rotate(0.25turn)",
+                    transformOrigin: "center center",
+                  },
+                  text: {
+                    fill: "#FE995C",
+                    fontSize: "14px",
+                  },
+                }}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col space-y-4">
+            {linebar?.map((data, index) => (
+              <div key={index}>
+                <h1 className="text-xl font-bold mb-2">{data.title}</h1>
+                <div className="h-6 w-80 bg-free rounded-full">
+                  <div
+                    className="h-full bg-easy rounded-full"
+                    style={{ width: `${data.score}` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

components/DSA/Submission.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { submissions } from "@/constant/DSA/problem_name";
+
+export const Submission = () => {
+  const commonStyle = "box-border p-3  bg-cream rounded-lg";
+
+  return (
+    <>
+      <div className="text-lightblack  p-3 h-max md:h-96 w-6/6 rounded-lg bg-whitish my-2 mr-0 md:mr-2 ">
+        <h2 className="text-4xl font-bold ml-3 md:ml-0">View All Submission</h2>
+        <div className="text-3xl mt-6 overflow-y-auto w-6/6 h-64 sm:Overflow-x-auto ">
+          <div className="flex flex-col space-y-2">
+            {submissions.map((submissions, index) => (
+              <li key={index} className={commonStyle}>
+                {submissions}
+              </li>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

components/DSA/index.tsx

@@ -1,9 +1,22 @@
-import React from 'react'
+import React from "react";
+import { Badges } from "./Badges";
+import { Problem } from "./Problem";
+import { Submission } from "./Submission";
 
-const DSA = () => {
+const DSA: React.FC<{}> = () => {
   return (
-    <div className='text-black'>index_dsa</div>
-  )
-}
+    <>
+      <div className="ml-0 md:ml-64">
+        <div className="ml-0 md:ml-10">
+          <div className="flex flex-col md:flex-row">
+            <Problem />
+            <Badges />
+          </div>
+          <Submission />
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default DSA
+export default DSA;

components/LAYOUT/Hamburger.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { useState } from "react";
+
+const commonStyle = "w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded";
+
+export default function Hamburger() {
+    const [isMenuOpen, setMenuOpen] = useState(false);
+    const toggleMenu = () => {
+        setMenuOpen(!isMenuOpen);
+    };
+    return (
+        <>
+        <div className="fixed top-0 left-0 bottom-0 bg-whitish w-0 mdp-4 rounded-lg ">
+            <div className="w-40 h-56 ">
+                <button
+                    className="block lg:hidden focus:outline-none"
+                    onClick={toggleMenu}
+                >
+                    <svg
+                        className="h-12 w-12 text-gray-600 mt-4 ml-4 "
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        {isMenuOpen ? (
+                            <path
+                                className="bg-black"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M6 18L18 6M6 6l12 12"
+                            />
+                        ) : (
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M4 6h16M4 12h16M4 18h16"
+                            />
+                        )}
+                    </svg>
+                </button>
+                <div
+                    className={`gap-y-4 mt-1 ${isMenuOpen ? "block" : "hidden lg:block"
+                        }`}
+                >
+                    <div className="bg-whitish space-y-5 p-2 h-full">
+                        <button className={commonStyle}>
+                            DSA
+                        </button>
+                        <button className={commonStyle}>
+                            DEVELOPMENT
+                        </button>
+                        <button className={commonStyle}>
+                            RESOURCES
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </>
+    )
+}

components/LAYOUT/Leftbar.tsx

@@ -1,31 +1,30 @@
-import React from 'react';
-import Image from 'next/image';
+import React from "react";
+
+import Image from "next/image";
+const commonStyle = "w-36 md:w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded";
 
 const Leftbar: React.FC = () => {
   return (
-    <div className="fixed top-0 left-0 bottom-0 bg-[#fef9f4] w-1/5 p-4">
-      <div className="flex items-center justify-center mb-8">
-
-
-
-
-  <Image
-          className="h-auto max-w-full mt-4" 
-          src="/logo1.png"
-          alt="me"
-          width={210}
-          height={60}
-        />
-
+    <div className="fixed top-0 left-0 bottom-0 bg-whitish w-24 md:w-1/5 mdp-4">
+      <div className="flex items-center justify-center mb-8 o">
+        <div className="flex items-center">
+          <Image
+            className=" h-0 md:h-auto max-w-0 md:max-w-full mt-0 md:mt-4 "
+            src="/logo1.png"
+            alt="me"
+            width={210}
+            height={60}
+          />
+        </div>
       </div>
-      <div className="space-y-4 mt-10">
-        <button className="w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+      <div className="space-y-4">
+        <button className={commonStyle}>
           DSA
         </button>
-        <button className="w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+        <button className={commonStyle}>
           DEVELOPMENT
         </button>
-        <button className="w-full py-2 px-4 bg-orangee hover:bg-orange-500 text-white rounded">
+        <button className={commonStyle}>
           RESOURCES
         </button>
       </div>
@@ -34,7 +33,3 @@ const Leftbar: React.FC = () => {
 };
 
 export default Leftbar;
-
-
-
-

components/LAYOUT/Navbar.tsx

@@ -1,17 +1,34 @@
-import React from 'react';
+import React from "react";
+import Image from "next/image";
+
 
 const Navbar: React.FC = () => {
+
   return (
-    <nav className="fixed top-2 left-0 right-2 bg-[#fef9f4] bg opacity-95 p-4 ml-[20.5%] rounded-[30px]">
-      <div className="container mx-auto flex justify-between items-center">
-        <div className="text-white font-bold text-lg"></div>
-        <div className="space-x-4">
-          <button className="rounded-lg p-3 border-2 border-orangee bg-orangee hover:bg-orange-500 text-lg">
-                      Logout
-</button>
+    <>
+      <nav className="fixed top-2 left-0 right-2 bg-whitish bg opacity-95 p-4 ml-[20.5%] rounded-[30px]">
+        <div className="container mx-auto flex justify-between items-center">
+          <div className="text-white font-bold text-lg">
+          {/* <Image
+            className=" block md:hidden h-full w-5/6"
+            src="/logo1.png"
+            alt="me"
+            width={210}
+            height={60}
+          /> */}
+          </div>
+          <div className="gap-x-4">
+
+            <button className="rounded-lg p-3 border-2 border-orangee bg-orangee hover:bg-orange-500 text-lg">
+              Logout
+            </button>
+          </div>
         </div>
-      </div>
-    </nav>
+
+      </nav>
+
+
+    </>
   );
 };
 

components/LAYOUT/index.tsx

@@ -1,11 +1,17 @@
 import React from 'react'
 import Leftbar from './Leftbar'
 import Navbar from './Navbar'
+import Hamburger from './Hamburger'
 function Layout() {
   return (
     <div>
-      <Leftbar/>
       <Navbar/>
+      <div className='hidden md:block'>
+      <Leftbar/>
+      </div>
+      <div className='block md:hidden'> <Hamburger/></div>
+
+
     </div>
   )
 }

constant/DSA/problem_name.ts

@@ -0,0 +1,14 @@
+export const submissions = [
+    'Valid Parenthesis',
+    'Palindrome Number',
+    'Happy Number',
+    'Ugly Number',
+    'Array Sorting',
+    'Merge Two Sorted Lists',
+    'Reverse Linked List II',
+    'Middle of the Linked List',
+    'Reverse Linked List I',
+    'Find the Highest Altitude',
+    'Binary Search',
+    'Search Insert Position',
+  ];

constant/DSA/problem_stats.ts

@@ -0,0 +1,14 @@
+export const linebar = [
+    {
+      title: "Easy",
+      score: "40%"
+    },
+    {
+      title: "Medium",
+      score: "50%"
+    },
+    {
+      title: "Hard",
+      score: "20%"
+    }
+  ];