Changed Page Routing and added header

app/components/dashboard/header/Header.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { AppBar, Toolbar, IconButton, Menu, MenuItem, Button } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+
+const Header = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  // Handle menu open
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  // Handle menu close
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <AppBar position="sticky" color="transparent" elevation={0}>
+      <Toolbar>
+        {/* Burger Menu */}
+        <IconButton edge="start" color="inherit" aria-label="menu">
+          <MenuIcon />
+        </IconButton>
+
+        {/* Dropdown Button */}
+        <Button color="inherit" onClick={handleMenuClick}>
+          Options
+        </Button>
+
+        {/* Dropdown Menu */}
+        <Menu
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={handleMenuClose}
+        >
+          <MenuItem onClick={handleMenuClose}>Option 1</MenuItem>
+          <MenuItem onClick={handleMenuClose}>Option 2</MenuItem>
+          <MenuItem onClick={handleMenuClose}>Option 3</MenuItem>
+        </Menu>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

app/components/dashboard/layout/layoutWrapper.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/system';
+
+export const LayoutWrapper = styled('div')({
+  display: 'flex',
+  width: '100%',
+  height: '100vh',
+  overflow: 'hidden',
+});

app/components/dashboard/layout/mainContent.ts

@@ -0,0 +1,8 @@
+import { styled } from '@mui/system';
+
+export const MainContent = styled('div')(({ theme }) => ({
+  marginLeft: '240px',
+  padding: theme.spacing(3),
+  minHeight: '100vh',
+  width: 'calc(100% - 240px)', 
+}));

app/components/dashboard/sidebar/Sidebar.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import { styled } from '@mui/system';
+import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
+import SidebarLink from './SideBarLink';
+
+const SidebarContainer = styled('aside')(({ theme }) => ({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: 240,
+  height: '100vh',
+  backgroundColor: theme.palette.background.primary,
+  color: theme.palette.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: theme.spacing(2),
+  zIndex: 1100,
+  borderRight: `1px solid ${theme.palette.divider}`,
+}));
+
+const SidebarHeader = styled('div')(({ theme }) => ({
+  fontSize: '20px',
+  fontWeight: 600,
+  marginBottom: theme.spacing(3),
+  display: 'flex',
+  alignItems: 'center',
+  color: theme.palette.text.primary,
+}));
+
+const IconSpacing = styled(DashboardIcon)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+}));
+
+const Sidebar = () => {
+  return (
+    <SidebarContainer>
+      <SidebarHeader>
+        PaymentIQ <IconSpacing fontSize="small" />
+      </SidebarHeader>
+       {SIDEBAR_LINKS.map((link) => (
+          <SidebarLink
+            key={link.path}
+            title={link.title}
+            path={link.path}
+            icon={link.icon}
+          />
+        ))}
+    </SidebarContainer>
+  );
+};
+
+export default Sidebar;

app/components/sidebar/Sidebar.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import React from 'react';
-import { styled } from '@mui/system';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
-import SidebarLink from './SideBarLink';
-
-// Sidebar Container (styled using MUI System)
-export const Sidebar = styled('div')(({ theme }) => ({
-  width: '240px',
-  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 }) => ({
-  flexGrow: 1,
-  padding: theme.spacing(4),
-  backgroundColor: theme.palette.background.default,
-  minHeight: '100vh',
-  overflowY: 'auto',
-}));
-
-// 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
-export const LayoutWrapper = styled('div')({
-  display: 'flex',
-  flexDirection: 'row',
-  height: '100vh',
-});
-
-interface SidebarLayoutProps {
-  children: React.ReactNode; // Add children to accept passed content
-}
-
-const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {
-  return (
-    <LayoutWrapper>
-      <Sidebar>
-        <SidebarHeader>
-          PaymentIQ
-          <DashboardIcon sx={{ marginLeft: 0.5 }} />
-        </SidebarHeader>
-        {SIDEBAR_LINKS.map((link) => (
-          <SidebarLink
-            key={link.path}
-            title={link.title}
-            path={link.path}
-            icon={link.icon}
-          />
-        ))}
-      </Sidebar>
-      <MainContent>{children}</MainContent> {/* Render children here */}
-    </LayoutWrapper>
-  );
-};
-
-export default SidebarLayout;

app/dashboard/layout.tsx

@@ -1,10 +1,23 @@
 'use client';
 
 import React from 'react';
-import SidebarLayout from '../components/sidebar/Sidebar';
+import { MainContent } from '../components/dashboard/layout/mainContent';
+import Header from '../components/dashboard/header/Header';
+import { LayoutWrapper } from '../components/dashboard/layout/layoutWrapper';
+import Sidebar from '@/app/components/dashboard/sidebar/Sidebar';
 
 const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <SidebarLayout>{children}</SidebarLayout>; // Ensure that the sidebar wraps all dashboard pages
+  return (
+    <LayoutWrapper>
+      <Sidebar />
+      <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+      <MainContent>
+        <Header />
+        {children}
+      </MainContent>
+       </div>
+    </LayoutWrapper>
+  );
 };
 
 export default DashboardLayout;

app/dashboard/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Typography, Paper } from '@mui/material';
+import { Typography } from '@mui/material';
 
 const DashboardPage = () => {
   return (

app/page.tsx

@@ -1,5 +0,0 @@
-import SidebarLayout from '@/app/components/sidebar/Sidebar';
-
-export default function Home() {
-  return <SidebarLayout />;
-}