UPDATE: Lucide React Icon and Animation for Theme

frontend/src/components/Layout/Navbar.tsx

@@ -74,16 +74,21 @@ const Navbar: React.FC<NavbarProps> = ({
       {isLoggedIn && (
         <>
           <Button onClick={() => handleSideBar()}
-          extraClasses={`absolute ${
+            extraClasses={`absolute ${showSideBar ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
-          showSideBar ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
           bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
           over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all ` :
-          "top-[75px] left-[20px]"  
+                "top-[75px] left-[20px]"
-        } transition-all duration-300 z-[99]`}
+              } transition-all duration-300 z-[99]`}
-      >              
+          >
             <SidebarIcon className="h-15 w-15 mr-1 z-[90]" />
           </Button>
-          {showSideBar && <Sidebar scrollActiveSideBar={showSideBar} />}
+          <div
+            className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
+    transition-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
+              }`}
+          >
+            <Sidebar />
+          </div>
         </>
       )}
 

frontend/src/components/Layout/Sidebar.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from "react";
+import { SunMoon as SunMoonIcon} from "lucide-react"
 import Theme from "./Theme";
 import "../../assets/styles/sidebar.css"
 
 interface SideBarProps {
   extraClasses?: string;
-  scrollActiveSideBar: boolean;
 }
 
-const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
+const Sidebar: React.FC<SideBarProps> = () => {
   const [thisTheme, setThisTheme] = useState(false);
   const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
-
+  const [triggerAnimation, setTriggerAnimation] = useState(false);
   useEffect(() => {
     const sideBarScroll = () => {
       document.body.style.overflow = isCursorOnSidebar ? "hidden" : "unset";
@@ -23,17 +23,21 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
   }, [isCursorOnSidebar]);
 
   const handleTheme = () => {
-      setThisTheme(!thisTheme);
+    setThisTheme(!thisTheme);
-  }
+    setTriggerAnimation(false);  // Reset animation
+    setTimeout(() => setTriggerAnimation(true), 0);  // Re-trigger animation
+  };
 
-  return <div id="sidebar"   className={`fixed top-0 left-0 w-[250px] ${
+  return (<div id="sidebar" 
-    thisTheme
+    key={triggerAnimation ? 'burn-in' : 'reset'}
-      ? "bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
+    className={`fixed top-0 left-0 w-[250px] ${thisTheme
-      : "bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]"
+      ? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
-  } p-4 z-[90] h-screen overflow-y-auto scrollbar-hide`}
+      : " bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]"
-          onMouseLeave={() => setIsCursorOnSidebar(false)}
+    } p-4 z-[90] h-screen overflow-y-auto pt-10
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+    transition-transform duration-500 ease-in-out animate-burnIn`}
-          <Theme onClick={handleTheme}/>
+    onMouseLeave={() => setIsCursorOnSidebar(false)}
+    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+    <Theme onClick={handleTheme} />
     <ul className="overflow-y-auto">
       <li>1</li>
       <li>1</li>
@@ -107,7 +111,7 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
       <li>1</li>
       <li>1</li>
     </ul>
-  </div>;
+  </div>);
 };
 
 export default Sidebar;

frontend/src/components/Layout/Theme.tsx

@@ -1,18 +1,22 @@
-import React from 'react'
+import React from 'react';
+import { SunMoon as SunMoonIcon } from 'lucide-react';
 
 interface ThemeProps {
-    children? : React.ReactNode;
+  children?: React.ReactNode;
-    onClick : () => void;
+  onClick: () => void;
 }
 
-const Theme: React.FC<ThemeProps> = ( {onClick, children} ) => {
+const Theme: React.FC<ThemeProps> = ({ onClick }) => {
   return (
     <button
-    onClick={onClick}
+      onClick={onClick}
-    className={` p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}>
+      className="p-2 text-[1.5rem] flex items-center gap-2 text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all"
-        Light/Dark
+    >
+      <SunMoonIcon
+        className={`transition-transform duration-300 ease-in-out`}
+      />
     </button>
-  )
+  );
-}
+};
 
-export default Theme
+export default Theme;

frontend/tailwind.config.js

@@ -13,7 +13,8 @@ export default {
         moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
         moving_bg: 'moving_bg 200s linear infinite',
         'border-spin': 'border-spin linear infinite', 
-        floating: "floating 30s linear infinite"
+        floating: "floating 30s linear infinite",
+        burnIn: 'burnIn 1s ease-out',
       },
 
 
@@ -48,6 +49,12 @@ export default {
           '80%': { transform: 'translate(10px, -7px) rotateX(-2.5deg) rotateY(1.5deg)' }, /* Top-right tilt */
           '100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' }, 
         },
+        
+        burnIn: {
+          '0%' : { opacity: '0'},
+          '50%' : { opacity: '0.8'},
+          '100%' : { opacity: '1'},
+        },
       },
     },
     plugins: [