Updated Postings Page and made Notifications bar

client/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+node_modules/

client/src/components/Notifbar.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FaTimes } from 'react-icons/fa';
+import './notifbar.css';
+
+const Notifbar = ({ isOpen, onClose }) => {
+  return (
+    <div className={`notifbar ${isOpen ? 'open' : ''}`}>
+      <button className="notifbar-close" onClick={onClose}>
+        <FaTimes size={20} color="#fff" />
+      </button>
+      <div className="notifbar-content">
+        <h2>Notifications</h2>
+        {/* Add your notifications content here */}
+      </div>
+    </div>
+  );
+};
+
+export default Notifbar;

client/src/components/ProfVNavBar.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './profvnavbar.css';
+
+const ProfVNavbar = () => {
+  return (
+    <nav className="prof-vertical-navbar">
+      <div className="prof-navbar-logo">
+      <span className="prof-logo-text">
+          Project<span className="prof-logo-purple">Up</span>
+        </span>
+      </div>
+      <div className="prof-navbar-links">
+        <a href="#name" className="prof-navbar-link">
+          <span className="prof-navbar-text">1. Name</span>
+        </a>
+        <a href="#resume" className="prof-navbar-link">
+          <span className="prof-navbar-text">2. Resume</span>
+        </a>
+        <a href="#website" className="prof-navbar-link">
+          <span className="prof-navbar-text">3. Website</span>
+        </a>
+        <a href="#bio" className="prof-navbar-link">
+          <span className="prof-navbar-text">4. Bio/Interests</span>
+        </a>
+      </div>
+    </nav>
+  );
+};
+
+export default ProfVNavbar;

client/src/components/ProfilePostings/PostingsHeader.jsx

@@ -0,0 +1,9 @@
+// import React from 'react'
+
+// const PostingsHeader = () => {
+//   return (
+//     <div>PostingsHeader</div>
+//   )
+// }
+
+// export default PostingsHeader

client/src/components/ProfilePostings/PostingsPost.jsx

@@ -0,0 +1,9 @@
+// import React from 'react'
+
+// const PostingsPost = () => {
+//   return (
+//     <div>PostingsPost</div>
+//   )
+// }
+
+// export default PostingsPost

client/src/components/ProfilePostings/PostingsPosts.jsx

@@ -0,0 +1,9 @@
+// import React from 'react'
+
+// const PostingsPosts = () => {
+//   return (
+//     <div>PostingsPosts</div>
+//   )
+// }
+
+// export default PostingsPosts

client/src/components/ProfilePostings/PostingsTab.jsx

@@ -0,0 +1,7 @@
+// import React from 'react'
+
+// export const PostingsTab = () => {
+//   return (
+//     <div>PostingsTab</div>
+//   )
+// }

client/src/components/VerticalNavbar.jsx

@@ -1,32 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { HiMiniHome } from "react-icons/hi2";
-import { FaBell } from "react-icons/fa";
-import { FaUserCircle } from "react-icons/fa";
+import { FaBell, FaUserCircle } from "react-icons/fa";
 import './verticalbar.css';
+import Notifbar from './Notifbar'; // Import the Notifbar component
 
 const VerticalNavbar = () => {
+  const [notifbarOpen, setNotifbarOpen] = useState(false);
+
+  const handleNotifbarToggle = () => {
+    setNotifbarOpen(!notifbarOpen);
+  };
+
   return (
-    <nav className="vertical-navbar">
-      <div className="navbar-logo">
-      <span className="logo-text">
-          Project<span className="logo-purple">Up</span>
-        </span>
-      </div>
-      <div className="navbar-links">
-        <a href="#home" className="navbar-link">
-          <HiMiniHome size={25} color="#D3C2F8" />
-          <span className="navbar-text">Home</span>
-        </a>
-        <a href="#notifications" className="navbar-link">
-          <FaBell size={25} color="#D3C2F8" />
-          <span className="navbar-text">Notifications</span>
-        </a>
-        <a href="#profile" className="navbar-link">
-          <FaUserCircle size={25} color="#D3C2F8" />
-          <span className="navbar-text">Profile</span>
-        </a>
-      </div>
-    </nav>
+    <>
+      <nav className="vertical-navbar">
+        <div className="navbar-logo">
+          <span className="logo-text">
+            Project<span className="logo-purple">Up</span>
+          </span>
+        </div>
+        <div className="navbar-links">
+          <a href="#home" className="navbar-link">
+            <HiMiniHome size={25} color="#D3C2F8" />
+            <span className="navbar-text">Home</span>
+          </a>
+          <a href="#notifications" className="navbar-link" onClick={handleNotifbarToggle}>
+            <FaBell size={25} color="#D3C2F8" />
+            <span className="navbar-text">Notifications</span>
+          </a>
+          <a href="#profile" className="navbar-link">
+            <FaUserCircle size={25} color="#D3C2F8" />
+            <span className="navbar-text">Profile</span>
+          </a>
+        </div>
+      </nav>
+      <Notifbar isOpen={notifbarOpen} onClose={() => setNotifbarOpen(false)} />
+    </>
   );
 };
 

client/src/components/notifbar.css

