From c29eb644eeab4325bd14a0a6e7cc28490ec4f723 Mon Sep 17 00:00:00 2001
From: SE-hassan0304 <coderhassan0304@gmail.com>
Date: Sun, 10 May 2026 23:51:04 +0500
Subject: [PATCH] Fixed New Research Button Functionality

---
 frontend/src/components/SideMenu.jsx |  4 +-
 frontend/src/pages/DashboardPage.jsx | 94 +++++++++++++++-------------
 2 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/SideMenu.jsx b/frontend/src/components/SideMenu.jsx
index a95637e..9b366f7 100644
--- a/frontend/src/components/SideMenu.jsx
+++ b/frontend/src/components/SideMenu.jsx
@@ -3,7 +3,7 @@ import Icon from "./Icon";
 import Button from "./Button";
 import { useNavigate } from "react-router";
 
-export default function SideMenu({ activeItem, setActiveItem }) {
+export default function SideMenu({ activeItem, setActiveItem , onNewResearch}) {
   const menuItems = [
     { name: "My Vaults", iconName: "vault" },
     { name: "Shared Vaults", iconName: "user" },
@@ -66,7 +66,7 @@ export default function SideMenu({ activeItem, setActiveItem }) {
         <Button
           variant="blue"
           className="w-full py-4 flex items-center justify-center gap-2 font-bold text-xs uppercase tracking-wider shadow-md shadow-slate-200"
-          onClick={() => navigate('/create-vault')}
+          onClick={onNewResearch}
         >
           <Icon name="add" size="16px" color="white" />
           New Research
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index 265dd5b..bd43035 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -82,7 +82,11 @@ export default function DashboardPage() {
   return (
     <div className="flex min-h-screen bg-white">
       {/* Sidebar handles Desktop (hidden on mobile via md:flex) */}
-      <SideMenu activeItem={activeSection} setActiveItem={setActiveSection} />
+      <SideMenu
+        activeItem={activeSection}
+        setActiveItem={setActiveSection}
+        onNewResearch={() => setOpen(true)} // Pass the prop here
+      />
 
       {/* NEW: Wrapper for Header and Main Content */}
       <div className="grow flex flex-col min-w-0">
@@ -93,48 +97,48 @@ export default function DashboardPage() {
           - ml-64 on desktop
           - pb-24 on mobile so content isn't hidden by the Bottom Nav
       */}
-      <main className="grow mt-16 ml-0 md:ml-64 p-6 md:p-10 pb-24 md:pb-10 transition-all duration-200">
-        <header className="flex justify-between items-center mb-8">
-          <h2 className="text-xl md:text-2xl font-bold text-[#0B3C5D]">
-            {activeSection}
-          </h2>
-          {/* Hide "Create Vault" text on tiny screens to save space */}
-
-          <Button
-            variant="blue"
-            className="bg-[#00263F] text-white p-2 md:px-4 md:py-2 rounded-lg flex items-center gap-2"
-            onClick={() => setOpen(true)}
-          >
-            <Icon name="create-vault" size="20px" />
-            Create Vault
-          </Button>
-        </header>
-
-        {/* Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {/* Dynamic Vaults */}
-          {displayVaults.length > 0 ? (
-            displayVaults.map((vault) => (
-              <Link
-                key={vault._id || vault.id}
-                to={`/vaults/${vault._id || vault.id}`}
-                state={{ vault }}
-              >
-                <VaultCard {...vault} />
-              </Link>
-            ))
-          ) : (
-            <p className="text-gray-400 col-span-3 text-center">
-              {activeSection === "My Vaults"
-                ? "No vaults yet. Create one to get started!"
-                : "No shared vaults yet."}
-            </p>
-          )}
-
-          {/* Start New Vault Card */}
-
-          {activeSection === "My Vaults" && (
-            <div
+        <main className="grow mt-16 ml-0 md:ml-64 p-6 md:p-10 pb-24 md:pb-10 transition-all duration-200">
+          <header className="flex justify-between items-center mb-8">
+            <h2 className="text-xl md:text-2xl font-bold text-[#0B3C5D]">
+              {activeSection}
+            </h2>
+            {/* Hide "Create Vault" text on tiny screens to save space */}
+
+            <Button
+              variant="blue"
+              className="bg-[#00263F] text-white p-2 md:px-4 md:py-2 rounded-lg flex items-center gap-2"
+              onClick={() => setOpen(true)}
+            >
+              <Icon name="create-vault" size="20px" />
+              Create Vault
+            </Button>
+          </header>
+
+          {/* Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {/* Dynamic Vaults */}
+            {displayVaults.length > 0 ? (
+              displayVaults.map((vault) => (
+                <Link
+                  key={vault._id || vault.id}
+                  to={`/vaults/${vault._id || vault.id}`}
+                  state={{ vault }}
+                >
+                  <VaultCard {...vault} />
+                </Link>
+              ))
+            ) : (
+              <p className="text-gray-400 col-span-3 text-center">
+                {activeSection === "My Vaults"
+                  ? "No vaults yet. Create one to get started!"
+                  : "No shared vaults yet."}
+              </p>
+            )}
+
+            {/* Start New Vault Card */}
+
+            {activeSection === "My Vaults" && (
+              <div
                 onClick={() => setOpen(true)}
                 className="border-2 border-dashed border-gray-300 rounded-xl flex items-center justify-center min-h-37 cursor-pointer hover:bg-gray-100 transition"
               >
@@ -142,8 +146,8 @@ export default function DashboardPage() {
                   <p className="text-2xl">+</p>
                   <p className="text-sm">Start New Vault</p>
                 </div>
-            </div>
-          )}
+              </div>
+            )}
           </div>
 
           {/* Modal */}