Make navbar take up entire width (#109)

Vero-Ventures · May 28, 2024 · c54c66d · c54c66d
1 parent 44e4ecf
commit c54c66d
Showing 1 changed file with 45 additions and 43 deletions.
diff --git a/src/app/admin-panel/home/page.js b/src/app/admin-panel/home/page.js
@@ -163,55 +163,57 @@ export default function Home() {
   };
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
+    <div className="w-full">
       <Navbar links={links} />
-      <div className="flex items-center justify-between border-b-2 border-gray-200 py-6 md:justify-start md:space-x-10">
-        <div className="flex justify-start lg:w-0 lg:flex-1">
-          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate mb-4">
-            My Job Postings
-          </h2>
-          {/* Render user email if user data is available */}
-        </div>
-        <div className="md:flex items-center justify-end md:flex-1 lg:w-0">
-          <Button
-            className="whitespace-nowrap text-base leading-6 font-medium"
-            variant="secondary"
-            onClick={() => setShowForm(true)}>
-            Add New Job Posting
-          </Button>
-        </div>
-      </div>
-      {/* Render the form as a modal */}
-      {showForm && (
-        <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50">
-          <div className="bg-white p-2 rounded shadow-lg max-h-[90vh] w-full max-w-4xl overflow-y-auto">
-            <AddJobPostingForm
-              onSubmit={handleFormSubmit}
-              email={user.email}
-              onClose={() => setShowForm(false)}
-            />
-            {/* <button
-              className="close-icon absolute top-0 right-0 p-2 text-gray-500 hover:text-gray-700"
-              onClick={() => setShowForm(false)}></button> */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
+        <div className="flex items-center justify-between border-b-2 border-gray-200 py-6 md:justify-start md:space-x-10">
+          <div className="flex justify-start lg:w-0 lg:flex-1">
+            <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate mb-4">
+              My Job Postings
+            </h2>
+            {/* Render user email if user data is available */}
+          </div>
+          <div className="md:flex items-center justify-end md:flex-1 lg:w-0">
+            <Button
+              className="whitespace-nowrap text-base leading-6 font-medium"
+              variant="secondary"
+              onClick={() => setShowForm(true)}>
+              Add New Job Posting
+            </Button>
           </div>
         </div>
-      )}
-      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mt-5">
-        {loading ? (
-          <p>Loading...</p>
-        ) : jobPostings.length > 0 ? (
-          jobPostings.map(posting => (
-            <div key={posting._id}>
-              <Card
-                jobPostingId={posting._id}
-                posting={posting}
-                onDelete={handleDelete}
+        {/* Render the form as a modal */}
+        {showForm && (
+          <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50">
+            <div className="bg-white p-2 rounded shadow-lg max-h-[90vh] w-full max-w-4xl overflow-y-auto">
+              <AddJobPostingForm
+                onSubmit={handleFormSubmit}
+                email={user.email}
+                onClose={() => setShowForm(false)}
               />
+              {/* <button
+              className="close-icon absolute top-0 right-0 p-2 text-gray-500 hover:text-gray-700"
+              onClick={() => setShowForm(false)}></button> */}
             </div>
-          ))
-        ) : (
-          <p>No job postings found.</p>
+          </div>
         )}
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mt-5">
+          {loading ? (
+            <p>Loading...</p>
+          ) : jobPostings.length > 0 ? (
+            jobPostings.map(posting => (
+              <div key={posting._id}>
+                <Card
+                  jobPostingId={posting._id}
+                  posting={posting}
+                  onDelete={handleDelete}
+                />
+              </div>
+            ))
+          ) : (
+            <p>No job postings found.</p>
+          )}
+        </div>
       </div>
     </div>
   );