From 70e9f121bb7ac649fedff992fcb435dd867e655b Mon Sep 17 00:00:00 2001 From: Wethmi Ranasinghe Date: Sun, 23 Jun 2024 00:15:54 +0530 Subject: [PATCH] Admin navbar updated --- front-end/{ => src}/App.css | 0 front-end/src/App.jsx | 2 +- front-end/src/Pages/Home.jsx | 1 - front-end/src/components/Header.css | 37 +++++++++++++++++----- front-end/src/components/Header.jsx | 36 ++++++++------------- front-end/src/pageStyling/Login.module.css | 20 ------------ 6 files changed, 43 insertions(+), 53 deletions(-) rename front-end/{ => src}/App.css (100%) delete mode 100644 front-end/src/pageStyling/Login.module.css diff --git a/front-end/App.css b/front-end/src/App.css similarity index 100% rename from front-end/App.css rename to front-end/src/App.css diff --git a/front-end/src/App.jsx b/front-end/src/App.jsx index 5de40752..289a33eb 100644 --- a/front-end/src/App.jsx +++ b/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'; diff --git a/front-end/src/Pages/Home.jsx b/front-end/src/Pages/Home.jsx index a7f05b89..7e31a40d 100644 --- a/front-end/src/Pages/Home.jsx +++ b/front-end/src/Pages/Home.jsx @@ -100,7 +100,6 @@ const partnerInfo = [ ] function Home(){ - return( <> {/* image slider */} diff --git a/front-end/src/components/Header.css b/front-end/src/components/Header.css index fcb6592c..abd7ddea 100644 --- a/front-end/src/components/Header.css +++ b/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; diff --git a/front-end/src/components/Header.jsx b/front-end/src/components/Header.jsx index 272e5a04..47dca395 100644 --- a/front-end/src/components/Header.jsx +++ b/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(
{/* Top Navigation Bar for Administration */} @@ -58,7 +62,6 @@ function Header(){
    - {isEditMode ? "Edit Mode" : "View Mode"}

  • Messages

-
- +
- // Update the visibility of the login button based on the current location - useEffect(() => { - if (location.pathname === '/login') { - setIsVisible(false); - } else { - setIsVisible(true); - } - }) - - return( -
-
- {isVisible && } -
+
{isVisible && }
{/* Erasmus logo */} @@ -157,6 +146,7 @@ function Header(){ {/* Cycle logo */} Cycle Logo
+ {/* Sub heading */}

CYberseCurityLEarning: Master's degree in Cybersecurity

@@ -199,4 +189,4 @@ function Header(){ ); } -export default Header \ No newline at end of file +export default Header; \ No newline at end of file diff --git a/front-end/src/pageStyling/Login.module.css b/front-end/src/pageStyling/Login.module.css deleted file mode 100644 index e91e684d..00000000 --- a/front-end/src/pageStyling/Login.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.Login-button{ - position: absolute; - display: flex; - align-self: flex-start; - top: 30px; - right: 30px; - padding: 10px 22px; - 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; -} -