Fix 20

frontend/app/dapp/Sidebar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'
 import logo from '../../public/Images/spherrelogo.png'
 import Image, { StaticImageData } from 'next/image'
 import Dashboard from '../../public/Images/Dash.png'
@@ -22,7 +22,11 @@ interface NavItem {
   notification?: number
 }
 
-const Sidebar = () => {
+interface onSelectFunc {
+  onSelect: Dispatch<SetStateAction<string>>
+}
+
+const Sidebar = ({ onSelect }: onSelectFunc) => {
   // State to track active page - set dashboard as default
   const [activePage, setActivePage] = useState('Dashboard')
 
@@ -91,7 +95,10 @@ const Sidebar = () => {
           {navItems.map((item) => (
             <li
               key={item.name}
-              onClick={() => handleNavClick(item.name)}
+              onClick={() => {
+                handleNavClick(item.name)
+                onSelect(item.name)
+              }}
               className={`flex items-center cursor-pointer p-3 rounded-lg transition-all ${expanded ? 'gap-3' : 'justify-center'
                 } ${activePage === item.name
                   ? 'bg-[#27292D] text-white'

frontend/app/dapp/page.tsx

@@ -3,10 +3,12 @@
 import { useState, useEffect } from 'react'
 import Sidebar from '../dapp/Sidebar'
 import Navbar from './Navbar'
+import Members from './Members'
 
 export default function Dapp() {
   // State to track sidebar expansion
   const [sidebarExpanded, setSidebarExpanded] = useState(false)
+  const [selectedPage, setSelectedPage] = useState('Dashboard')
 
   // Listen for sidebar expansion state changes
   useEffect(() => {
@@ -30,7 +32,7 @@ export default function Dapp() {
 
   return (
     <div className="flex h-screen">
-      <Sidebar />
+      <Sidebar onSelect={setSelectedPage} />
       <div
         className={`flex-1 flex flex-col transition-all duration-300 ${
           sidebarExpanded ? 'ml-64' : 'ml-16'
@@ -39,6 +41,7 @@ export default function Dapp() {
         <Navbar title={'Dashboard'} />
         <main className="flex-1 overflow-auto p-4">
           {/* Your page content goes here */}
+          {selectedPage === 'Members' && <Members />}
         </main>
       </div>
     </div>