feat: add navigation bar component to app.jsx along with styling updates

cherryontech · Dec 2, 2023 · 2e8f8e5 · 2e8f8e5
1 parent a7d3ba7
commit 2e8f8e5
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 32 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,9 +5,11 @@ import { LoginPage } from "./pages/Login/index";
 import { RoadmapPage } from "./pages/RoadmapPage/index";
 import TaskCard from "./pages/TaskCard/TaskCard"
 import Articles from "./pages/Articles/index";
+import { NavigationBar } from "./components/NavigationBar";
 function App() {
   return (
-      <Router>
+    <Router>
+            <NavigationBar />
         <Routes>
           <>
             <Route path="/" element={<LandingPage />} />

diff --git a/src/components/NavigationBar/index.jsx b/src/components/NavigationBar/index.jsx
@@ -21,6 +21,8 @@ export const NavigationBar = () => {
   }, []);
 
   return (
+    <div className="top-nav-bar">
+    <div className="div-wrapper">
     <Navbar>
       <NavbarBrand>
         <div
@@ -45,12 +47,12 @@ export const NavigationBar = () => {
           </NavbarItem>
         ) : (
           <>
-            <NavbarItem className="nav-button mt-5">
+            <NavbarItem className="nav-button mt-20 mb-20">
               <Link color="login" href="/login" className="login-text">
                 Login
               </Link>
             </NavbarItem>
-            <NavbarItem className="nav-button mt-5">
+            <NavbarItem className="nav-button mt-20 mb-20">
               <Button as={Link} href="/signup" className="signup-text">
                 Sign Up
               </Button>
@@ -59,6 +61,8 @@ export const NavigationBar = () => {
         )}
       </NavbarContent>
     </Navbar>
+    </div>
+  </div>
   );
 };
 

diff --git a/src/components/NavigationBar/style.css b/src/components/NavigationBar/style.css
@@ -41,4 +41,19 @@ background-clip: text;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
+}
+
+.top-nav-bar {
+  height: 98px;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 1440px;
+  margin-bottom: 20px;
+  z-index: 1;
+}
+
+.div-wrapper {
+  height: 98px;
+  position: relative;
 }
diff --git a/src/pages/LandingPage/index.jsx b/src/pages/LandingPage/index.jsx
@@ -2,19 +2,13 @@ import { Buttons } from "../../components/Buttons";
 import "./style.css";
 import finalHomepage from "../../assets/finalHomepage.png"
 import { useNavigate } from "react-router-dom";
-import { NavigationBar } from "../../components/NavigationBar";
 
 export const LandingPage = () => {
   const navigateTo = useNavigate()
 
   return (
     <div className="landing-page">
       <div className="div">
-        <div className="top-nav-bar">
-          <div className="div-wrapper">
-          <NavigationBar />
-          </div>
-        </div>
         <div className="overlap">
           <div className="landing-section">
             <img className="image" alt="Image" src={finalHomepage} />

diff --git a/src/pages/LandingPage/style.css b/src/pages/LandingPage/style.css
@@ -14,19 +14,6 @@
     width: 1440px;
   }
 
-  .landing-page .top-nav-bar {
-    height: 84px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 1440px;
-  }
-
-  .landing-page .div-wrapper {
-    height: 84px;
-    position: relative;
-  }
-
   .landing-page .text-wrapper {
     color: #001561;
     font-family: "Lato", Helvetica;

diff --git a/src/pages/RoadmapPage/index.jsx b/src/pages/RoadmapPage/index.jsx
@@ -5,7 +5,6 @@ import { LinearPathCard } from "../../components/LinearPathCard";
 import { ScrollShadow } from "@nextui-org/react";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
-import { NavigationBar } from "../../components/NavigationBar";
 
 export const RoadmapPage = () => {
   return (
@@ -16,12 +15,6 @@ export const RoadmapPage = () => {
         All you need for job search success in one place!
       </p>
 
-      <div className="top-nav-bar">
-      <div className="div-wrapper">
-      <NavigationBar />
-        </div>
-      </div>
-
       <img className="img" src="src/assets/RoadmapHeroImage.png" />
 
       <div className="overlap">

diff --git a/src/pages/TaskCard/Card.jsx b/src/pages/TaskCard/Card.jsx
@@ -54,7 +54,7 @@ export default function TCard({
   };
 
   return (
-    <div key={index} className="flex justify-around m-5 ">
+    <div key={index} className="flex justify-around m-5 z-0">
       <Card
         shadow="none"
         className={`w-5/6`}
@@ -71,7 +71,7 @@ export default function TCard({
           }`,
         }}
       >
-        <CardHeader className="flex justify-between items-center px-3">
+        <CardHeader className="flex justify-between items-center px-3 z-0">
           <div className="flex ">
             <Checkbox
               isSelected={isChecked}

diff --git a/src/pages/TaskCard/TaskCard.jsx b/src/pages/TaskCard/TaskCard.jsx
@@ -77,7 +77,7 @@ export default function TaskCard() {
             You only get one shot at a first impression, so make it count!
           </p>
         </div>
-        <div className="w-2/5">
+        <div className="w-2/5 z-0">
           <Image src={mascot} sizes={"md"} />
         </div>
       </div>