Merge pull request #24 from wethmiranasinghe/main

Admin navbar updated

front-end/src/App.jsx

@@ -3,10 +3,10 @@ import {BrowserRouter, Routes, Route} from 'react-router-dom';  //Add page routi
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import './components/Header.css'
-// import './components/Footer.css'
 import './components/Overview.css'
 import './components/Contact.css'
 
+
 import Login from './Pages/Login';
 import Home from './Pages/Home';
 import Team from './Pages/Team';

front-end/src/Pages/Home.jsx

@@ -100,7 +100,6 @@ const partnerInfo = [
 ]
 
 function Home(){
-
   return(
       <>
       {/* image slider  */}

front-end/src/components/Header.css

@@ -41,14 +41,34 @@
     font-size: 1.5em;
     margin-top: 0px;
   }
-
+
+  /* Login button */
+.Login-button{
+  position: absolute;
+  display: flex;
+  align-self: flex-start;
+  right: 30px;
+  margin-top: 10px;
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #203a90;
+  text-decoration: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.Login-button:hover {
+  background-color: #0056b3;
+}
   .logo-block{
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 0px;
     padding: 0px 0px;
     margin-bottom: 0px;
+    margin-top: 20px;
     box-sizing: border-box;
     transition: transform 2s ease, opacity 0.5s ease;
   }
@@ -78,9 +98,6 @@
   justify-content: center;
   align-items: center;
   background-color: #172953;
-  position: sticky;
-  top: 96px;
-  z-index: 2;
   padding: 1rem;
   height: 2rem;
 }
@@ -158,16 +175,18 @@
 /* CSS Styling - Top Navigation Bar for Administration  */
 
 .adminNavBar{
+  position: absolute;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 20px 20px;
+  padding: 8px 15px;
   position: sticky;
   top: 0;
-  background-color: white;
+  background-color: rgb(205, 234, 246);
+  z-index: 1000;
 }
 .adminNavBar div{
   margin :0;
@@ -198,7 +217,7 @@
   background-color: white;
   border: 2px solid rgb(50, 78, 148);
   border-radius: .25rem;
-  padding: 15px 15px;
+  padding: 8px 10px;
   text-align: center;
   display: inline-block;
   font-size: 16px;
@@ -261,6 +280,8 @@
   color:rgb(50, 78, 148);
 }
 
+
+
 /* Dropdown menu - User Account  */
 .userAccount-Open{
   position : absolute;

front-end/src/components/Header.jsx

@@ -2,17 +2,12 @@ import React, {useState, useEffect} from 'react';
 import {Link, Outlet, useLocation} from 'react-router-dom';  // //Add page routing using router dom
 
 import Switch from "react-switch";
-
 import cylcleLogo from '../assets/CYCLE-logo.png';
 import erasmusLogo from '../assets/erasmus-plus-logo.jpg';
-
 import profilePic from '../assets/ProPic_UJ.jpg'
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMessage, faBell, faAngleRight, faUser, faFile,faCalendarDays } from '@fortawesome/free-solid-svg-icons';
 
-import style from '../pageStyling/Login.module.css';
-
 
 function Header(){
     // Constants for hamburger menu
@@ -45,6 +40,15 @@ function Header(){
     const [showNotifications, setShowNotifications] = useState(false);
     const [showAccount, setShowAccount] = useState(false);
 
+    // Update the visibility of the login button based on the current location
+    useEffect(() => {
+        if (location.pathname === '/login') {
+            setIsVisible(false);
+        } else {
+            setIsVisible(true);
+        }
+    })
+
     return(
         <header>
             {/* Top Navigation Bar for Administration  */}
@@ -58,7 +62,6 @@ function Header(){
                 </div>
                 <div>
                     <ul className="adminNavBarRight">                  
-
                         <span id="switchLabel">{isEditMode ? "Edit Mode" : "View Mode"}</span>
                         <li><Switch 
                                     onChange={handleToggle} 
@@ -128,24 +131,10 @@ function Header(){
                 <div className="siderBarTitle">
                     <h3>Messages</h3>
                 </div>
-                <hr></hr>                       
-
+                <hr></hr>                        
             </div>
 
-    // Update the visibility of the login button based on the current location
-    useEffect(() => {
-        if (location.pathname === '/login') {
-            setIsVisible(false);
-        } else {
-            setIsVisible(true);
-        }
-    })
-
-    return(
-        <header>
-            <div>
-            {isVisible && <button className={style["Login-button"]}><Link to = '/login' onClick={handleLinkClick}>LOGIN</Link></button>}
-            </div>
+            <div>{isVisible && <button className="Login-button"><Link to = '/login' onClick={handleLinkClick}>LOGIN</Link></button>}</div>
 
             <div className='logo-block'>
             {/* Erasmus logo */}
@@ -157,6 +146,7 @@ function Header(){
             {/* Cycle logo */}
             <img src={cylcleLogo} alt="Cycle Logo" className="Cycle-Logo"></img>
             </div>
+
 
             {/* Sub heading */}
             <h2><span style={{ color:'rgb(50, 78, 148)'}}>CYberseCurityLEarning: Master's degree in Cybersecurity</span></h2>
@@ -199,4 +189,4 @@ function Header(){
     );
 }
 
-export default Header
+export default Header;