Mitchell/payment-backoffice
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

capital

Browse Source
This commit is contained in:
Petropoulos Evangelos 2025-06-20 17:34:19 +03:00
parent 394cb68489
commit d144876b72
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
payment-iq/app/components/sidebar/SidebarLayout.tsx
View File

@ -4,10 +4,10 @@ import React from 'react';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
import DashboardIcon from '@mui/icons-material/Dashboard'; import DashboardIcon from '@mui/icons-material/Dashboard';
import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants'; import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';
import SidebarLink from './SideBarLink'; import SideBarLink from './SideBarLink';
// Sidebar Container (styled using MUI System) // SideBar Container (styled using MUI System)
export const Sidebar = styled('div')(({ theme }) => ({ export const SideBar = styled('div')(({ theme }) => ({
width: '240px', width: '240px',
backgroundColor: theme.palette.background.primary, backgroundColor: theme.palette.background.primary,
color: 'white', color: 'white',
@ -28,8 +28,8 @@ export const MainContent = styled('div')(({ theme }) => ({
overflowY: 'auto', overflowY: 'auto',
})); }));
// Sidebar Header // SideBar Header
export const SidebarHeader = styled('div')(({ theme }) => ({ export const SideBarHeader = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
fontSize: '20px', fontSize: '20px',
fontWeight: 600, fontWeight: 600,
@ -37,37 +37,37 @@ export const SidebarHeader = styled('div')(({ theme }) => ({
alignItems: 'center', alignItems: 'center',
})); }));
// Page Wrapper that holds Sidebar and Content // Page Wrapper that holds SideBar and Content
export const LayoutWrapper = styled('div')({ export const LayoutWrapper = styled('div')({
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
height: '100vh', height: '100vh',
}); });
interface SidebarLayoutProps { interface SideBarLayoutProps {
children: React.ReactNode; // Add children to accept passed content children: React.ReactNode; // Add children to accept passed content
} }
const SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => { const SideBarLayout: React.FC<SideBarLayoutProps> = ({ children }) => {
return ( return (
<LayoutWrapper> <LayoutWrapper>
<Sidebar> <SideBar>
<SidebarHeader> <SideBarHeader>
PaymentIQ PaymentIQ
<DashboardIcon sx={{ marginLeft: 0.5 }} /> <DashboardIcon sx={{ marginLeft: 0.5 }} />
</SidebarHeader> </SideBarHeader>
{SIDEBAR_LINKS.map((link) => ( {SIDEBAR_LINKS.map((link) => (
<SidebarLink <SideBarLink
key={link.path} key={link.path}
title={link.title} title={link.title}
path={link.path} path={link.path}
icon={link.icon} icon={link.icon}
/> />
))} ))}
</Sidebar> </SideBar>
<MainContent>{children}</MainContent> {/* Render children here */} <MainContent>{children}</MainContent> {/* Render children here */}
</LayoutWrapper> </LayoutWrapper>
); );
}; };
export default SidebarLayout; export default SideBarLayout;

2
payment-iq/app/dashboard/layout.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
import { MainContent } from '../components/Dashboard/Layout/mainContent'; import { MainContent } from '../components/Dashboard/Layout/mainContent';
import Header from '../components/Dashboard/Header/Header'; import Header from '../components/Dashboard/Header/Header';
import { LayoutWrapper } from '../components/Dashboard/Layout/layoutWrapper'; import { LayoutWrapper } from '../components/Dashboard/Layout/layoutWrapper';
import SideBar from '../components/Dashboard/SideBar/SideBar'; import SideBar from '../components/Dashboard/SideBar/Sidebar';
const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => { const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return ( return (