From f45df1eeae987641771663cbb3b24145b47fa0cc Mon Sep 17 00:00:00 2001
From: Mitchell Magro <mitchell222131@gmail.com>
Date: Wed, 18 Jun 2025 17:38:01 +0200
Subject: [PATCH] Added Maincontent and Routing while sidebar is fixed

---
 app/components/sidebar/Sidebar.tsx  | 47 +++++++++++++++--------------
 app/dashboard/approve/page.tsx      | 13 ++++++++
 app/dashboard/investigate/page.tsx  | 13 ++++++++
 app/dashboard/layout.tsx            | 10 ++++++
 app/dashboard/page.tsx              | 17 +++++++++++
 app/dashboard/transactions/page.tsx | 13 ++++++++
 app/page.tsx                        |  1 -
 constants/SidebarLink.constants.ts  |  6 ++--
 8 files changed, 94 insertions(+), 26 deletions(-)
 create mode 100644 app/dashboard/approve/page.tsx
 create mode 100644 app/dashboard/investigate/page.tsx
 create mode 100644 app/dashboard/layout.tsx
 create mode 100644 app/dashboard/page.tsx
 create mode 100644 app/dashboard/transactions/page.tsx

diff --git a/app/components/sidebar/Sidebar.tsx b/app/components/sidebar/Sidebar.tsx
index b0b56d9..cff7d8e 100644
--- a/app/components/sidebar/Sidebar.tsx
+++ b/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;
diff --git a/app/dashboard/approve/page.tsx b/app/dashboard/approve/page.tsx
new file mode 100644
index 0000000..c496001
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/app/dashboard/investigate/page.tsx b/app/dashboard/investigate/page.tsx
new file mode 100644
index 0000000..28fbef1
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
new file mode 100644
index 0000000..e9aefe5
--- /dev/null
+++ b/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;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
new file mode 100644
index 0000000..4520b57
--- /dev/null
+++ b/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;
diff --git a/app/dashboard/transactions/page.tsx b/app/dashboard/transactions/page.tsx
new file mode 100644
index 0000000..800d90d
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index b29a582..3915b26 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import SidebarLayout from '@/app/components/sidebar/Sidebar';
 
 export default function Home() {
diff --git a/constants/SidebarLink.constants.ts b/constants/SidebarLink.constants.ts
index a637279..2a0e9aa 100644
--- a/constants/SidebarLink.constants.ts
+++ b/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 },