Merge pull request #865 from getmaxun/edit-page
feat: main layout revamp
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user