refactor(AdminCenterLayout): simplify layout structure and improve styling

- Removed unused imports and simplified margin handling in AdminCenterLayout.
- Updated layout classes for better responsiveness and visual consistency.
- Enhanced sidebar and outlet rendering with improved Flex component usage.
- Streamlined overall layout for a cleaner and more modern appearance.
This commit is contained in:
Chamika J
2025-08-04 09:55:56 +05:30
parent 7c42087854
commit d1bd36e0a4

View File

@@ -4,40 +4,25 @@ import { Outlet } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
import AdminCenterSidebar from '@/pages/admin-center/sidebar/sidebar'; import AdminCenterSidebar from '@/pages/admin-center/sidebar/sidebar';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useAppDispatch } from '@/hooks/useAppDispatch';
const AdminCenterLayout: React.FC = () => { const AdminCenterLayout: React.FC = () => {
const dispatch = useAppDispatch();
const isTablet = useMediaQuery({ query: '(min-width:768px)' }); const isTablet = useMediaQuery({ query: '(min-width:768px)' });
const isMarginAvailable = useMediaQuery({ query: '(min-width: 1000px)' });
const { t } = useTranslation('admin-center/sidebar'); const { t } = useTranslation('admin-center/sidebar');
return ( return (
<div <div className="my-6">
style={{
marginBlock: 96,
minHeight: '90vh',
marginLeft: `${isMarginAvailable ? '5%' : ''}`,
marginRight: `${isMarginAvailable ? '5%' : ''}`,
}}
>
<Typography.Title level={4}>{t('adminCenter')}</Typography.Title> <Typography.Title level={4}>{t('adminCenter')}</Typography.Title>
{isTablet ? ( {isTablet ? (
<Flex <Flex
gap={24} gap={24}
align="flex-start" align="flex-start"
style={{ className="w-full mt-6"
width: '100%',
marginBlockStart: 24,
}}
> >
<Flex style={{ width: '100%', maxWidth: 240 }}> <Flex className="w-full max-w-60">
<AdminCenterSidebar /> <AdminCenterSidebar />
</Flex> </Flex>
<Flex style={{ width: '100%' }}> <Flex className="w-full">
<Outlet /> <Outlet />
</Flex> </Flex>
</Flex> </Flex>
@@ -45,9 +30,7 @@ const AdminCenterLayout: React.FC = () => {
<Flex <Flex
vertical vertical
gap={24} gap={24}
style={{ className="mt-6"
marginBlockStart: 24,
}}
> >
<AdminCenterSidebar /> <AdminCenterSidebar />
<Outlet /> <Outlet />