Refactor Sidebar.tsx (for /resource)

Will look weird on other pages.

compass/app/resource/layout.tsx

@@ -61,20 +61,21 @@ export default function RootLayout({
                         }
                     </button>
                     {/* sidebar  */}
-                    <div
+                    {/* <div
                         className={`absolute inset-y-0 left-0 transform ${
                             isSidebarOpen
                                 ? "translate-x-0"
                                 : "-translate-x-full"
                         } w-64 transition duration-300 ease-in-out`}
-                    >
+                    > */}
                         <Sidebar
                             setIsSidebarOpen={setIsSidebarOpen}
+                            isSidebarOpen={isSidebarOpen}
                             name={user.username}
                             email={user.email}
                             isAdmin={user.role === Role.ADMIN}
                         />
-                    </div>
+                    { /* </div>*/ }
                     {/* page ui  */}
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${

compass/components/Sidebar/Sidebar.tsx

@@ -12,6 +12,7 @@ import { UserProfile } from "../resource/UserProfile";
 
 interface SidebarProps {
     setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    isSidebarOpen: boolean;
     name: string;
     email: string;
     isAdmin: boolean;
@@ -19,13 +20,16 @@ interface SidebarProps {
 
 const Sidebar: React.FC<SidebarProps> = ({
     setIsSidebarOpen,
+    isSidebarOpen,
     name,
     email,
     isAdmin: admin,
 }) => {
     return (
-        <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4">
-            {/* button to close sidebar  */}
+        <div className={"fixed left-0 w-64 h-full border border-gray-200 bg-gray-50 px-4 "
+            + (isSidebarOpen ? "translate-x-0" : "-translate-x-full opacity-25")
+            + " transition duration-300 ease-out"}>
+        {/* button to close sidebar  */}
             <div className="flex justify-end">
                 <button
                     onClick={() => setIsSidebarOpen(false)}