Files
worklenz/worklenz-frontend/src/layouts/MainLayout.tsx
chamikaJ 2bd6c19c13 refactor(layouts): simplify MainLayout and enhance styling
- Removed unused imports and performance monitoring hooks from MainLayout.
- Updated layout structure to improve responsiveness and styling, including sticky header and optimized content padding.
- Adjusted home page layout to reduce margin and improve spacing for better visual consistency.
- Enhanced TodoList component with collapsible sections for improved user interaction and task management.
- Streamlined project and schedule pages by removing unnecessary margin adjustments, ensuring a cleaner layout.
2025-07-30 17:20:20 +05:30

50 lines
1.5 KiB
TypeScript

import { ConfigProvider, Layout } from '@/shared/antd-imports';
import { Outlet, useLocation } from 'react-router-dom';
import { memo, useMemo } from 'react';
import Navbar from '../features/navbar/navbar';
import { useAppSelector } from '../hooks/useAppSelector';
import { colors } from '../styles/colors';
const MainLayout = memo(() => {
const themeMode = useAppSelector(state => state.themeReducer.mode);
const location = useLocation();
const isProjectView = location.pathname.includes('/projects/') &&
!location.pathname.endsWith('/projects');
const themeConfig = useMemo(
() => ({
components: {
Layout: {
colorBgLayout: themeMode === 'dark' ? colors.darkGray : colors.white,
headerBg: themeMode === 'dark' ? colors.darkGray : colors.white,
},
},
}),
[themeMode]
);
return (
<ConfigProvider theme={themeConfig}>
<Layout className="min-h-screen">
<Layout.Header
className={`sticky top-0 z-[999] flex items-center p-0 shadow-md ${
themeMode === 'dark' ? 'border-b border-[#303030]' : 'shadow-[#18181811]'
}`}
>
<Navbar />
</Layout.Header>
<Layout.Content className={`px-4 sm:px-8 lg:px-12 xl:px-16 ${!isProjectView ? 'overflow-x-hidden max-w-[1400px]' : ''} mx-auto w-full`}>
<Outlet />
</Layout.Content>
</Layout>
</ConfigProvider>
);
});
MainLayout.displayName = 'MainLayout';
export default MainLayout;