refactor(SettingsLayout): streamline layout and improve styling

- Removed unused imports and simplified margin handling in SettingsLayout.
- 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:58:49 +05:30
parent d1bd36e0a4
commit 884cb9c462

View File

@@ -1,35 +1,25 @@
import { Flex, Typography } from '@/shared/antd-imports'; import { Flex, Typography } from '@/shared/antd-imports';
import SettingsSidebar from '../pages/settings/sidebar/settings-sidebar'; import SettingsSidebar from '../pages/settings/sidebar/settings-sidebar';
import { Outlet, useNavigate } from 'react-router-dom'; import { Outlet } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
import { useEffect } from 'react';
import { useAuthService } from '@/hooks/useAuth';
const SettingsLayout = () => { const SettingsLayout = () => {
const isTablet = useMediaQuery({ query: '(min-width: 768px)' }); const isTablet = useMediaQuery({ query: '(min-width: 768px)' });
const { getCurrentSession } = useAuthService();
const currentSession = getCurrentSession();
const navigate = useNavigate();
return ( return (
<div style={{ marginBlock: 96, minHeight: '90vh' }}> <div className="my-6 min-h-[90vh]">
<Typography.Title level={4}>Settings</Typography.Title> <Typography.Title level={4}>Settings</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">
<SettingsSidebar /> <SettingsSidebar />
</Flex> </Flex>
<Flex style={{ width: '100%' }}> <Flex className="w-full">
<Outlet /> <Outlet />
</Flex> </Flex>
</Flex> </Flex>
@@ -37,9 +27,7 @@ const SettingsLayout = () => {
<Flex <Flex
vertical vertical
gap={24} gap={24}
style={{ className="mt-6"
marginBlockStart: 24,
}}
> >
<SettingsSidebar /> <SettingsSidebar />
<Outlet /> <Outlet />