Merge pull request #42 from AbuQamar7379/feature/new-feature-abu

Implement layout for Background design, Conditionally rendering pages!

frontend/src/App.jsx

@@ -14,33 +14,35 @@ import EditAccountInfo from "./pages/EditAccountInfo/EditAccountInfo";
 import Explore from "./pages/Explore/Explore";
 import ThemeProvider from "./context/ThemeProvider/ThemeProvider";
 import { getConfig } from "./utility/envHelper/envHelper";
-import { BgLayout } from "./components/BgComponent/BgComponent";
+import Layout from "./Layout";
 
 export const Config = getConfig();
 
 function App() {
   return (
     <Router>
-      <ThemeProvider>
-        <Routes>
-          <Route path="/" element={BgLayout(Home)()} />
-          <Route path="/about" element={BgLayout(About)()} />
-          <Route path="/services" element={BgLayout(Services)()} />
-          <Route path="/help" element={BgLayout(Help)()} />
-          <Route path="/contact" element={BgLayout(Contact)()} />
-          <Route path="/signup" element={BgLayout(Signup)()} />
-          <Route path="/login" element={BgLayout(Login)()} />
-          <Route path="/forgotpassword" element={BgLayout(ForgotPassword)()} />
-          <Route path="/myAccount" element={BgLayout(MyAccount)()} />
-          <Route
-            path="/editAccountInfo"
-            element={BgLayout(EditAccountInfo)()}
-          />
-          <Route path="/explore" element={BgLayout(Explore)()} />
-          <Route path="*" element={BgLayout(NotFound)()} />
-        </Routes>
-      </ThemeProvider>
-    </Router>
+    <ThemeProvider>
+      <Layout>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/services" element={<Services />} />
+        <Route path="/help" element={<Help />} />
+        <Route path="/contact" element={<Contact />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/forgotpassword" element={<ForgotPassword />} />
+        <Route path="/myAccount" element={<MyAccount />} />
+        <Route
+          path="/editAccountInfo"
+          element={<EditAccountInfo />}
+        />
+        <Route path="/explore" element={<Explore />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+      </Layout>
+    </ThemeProvider>
+  </Router>
   );
 }
 

frontend/src/Layout.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Navbar from "./components/Navbar/Navbar";
+import Footer from "./components/Footer/Footer";
+import BgComponent from "./components/BgComponent/BgComponent";
+import './index.css';
+
+const Layout = ({ children }) => {
+  return (
+    <div
+    className="layoutWrapper"
+    >
+      <div className="bgCompWrapper">
+        <BgComponent />
+      </div>
+      <Navbar />
+      <main>{children}</main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;

frontend/src/components/BgComponent/BgComponent.jsx

@@ -21,33 +21,4 @@ const BgComponent = () => {
   );
 };
 
-const BgLayout = (Component, useLayout = true) => {
-  return (props) => {
-    if (useLayout) {
-      return (
-        <div
-          style={{
-            minHeight: "100vh",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            position: "relative",
-          }}
-        >
-          <div style={{ position: "absolute", zIndex: -99 }}>
-            <BgComponent />
-          </div>
-          <Navbar />
-          <main>
-            <Component {...props} />
-          </main>
-          <Footer />
-        </div>
-      );
-    }
-    return <Component {...props} />;
-  };
-};
-
-export { BgLayout };
 export default BgComponent;

frontend/src/index.css

@@ -49,3 +49,17 @@ body {
   color: var(--text-color);
   background-color: var(--secondary-color);
 }
+
+/* Layout Styles */
+.layoutWrapper{
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/* BgComponent Styles */
+.bgCompWrapper{
+  position: absolute;
+  z-index: -99999;
+}

frontend/src/index.js

@@ -14,5 +14,6 @@ root.render(
     }}
   >
     <App />
+
   </SnackbarProvider>
 );