Navbar

sau-mili · May 27, 2024 · f67b117 · f67b117
1 parent b7dcabe
commit f67b117
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/src/components/Dashboard/Dashboard.css b/src/components/Dashboard/Dashboard.css
@@ -21,21 +21,32 @@
   transition: 0.6s;
 }
 .navbar.fixed{
-  padding: 2px 0px;
-  margin: 0px 5px;
-  top:0px;
-  background-color:rgba(178, 211, 229, 0.8);
-  backdrop-filter: blur(0.5px);
-  box-shadow: 1px 1px 1px 1px rgba(113, 113, 113, 0.5);
-  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0px;
+  color: white;
+}
+.navbar.fixed .menu ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 60px;
+  float: right;
+  padding: 0px 30px;
+  align-items: center;
+  background-color:#d3eafd8b;
+  border-top-left-radius: 50px;
+  border-bottom-left-radius: 50px;
 }
 
+
 .logo img {
   width: 75px;
   padding-left: 15px;
 }
 
-.menu {
+.navbar .menu {
   flex-direction: column;
   align-items: center;
   top: 70px;
@@ -50,7 +61,7 @@
   list-style: none;
   padding: 0;
   display: flex;
-  gap: 30px;
+  gap: 60px;
   float: right;
   padding: 0px 30px;
   align-items: center;
@@ -68,10 +79,10 @@
 
 .profile_btn {
   background-color: var(--btnColor);
-  border-radius: 15px;
+  border-radius: 10px;
   color: #F4F6FC;
   text-align: center;
-  padding: 10px 30px;
+  padding: 10px 40px;
   margin-right: 0.5vw;
   border: none;
   font-size: 22px;
@@ -87,15 +98,15 @@
 
 .menu a {
   text-decoration: none;
-  color: #12229d;
+  color: #00073e;
   font-size: 22px;
   :active{
     color:#303B5E;
   }
 }
 .menu a button{
   :hover{
-    background-color: #050A30;
+    background-color: #152280;
   }
 }
 
@@ -175,6 +186,13 @@
   opacity: 1;
   pointer-events: auto;
 }
+.dot {
+  height: 18px;
+  width: 18px;
+  background-color:#050A30;
+  border-radius: 50%;
+
+}
 
 
 @media (max-width: 960px) {

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
@@ -83,11 +83,12 @@ window.addEventListener("scroll", setFixed)
     <>
       <main>
         <ScrollToTop color="white" style={{ backgroundColor: "#5CB6F9" }} />
-        <nav className="navbar">
+        <nav className={`navbar ${fix ? 'fixed' : ''}`}>
           <div className="logo">
             <img src={Logo} alt="Logo" />
           </div>
-          <div className={`menu ${menuOpen ? "show" : ""}`}>
+          {/* <div className={`menu ${menuOpen ? "show" : ""}`}> */}
+          <div className="menu">
             <ul>
               <li>
                 <a href="#">Top Universities</a>
@@ -102,7 +103,7 @@ window.addEventListener("scroll", setFixed)
                 <a href="#">Career Support</a>
               </li>
               <li className="dot">
-                <a href="#">•</a>
+                <a href="#"></a>
               </li>
               <li>
                 <a href="#" onClick={handleSignOut}>