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:
@@ -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 />
|
||||||
|
|||||||
Reference in New Issue
Block a user