Merge pull request #865 from getmaxun/edit-page

feat: main layout revamp
This commit is contained in:
Karishma
2025-11-05 23:18:48 +05:30
committed by GitHub
8 changed files with 152 additions and 107 deletions

View File

@@ -1,7 +1,7 @@
import React, { useCallback, useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { MainMenu } from "../components/dashboard/MainMenu";
import { Stack } from "@mui/material";
import { Stack, Box } from "@mui/material";
import { Recordings } from "../components/robot/Recordings";
import { Runs } from "../components/run/Runs";
import ProxyForm from '../components/proxy/ProxyForm';
@@ -318,12 +318,29 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
}
}
return (
<Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}>
<Stack sx={{ width: 250, flexShrink: 0 }}>
return (
<Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
<Box sx={{
width: 230,
flexShrink: 0,
position: 'sticky',
top: 64,
height: 'calc(100vh - 64px)',
overflowY: 'auto',
zIndex: 1000
}}>
<MainMenu value={content} handleChangeContent={setContent} />
</Stack>
</Box>
<Box sx={{
flex: 1,
minWidth: 0,
overflow: 'auto',
minHeight: 'calc(100vh - 64px)',
width: 'calc(100% - 250px)'
}}>
{DisplayContent()}
</Stack>
);
};
</Box>
</Box>
)
}

View File

@@ -13,6 +13,7 @@ import UserRoute from '../routes/userRoute';
import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
import { NotFoundPage } from '../components/dashboard/NotFound';
import RobotCreate from '../components/robot/pages/RobotCreate';
import { Box } from '@mui/material';
export const PageWrapper = () => {
const [open, setOpen] = useState(false);
@@ -84,40 +85,57 @@ export const PageWrapper = () => {
}
}
}, [location.pathname, navigate, setBrowserId, setRecordingId, setRecordingName, setRecordingUrl]);
const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
const isRecordingPage = location.pathname === '/recording';
return (
<div>
<AuthProvider>
<SocketProvider>
<React.Fragment>
{/* {!browserId && location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={!!browserId} />} */}
{location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={false} />}
<Routes>
<Route element={<UserRoute />}>
<Route path="/" element={<Navigate to="/robots" replace />} />
<Route path="/robots/create" element={<RobotCreate />} />
<Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
<Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
<Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
<Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
</Route>
<Route element={<UserRoute />}>
<Route path="/recording" element={
<BrowserDimensionsProvider>
<RecordingPage recordingName={recordingName} />
</BrowserDimensionsProvider>
} />
</Route>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/register"
element={<Register />}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
{/* Show NavBar only for main app pages, not for recording pages */}
{!isRecordingPage && (
<Box sx={{
position: 'sticky',
top: 0,
zIndex: 1100,
backgroundColor: 'background.paper'
}}>
<NavBar recordingName={recordingName} isRecording={false} />
</Box>
)}
<Box sx={{
display: isAuthPage || isRecordingPage ? 'block' : 'flex',
minHeight: isAuthPage || isRecordingPage ? '100vh' : 'calc(100vh - 64px)'
}}>
<Routes>
<Route element={<UserRoute />}>
<Route path="/" element={<Navigate to="/robots" replace />} />
<Route path="/robots/create" element={<RobotCreate />} />
<Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
<Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
<Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
<Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
</Route>
<Route element={<UserRoute />}>
<Route path="/recording" element={
<BrowserDimensionsProvider>
<RecordingPage recordingName={recordingName} />
</BrowserDimensionsProvider>
} />
</Route>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/register"
element={<Register />}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Box>
</React.Fragment>
</SocketProvider>
</AuthProvider>