Merge pull request #330 from bounswe/feature/FE/298/web-sidebar

Layout structure changed

ludos/frontend/src/App.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import Layout from './layout'; // Import your Layout component here
+import Layout from './layout'; // Make sure to import your Layout component
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import LandingPage from './pages/landingPage'; // Import your LandingPage component
 
 function App() {
   return (
-    <Layout>
-      <div className="App">
-        <header className="App-header">
-          <p>Welcome home page</p>
-        </header>
-      </div>
-    </Layout>
+    <Router>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<LandingPage />} />
+        </Routes>
+      </Layout>
+    </Router>
   );
 }
 

ludos/frontend/src/components/sidebar.js

@@ -15,7 +15,7 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import { Link } from 'react-router-dom';
 
-const drawerWidth = 100; // Adjust the width as needed
+const drawerWidth = 105; // Adjust the width as needed
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -159,9 +159,7 @@ function Sidebar() {
 
         </Menu>
       </Drawer>
-      <main className={classes.content}>
-        {/* Your main content goes here */}
-      </main>
+
     </div>
   );
 }

ludos/frontend/src/layout.js

@@ -1,29 +1,23 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Sidebar from './components/sidebar';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-const drawerWidth = 240;
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    backgroundColor: '#0C1929',
-  },
-}));
-
-function Layout() {
-  const classes = useStyles();
+import Sidebar from './components/sidebar'; // Import your Sidebar component
+import Box from '@mui/material/Box';
 
+const Layout = ({ children }) => {
   return (
-    <Router>
-      <div className={classes.root}>
-        <CssBaseline />
-        <Sidebar />
-      </div>
-    </Router>
+    <Box
+      sx={{
+        backgroundColor: '#0C1929', // Set the background color
+        minHeight: '100vh',
+        color: 'dark grey',
+        display: 'flex', // Make it a flex container
+      }}
+    >
+      <Sidebar /> {/* Add the Sidebar component */}
+      <Box sx={{ flex: 1 }}>
+        <div className="content">{children}</div>
+      </Box>
+    </Box>
   );
-}
+};
 
 export default Layout;

ludos/frontend/src/pages/landingPage.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+function WelcomePage() {
+  const style = {
+    color: '#569CB1',
+    fontWeight: 'bold',
+  };
+
+  return (
+    <div>
+      <h1 style={style}> Welcome!</h1>
+      <p style={style}> This page is under construction.</p>
+    </div>
+  );
+}
+
+export default WelcomePage;