@@ -0,0 +1,32 @@
+.notifbar {
+    position: fixed;
+    top: 0;
+    left: 240px; /* Start just to the right of the VerticalNavbar */
+    width: 0; /* Initially hidden */
+    height: 100vh;
+    background-color: rgb(0, 0, 0);
+    color: #fff;
+    overflow: hidden; /* Hide content until opened */
+    transition: width 0.3s ease; /* Animate the width change */
+    z-index: 999; /* Ensure it appears above the main content */
+  }
+
+  .notifbar.open {
+    width: 300px; /* Extend width when open */
+  }
+
+  .notifbar-close {
+    background: none;
+    border: none;
+    color: #fff;
+    font-size: 20px;
+    position: absolute;
+    top: 20px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  .notifbar-content {
+    padding: 20px;
+  }
+

client/src/components/profvnavbar.css

@@ -0,0 +1,63 @@
+.prof-vertical-navbar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 240px; 
+    height: 100vh;
+    background-color: #000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding-top: 20px; /* adjust spacing from the top */
+  }
+
+  .prof-navbar-logo {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    margin-bottom: 40px; /* spacing below the logo */
+    margin-right: 90px;
+  }
+
+  .prof-logo-text {
+    margin-left: 15px;
+    font-size: 30px;
+  }
+
+  .prof-logo-text a{
+    text-decoration: none;
+  }
+
+  .prof-logo-purple {
+    color: #D3C2F8;
+  }
+  .prof-navbar-links {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-left: 20px;
+
+  }
+
+  .prof-navbar-link {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    text-decoration: none;
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 10px;
+    width: 75%; /* background highlight width for link elements */
+    box-sizing: border-box; /* include padding in width calculation */
+    transition: background-color 0.2s ease; /* transition for background color */
+  }
+
+  .prof-navbar-link:hover {
+    background-color: #1B1A1A;
+  }
+
+  .prof-navbar-text {
+    margin-left: 14px; /* spacing between icon and text */
+    font-size: 20px;
+  }
+

client/src/pages/Postings/Postings.jsx

@@ -1,32 +1,109 @@
 import React from 'react';
 import './postings.css';
+import { useNavigate } from 'react-router-dom';
+import { motion } from "framer-motion"
+import VerticalNavbar from "../../components/VerticalNavbar";
 
-function Postings() {
+
+const Postings = () => {
+    const navigate = useNavigate();
+
+    const handleClick = () => {
+      navigate('/EditProfile'); // Navigate to the Edit Profile page
+    };
     return (
-      <>
-        <div id="main">
-          <div id="hero">
-            <div id="nav">
-            </div>
-            <div className="left">
-              <div id="header">
+        <div>
+            <VerticalNavbar />
+
+            <header className="postings-header">
+                <div className="profile-info">
+                    <div className="profile-pic-holder"></div>
+                    <h2>First Name Last Name - Location</h2>
+                </div>
+                <div className="bttns">
+                    <button id="btn-edit-pf" onClick={handleClick}>Edit Profile</button>
+                </div>
+            </header>
+            <header className="line"></header>
+
+            <div className="profile-container">
 
-                <div className="buttons">
-                  <button id="btn-edit">Edit Profile</button>
+
+                <div className="gallery">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
                 </div>
-              </div>
-              <div style={{ borderTop: "2px solid #fff ", marginLeft: 20, marginRight: 20 }}></div>
-              <div class="container">
-                <div class="box" id="box1">Post 1</div>
-                <div class="box" id="box2">Post 2</div>
-                <div class="box" id="box3">Post 3</div>
-                <div class="box" id="box4">Post 4</div>
-              </div>
             </div>
-          </div>
         </div>
-      </>
     );
-  }
+};
+
+export default Postings;
+
+// const Postings = () => {
+//   return <Container maxW="container.lg" py={5}>
+//   <Flex
+//   py={10}
+//   px={4}
+//   pl={{base:4, md:10}}
+//   w={"full"}
+//   mx={"auto"}
+//   flexDirection= {"column"}
+//   >
+//     <ProfileHeader />
+
+//   </Flex>
+//   <Flex>
+//     px={{base:2, sm:4}};
+//     maxW={"full"}
+//     mx={"auto"}
+//     borderTop={"1px solid"}
+//     borderColor={"whiteAlpha.300"}
+//     direction={"column"}
+//     <ProfileTabs/>
+//     <ProfilePosts/>
+//   </Flex>
+//   </Container>;
+// };
+
+// export default Postings;
+
+// function Postings() {
+//     return (
+//       <>
+//         <div id="main">
+//           <div id="hero">
+//             <div id="nav">
+//             </div>
+//             <div className="left">
+//               <div id="header">
+
+//                 <div className="buttons">
+//                   <button id="btn-edit">Edit Profile</button>
+//                 </div>
+//               </div>
+//               <div style={{ borderTop: "2px solid #fff ", marginLeft: 20, marginRight: 20 }}></div>
+//               <div class="container">
+//                 <div class="box" id="box1">Post 1</div>
+//                 <div class="box" id="box2">Post 2</div>
+//                 <div class="box" id="box3">Post 3</div>
+//                 <div class="box" id="box4">Post 4</div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </>
+//     );
+//   }
 
-  export default Postings;
+//   export default Postings;