vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: decouple menu components

Browse Source
This commit is contained in:
amhsirak
2025-11-05 20:30:24 +05:30
parent 3526a1a49a
commit a515c9046a
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/MainPage.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useContext, useEffect } from 'react'; import React, { useCallback, useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { MainMenu } from "../components/dashboard/MainMenu"; import { MainMenu } from "../components/dashboard/MainMenu";
import { Stack } from "@mui/material"; import { Stack, Box } from "@mui/material";
import { Recordings } from "../components/robot/Recordings"; import { Recordings } from "../components/robot/Recordings";
import { Runs } from "../components/run/Runs"; import { Runs } from "../components/run/Runs";
import ProxyForm from '../components/proxy/ProxyForm'; import ProxyForm from '../components/proxy/ProxyForm';
@@ -318,12 +318,31 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
} }
} }
return ( return (
<Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}> <Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
<Stack sx={{ width: 250, flexShrink: 0 }}> {/* Sticky Sidebar */}
<Box sx={{
width: 250,
flexShrink: 0,
position: 'sticky',
top: 64, // Height of NavBar
height: 'calc(100vh - 64px)',
overflowY: 'auto', // Allow scrolling if menu content is too long
zIndex: 1000
}}>
<MainMenu value={content} handleChangeContent={setContent} /> <MainMenu value={content} handleChangeContent={setContent} />
</Stack> </Box>
{/* Scrollable Content Area - Fills remaining space */}
<Box sx={{
flex: 1,
minWidth: 0,
overflow: 'auto',
minHeight: 'calc(100vh - 64px)',
width: 'calc(100% - 250px)'
}}>
{DisplayContent()} {DisplayContent()}
</Stack> </Box>
); </Box>
}; )
}