Merge pull request #75 from wethmiranasinghe/main

HeaderNavbarLeft Updated
cepdnaclk · Sep 7, 2024 · 82f9e7f · 82f9e7f
2 parents 997fc37 + 045ae01
commit 82f9e7f
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 37 deletions.
diff --git a/front-end/src/assets/CYCLE-logo.png b/front-end/src/assets/CYCLE-logo.png
diff --git a/front-end/src/assets/X.png b/front-end/src/assets/X.png
diff --git a/front-end/src/assets/erasmus-plus-logo.png b/front-end/src/assets/erasmus-plus-logo.png
diff --git a/front-end/src/components/Header.css b/front-end/src/components/Header.css
@@ -1,8 +1,6 @@
 :root {
     font-weight: 400;
     color-scheme: light dark;
-    color: rgba(0, 0, 0, 0.87);
-    background-color: #ffffff;
     text-decoration: none;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
@@ -196,7 +194,7 @@
 
 .adminNavBar {
   display: flex;
-  justify-content: right;
+  justify-content: space-between;
   align-items: center;
   position: relative;
   flex-direction: row;
@@ -205,9 +203,11 @@
   position: fixed;
   top: 0rem;
   width: 100%;
+  color: #ffffff;
   height: 25px;
   background-color: #334195;
   z-index: 1000; /* Ensure it's above the headerNavBar */
+  text-decoration: none;
 }
 
 .adminNavBar div{
@@ -216,20 +216,39 @@
 }
 /* Left side of theTop Navigation Bar for Administration*/
 
-.headerNavBarLeft{
+/* Left side of the Top Navigation Bar for Administration */
+.headerNavBarLeft {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start	;
   box-sizing: border-box;
   transition: transform 2s ease, opacity 0.5s ease;
-  position: relative;
-  /* padding-right: 1%; */
+  position: absolute; /* Ensure it's positioned absolutely */
+  left: 0; /* Align to the left side */
+  top: -1.5rem; 
+  list-style: none;
+  color: #ffffff; /* Set text color to white */
+  padding: 0.5rem;
 }
+
+.headerNavBarLeft li a {
+  display: block;
+  text-decoration: none;
+  justify-content: space-between;
+  color: #ffffff; /* Ensure the links have white color */
+  padding: 0.5rem;
+  margin: 0 0.5rem;
+  white-space: nowrap;
+}
+
+.headerNavBarLeft li a:hover {
+  color: rgba(219, 238, 251, 0.9); /* Optional hover effect */
+  border-radius: 5px;
+}
+
 .headerNavBarRight{
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: right;
   align-items: flex-end;
   box-sizing: border-box;
   transition: transform 2s ease, opacity 0.5s ease;
@@ -244,49 +263,49 @@
 
 /* Right side of theTop Navigation Bar for Administration*/
 
-.adminNavBarRight{
+/* Right side of the Top Navigation Bar for Administration */
+.adminNavBarRight {
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   transition: transform 2s ease, opacity 0.5s ease;
-  position: relative;
-  padding:0;
-  right: 2.5%;
-  margin:0;
+  position: absolute; /* Ensure it's positioned absolutely */
+  right: 0.5rem; /* Align to the right side */
+  top: 0.2rem; /* Optional: adjust the vertical positioning if needed */
+  padding: 0;
+  margin: 0;
   color: #ffffff;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
-.adminNavBarRight li { 
+.adminNavBarRight li {
   list-style: none;
-  position: relative;  
-  color: rgb(255, 255, 255);
+  position: relative;
+  color: #ffffff;
   text-decoration: none;
   border: none;
   padding: 0px 10px;
   display: inline-block;
-  font-size: 22px;  
+  font-size: 22px;
   cursor: pointer;
-  float: left;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
 }
 
-.adminNavBarRight li :hover{
+.adminNavBarRight li:hover {
   transform: scale(1.03);
   opacity: 0.8;
 }
 
-.adminNavBarRight img{
+.adminNavBarRight img {
   width: 32px;
   border-radius: 50%;
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 0;
   align-self: center;
 }
-
 #switchLabel{
   font-size: 14px; 
   color:rgb(255, 255, 255);
@@ -422,6 +441,9 @@
 
   /* Media queries for responsiveness */
   @media screen and (max-width: 1485px) {
+    .headerNavBarLeft {
+    top: -1.3rem;
+  }
     .logo-block {
         display: flex;
         justify-content: space-between;
@@ -435,10 +457,6 @@
     .Cycle-Logo {
         width: 230px; /* smaller width for medium screens */
     }
-    h1 {
-      font-size: 4em;
-      font-weight: 700;
-    }
 
     h2 {
       font-size: 1.2em;
@@ -456,6 +474,14 @@
   /* Media queries for responsiveness */
 @media screen and (max-width: 1165px) {
 
+  .headerNavBarLeft {
+    top: -1.3rem;
+  }
+
+  .headerNavBarLeft {
+    top: -1.2rem;
+  }
+
   .headerNavBarLeft li a { 
     padding: 8px 10px;
     font-size: 13px;
@@ -483,6 +509,10 @@
 
 @media (max-width: 968px) {
 
+  .headerNavBarLeft {
+    display: none;
+  }
+
   h1 {
     font-size: 3em;
     font-weight: 700;
@@ -517,6 +547,8 @@
     align-items: flex-start;
     width: 100%;
     position: relative;
+    top: -65px;
+    height: 1rem;
   }
 
   .headerNavBar ul{

diff --git a/front-end/src/components/Header.jsx b/front-end/src/components/Header.jsx
@@ -3,7 +3,7 @@ import {Link, Outlet, useLocation,useNavigate} from 'react-router-dom';  // //Ad
 
 import Switch from "react-switch";
 import cylcleLogo from '../assets/CYCLE-logo.png';
-import erasmusLogo from '../assets/erasmus-plus-logo.jpg';
+import erasmusLogo from '../assets/erasmus-plus-logo.png';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMessage, faBell, faAngleRight, faUser, faUserCircle, faFile,faCalendarDays,faBars } from '@fortawesome/free-solid-svg-icons';
 import {loggedInUser} from '../Pages/Login'
@@ -116,12 +116,6 @@ function closeOnClickOutside(selector, toggleClass) {
                 <FontAwesomeIcon icon={faBars} />   
                 </div>
                 <ul className= {menuOpen ? "open" : ""}>
-                <ul className="headerNavBarLeft">
-                    {/* Display Admin Nav Bar Left List Items here only if min-width: 968px and the user has logged in*/}
-                    {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/dashboard'>DASHBOARD</Link></li>}
-                    {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/project management'>PROJECT MANAGEMENT</Link></li>}
-                    {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/repository'>REPOSITORY</Link></li>}
-                </ul>
                 <ul className="headerNavBarRight">
 
                     <li><Link to = '/' onClick={handleLinkClick}>Home</Link></li>
@@ -150,7 +144,13 @@ function closeOnClickOutside(selector, toggleClass) {
 
             {/* Top Navigation Bar for Administration  */}
             <div>
-                <nav class="adminNavBar" >                
+                <nav class="adminNavBar" >   
+                <ul className="headerNavBarLeft">
+                    {/* Display Admin Nav Bar Left List Items here only if min-width: 968px and the user has logged in*/}
+                    {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/dashboard'>DASHBOARD</Link></li>}
+                    {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/project management'>PROJECT MANAGEMENT</Link></li>}
+                    {loggedInUserState && <li className='adminNavBarLeftListItem'><Link to = '/admin/repository'>REPOSITORY</Link></li>}
+                </ul>             
                 {isVisible && <div className='top-login-bar'><Link to = '/login'><button className="Login-button" onClick={handleLinkClick}>LOGIN</button></Link></div>}
                     <div>
                         <ul className={loggedInUserState ? "adminNavBarRight":"non-logged-user-panel"}>