Added Maincontent and Routing while sidebar is fixed

app/components/sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import React from 'react';
 import { styled } from '@mui/system';
@@ -9,30 +9,32 @@ import SidebarLink from './SideBarLink';
 // Sidebar Container (styled using MUI System)
 export const Sidebar = styled('div')(({ theme }) => ({
   width: '240px',
-  backgroundColor:  theme.palette.background.primary,
+  backgroundColor: theme.palette.background.primary,
   color: 'white',
   padding: theme.spacing(2),
   height: '100vh',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
+  transition: 'width 0.3s ease', // Transition for resizing
 }));
 
 // Main Content Area
 export const MainContent = styled('div')(({ theme }) => ({
-  marginLeft: '240px',
-  padding: theme.spacing(3),
-  backgroundColor:  theme.palette.secondary.main,
+  flexGrow: 1,
+  padding: theme.spacing(4),
+  backgroundColor: theme.palette.background.default,
   minHeight: '100vh',
+  overflowY: 'auto',
 }));
 
-// Sidebar Navigation Items
-export const SidebarItem = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1.5),
-  cursor: 'pointer',
-  '&:hover': {
-    backgroundColor: 'brown',
-  },
+// Sidebar Header
+export const SidebarHeader = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  fontSize: '20px',
+  fontWeight: 600,
+  display: 'flex',
+  alignItems: 'center',
 }));
 
 // Page Wrapper that holds Sidebar and Content
@@ -42,18 +44,18 @@ export const LayoutWrapper = styled('div')({
   height: '100vh',
 });
 
-// Sidebar Header
-export const SidebarHeader = styled('div')(({ theme }) => ({
-  marginBottom: theme.spacing(2),
-  fontSize: '20px',
-  fontWeight: 600,
-}));
+interface SidebarLayoutProps {
+  children: React.ReactNode; // Add children to accept passed content
+}
 
-const SidebarLayout = () => { 
- return (
+const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {
+  return (
     <LayoutWrapper>
       <Sidebar>
-        <SidebarHeader>PaymentIQ<DashboardIcon sx={{ marginLeft: 0.5 }}/></SidebarHeader>
+        <SidebarHeader>
+          PaymentIQ
+          <DashboardIcon sx={{ marginLeft: 0.5 }} />
+        </SidebarHeader>
         {SIDEBAR_LINKS.map((link) => (
           <SidebarLink
             key={link.path}
@@ -63,8 +65,9 @@ const SidebarLayout = () => {
           />
         ))}
       </Sidebar>
+      <MainContent>{children}</MainContent> {/* Render children here */}
     </LayoutWrapper>
   );
-}
+};
 
 export default SidebarLayout;

app/dashboard/approve/page.tsx

@@ -0,0 +1,13 @@
+// This ensures this component is rendered only on the client side
+'use client';
+
+import React from 'react';
+
+export default function ApprovePage() {
+  return (
+    <div>
+      {/* This page will now be rendered on the client-side */}
+      <h1>Approve</h1>
+    </div>
+  );
+}

app/dashboard/investigate/page.tsx

@@ -0,0 +1,13 @@
+// This ensures this component is rendered only on the client side
+'use client';
+
+import React from 'react';
+
+export default function InvestigatePage() {
+  return (
+    <div>
+      {/* This page will now be rendered on the client-side */}
+      <h1>Investigate</h1>
+    </div>
+  );
+}

app/dashboard/layout.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import React from 'react';
+import SidebarLayout from '../components/sidebar/Sidebar';
+
+const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <SidebarLayout>{children}</SidebarLayout>; // Ensure that the sidebar wraps all dashboard pages
+};
+
+export default DashboardLayout;

app/dashboard/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import React from 'react';
+import { Typography, Paper } from '@mui/material';
+
+const DashboardPage = () => {
+  return (
+    <div  style={{ width: '100vh' }}>
+      <Typography variant="h4" gutterBottom>
+        Dashboard Overview
+      </Typography>
+      {/* Add your dashboard content here */}
+  </div>
+  );
+};
+
+export default DashboardPage;

app/dashboard/transactions/page.tsx

@@ -0,0 +1,13 @@
+// This ensures this component is rendered only on the client side
+'use client';
+
+import React from 'react';
+
+export default function TransactionPage() {
+  return (
+    <div>
+      {/* This page will now be rendered on the client-side */}
+      <h1>Transactions</h1>
+    </div>
+  );
+}

app/page.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import SidebarLayout from '@/app/components/sidebar/Sidebar';
 
 export default function Home() {

constants/SidebarLink.constants.ts

@@ -16,9 +16,9 @@ import { ISidebarLink } from '@/interfaces/SidebarLink.interfaces';
 
 
 export const SIDEBAR_LINKS: ISidebarLink[] = [
-  { title: 'Home', path: '/', icon: HomeIcon },
-  { title: 'Transaction', path: '/transaction', icon: AccountBalanceWalletIcon },
-  { title: 'Approve', path: '/approve', icon: CheckCircleIcon },
+  { title: 'Home', path: '/dashboard', icon: HomeIcon },
+  { title: 'Transaction', path: '/dashboard/transactions', icon: AccountBalanceWalletIcon },
+  { title: 'Approve', path: '/dashboard/approve', icon: CheckCircleIcon },
   { title: 'Investigate', path: '/investigate', icon: SearchIcon },
   { title: 'KYC', path: '/kyc', icon: VerifiedUserIcon },
   { title: 'User Accounts', path: '/user-accounts', icon: PeopleIcon },