made sidebar collapsable

Author: Nishthajain7

package-lock.json

@@ -23,6 +23,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-github-calendar": "^4.5.2",
+    "react-icons": "^5.5.0",
     "rimraf": "^5.0.10",
     "tailwind-merge": "^2.5.5"
   },

package.json

@@ -8,11 +8,11 @@ const DashboardLayout = ({ children }: PropsWithChildren) => {
     return (
         <SelectedButtonProvider>
             <div className="flex min-h-screen w-full ">
-                <div className='w-2/12 h-screen top-0 sticky'>
+                <div className="fixed left-0 top-0 h-screen z-50 md:w-2/12 md:sticky">
                     <Sidebar />
                 </div>
                 {/* Content area will take the remaining space */}
-                <div className="w-10/12 bg-bgMainColor">
+                <div className="bg-bgMainColor w-full md:w-10/12 ml-20 md:ml-0">
                     {children}
                 </div>
             </div>

src/app/dashboard/layout.tsx

@@ -15,4 +15,4 @@ const DashboardPage = () => {
     );
 };
 
-export default DashboardPage;
+export default DashboardPage;

src/app/dashboard/page.tsx

@@ -1,9 +1,10 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import SideBarButton from "./SidebarButton";
 import { Award, CalendarCheck2, Home } from "lucide-react";
 import { useSelectedButton } from "@/context/SelectedButtonContext"; // Adjust the path as necessary
 import Image from 'next/image';
+import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
 
 const buttons = [
     {
@@ -21,33 +22,77 @@ const buttons = [
 ];
 
 const SidePanel: React.FC = () => {
+    const [collapsed, setcollapsed] = useState(true);
+    const [isMobile, setIsMobile] = useState(false);
     const { setSelectedButton } = useSelectedButton();
 
     const handleButtonClick = (name: string) => {
         setSelectedButton(name);
     };
+    const toggleCollapsed = () => {
+        setcollapsed(!collapsed);
+    }
 
-    return (
-        <div className="flex flex-col items-center min-h-full p-5 bg-panelColor text-white w-full">
-            <div className="flex flex-col md:flex-row items-center">
-                <Image
-                    src="/amfoss-logo-white.png"
-                    alt="amfoss-logo-white"
-                    className="h-auto min-w-[10vw] sm:w-[10vw] md:w-[40px] lg:w-[50px] md:min-w-[40px] lg:min-w-[50px] max-h-auto"
-                    width={50}
-                    height={50}
-                    priority
-                />
-                <div className="hidden md:flex flex-col text-center text-[20px] md:text-[24px] font-jetbrains items-center text-offWhite justify-center md:ml-2">
-                    Home
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (!isMobile ?
+        <div className="flex flex-col items-center min-h-full py-5 px-3 bg-panelColor text-white w-full">
+            <div className="flex flex-row md:justify-evenly w-full">
+                <div className="flex flex-col md:flex-row items-center">
+                    <Image
+                        src="/amfoss-logo-white.png"
+                        alt="amfoss-logo-white"
+                        className="h-auto min-w-[10vw] md:w-[40px] lg:w-[50px] md:min-w-[40px] lg:min-w-[50px] max-h-auto"
+                        width={50}
+                        height={50}
+                        priority
+                    />
+                    <div className="md:flex flex-col text-center text-[20px] md:text-[24px] font-jetbrains items-center text-offWhite justify-center md:ml-2">
+                        Home
+                    </div>
                 </div>
             </div>
-            <div className="sm:flex flex-col space-y-4 font-jetbrains m-2 mt-10 overflow-hidden lg:w-full">
+            <div className="md:flex flex-col space-y-4 font-jetbrains m-2 mt-10 overflow-hidden lg:w-full">
+                {buttons.map((button, index) => (
+                    <SideBarButton
+                        key={index}
+                        icon={button.icon}
+                        text={button.name}
+                        collapsed={collapsed}
+                        onClick={() => handleButtonClick(button.name.toLowerCase())}
+                    />
+                ))}
+            </div>
+        </div> :
+        // For mobile scren
+        <div className="flex flex-col items-center min-h-full py-5 px-2 bg-panelColor text-white w-full">
+            <div className="flex flex-row items-center">
+                <Image
+                        src="/amfoss-logo-white.png"
+                        alt="amfoss-logo-white"
+                        className="h-auto w-[8vw] max-h-auto"
+                        width={50}
+                        height={50}
+                        priority
+                    />
+                    <div className="flex text-center items-center mr-0" onClick={toggleCollapsed}>{collapsed ? <FaAngleRight className="text-2xl" /> : <FaAngleLeft className="text-2xl"/>}</div>
+                </div>
+            <div className="sflex flex-col space-y-4 font-jetbrains m-2 mt-10 overflow-hidden">
                 {buttons.map((button, index) => (
                     <SideBarButton
                         key={index}
                         icon={button.icon}
                         text={button.name}
+                        collapsed={collapsed}
                         onClick={() => handleButtonClick(button.name.toLowerCase())}
                     />
                 ))}

src/components/Sidebar.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 type SideBarButtonProps = {
   icon?: React.ReactElement;
   text: string;
+  collapsed: boolean;
   onClick: (text: string) => void;
 };
 
-const SideBarButton: React.FC<SideBarButtonProps> = ({ icon, text, onClick }) => {
+const SideBarButton: React.FC<SideBarButtonProps> = ({ icon, text, onClick, collapsed }) => {
   return (
     <div
-      className="lg:flex justify-center items-center max-w-full bg-panelButtonColor p-5 rounded-none sm:rounded-md md:rounded-xl text-white overflow-hidden cursor-pointer transition-colors duration-500"
+      className="lg:flex sm:flex sm:flex-row md:block justify-center items-center max-w-full bg-panelButtonColor lg:p-5 md:px-1 sm:px-4 sm:py-5 rounded-none sm:rounded-md md:rounded-xl text-white overflow-hidden cursor-pointer transition-colors duration-500"
       onClick={() => onClick(text)}
       title={text}
     >
@@ -22,9 +23,11 @@ const SideBarButton: React.FC<SideBarButtonProps> = ({ icon, text, onClick }) =>
 
       {/* Text container */}
       <div className="flex-1 flex items-center justify-center z-20">
-        <div className="text-base lg:text-lg hidden md:block">{text}</div>
+        <div className={`text-base lg:text-lg ${collapsed ? "hidden" : ""} md:block`}>{text}</div>
       </div>
+
     </div>
+
   );
 };
 

src/components/SidebarButton.tsx

@@ -47,7 +47,7 @@ export default {
       },
       screens: {
         sm: "0px",
-        md: "640px",
+        md: "768px",
         lg: "1024px",
         xl: "1280px",
       },