Fixed New Research Button Functionality

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

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,57 +97,57 @@ 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"
               >
                 <div className="text-center text-gray-400">
                   <p className="text-2xl">+</p>
                   <p className="text-sm">Start New Vault</p>
                 </div>
-            </div>
-          )}
+              </div>
+            )}
           </div>
 
           {/* Modal */}