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