feat: implement dashboard layout with sidebar, navbar, and marketplace banner

app/src/components/templates/CollaborationPopup.tsx

@@ -50,7 +50,14 @@ const UserListTemplate: React.FC<UserListTemplateProps> = ({ user }) => {
   );
 };
 
-const CollaborationPopup: React.FC = () => {
+interface CollaborateProps {
+  setUserManagement: (value: boolean) => void;
+}
+
+const CollaborationPopup: React.FC<CollaborateProps> = ({
+  setUserManagement,
+}) => {
+  const userName = localStorage.getItem("userName") || "Anonymous";
   const users = [
     {
       name: "Alice Johnson",
@@ -81,16 +88,31 @@ const CollaborationPopup: React.FC = () => {
       access: "Viewer",
     },
   ];
-
   return (
     <RenderOverlay>
-      <div className="collaboration-popup-wrapper">
-        <div className="collaboration-popup-container">
+      <div
+        className="collaboration-popup-wrapper"
+        onClick={() => {
+          setUserManagement(false);
+        }}
+      >
+        <div
+          className="collaboration-popup-container"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
           <div className="header">
             <div className="content">Share this file</div>
             <div className="content">
               <div className="copy-link-button">copy link</div>
-              <div className="close-button">
+              <div
+                className="close-button"
+                onClick={() => {
+                  setUserManagement(false);
+                }}
+              >
                 <CloseIcon />
               </div>
             </div>
@@ -111,7 +133,10 @@ const CollaborationPopup: React.FC = () => {
             </div>
             <div className="users-list-container">
               <div className="you-container">
-                <div className="your-name">User 1</div>
+                <div className="your-name">
+                  <div className="user-profile">{userName[0]}</div>
+                  {userName}
+                </div>
                 <div className="indicater">you</div>
               </div>
               {users.map((user, index) => (