Layout and sidebar created

frontend/src/Component/Layout.css

+#page-content-wrapper {
+    position: relative;
+    margin: auto;
+}
\ No newline at end of file

frontend/src/Component/Layout.js

+import React from "react";
+import Sidebar from "./Sidebar";
+import './Layout.css';
+
+const Layout = ({ children }) => {
+  return (
+    <div className="d-flex" id="wrapper">
+      <Sidebar />
+      <div id="page-content-wrapper">
+        <div className="container-fluid">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

frontend/src/Component/Sidebar.css

+.logout {
+    margin-top: 80vh;
+}
+
+.sidebar {
+    align-items: center;
+    justify-content: center;
+    height: 130vh; /* Set height to 100% of viewport height */
+    text-align: center; /* Center text */
+    width: 15%;
+    background: linear-gradient(to bottom, #049cfb, #001061);
+}
+
+.list-group-item.active {
+  background-color: #ffffff;
+  color: #001061;
+  border-color: #001061;
+  font-weight: 500;
+}
+
+.list-group-item:hover {
+  background-color: #ffffff;
+  color: #001061;
+  border-color: #001061;
+}
+
+.list-group-item {
+  background-color: transparent;
+  color: white;
+  border-color: transparent;
+  font-weight: 500;
+}
\ No newline at end of file

frontend/src/Component/Sidebar.js

+import React from "react";
+import './Sidebar.css';
+import { LogOut } from "lucide-react";
+import { NavLink } from "react-router-dom";
+
+const Sidebar = () => {
+  return (
+    <div className="border-right sidebar" id="sidebar-wrapper">
+      <div>
+        <img
+          src="/Images/Logo.png"
+          alt="Logo"
+          className="img-fluid"
+          style={{ Width: "80px"}}
+        />
+      </div>
+      <div className="list-group list-group-flush">
+        <NavLink
+          to="/job-posting"
+          className="list-group-item list-group-item-action"
+        >
+          Job Entry
+        </NavLink>
+        <NavLink
+          to="/posted-jobs"
+          className="list-group-item list-group-item-action"
+        >
+          Posted Jobs
+        </NavLink>
+      </div>
+      <div className="list-group list-group-flush logout">
+        <a to="#" className="list-group-item list-group-item-action">
+          <LogOut size={18} /> Logout
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

frontend/src/Component/UserLayout.js

+import React from 'react'
+import UserSidebar from "./UserSidebar";
+
+const UserLayout = ({ children }) => {
+  return (
+    <div className="d-flex" id="wrapper">
+      <UserSidebar />
+      <div id="page-content-wrapper">
+        <div className="container-fluid">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default UserLayout
\ No newline at end of file

frontend/src/Component/UserSidebar.js

+import React from 'react'
+import "./Sidebar.css";
+import { LogOut } from "lucide-react";
+import { NavLink } from "react-router-dom";
+
+const UserSidebar = () => {
+  return (
+    <div className="border-right sidebar" id="sidebar-wrapper">
+      <div>
+        <div>
+          <img
+            src="/Images/Logo.png"
+            alt="Logo"
+            className="img-fluid"
+            style={{ Width: "80px" }}
+          />
+        </div>
+      </div>
+      <div className="list-group list-group-flush">
+        <NavLink
+          to="/job-vacancies"
+          className="list-group-item list-group-item-action"
+        >
+          Job Vacancies
+        </NavLink>
+        <NavLink
+          to="/applied-jobs"
+          className="list-group-item list-group-item-action"
+        >
+          Applied Jobs
+        </NavLink>
+      </div>
+      <div className="list-group list-group-flush logout">
+        <a to="#" className="list-group-item list-group-item-action">
+          <LogOut size={18} /> Logout
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default UserSidebar
+