diff --git a/src/assets/navbar-images/YDO-logo.png b/src/assets/navbar-images/YDO-logo.png index 4fc7b9b..4a5f69f 100644 Binary files a/src/assets/navbar-images/YDO-logo.png and b/src/assets/navbar-images/YDO-logo.png differ diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css index 3daa977..d9faed2 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/Navbar.css @@ -1,69 +1,239 @@ .nav-header{ - height: 82px; + height: 82px; + display: flex; + flex-direction: row; + justify-content: center; + position: fixed; + top: 10px; + left: 0; + right: 0; + background-color: transparent; + border: none; + margin-bottom: 2px; + font-size: 82px; +} +.nav-main{ + display: flex; + position: relative; + width: 85%; + align-items: center; + height: 100%; +} +.nav-middle{ + flex: 4; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-left: 10px; + margin-right: 5px; + height: 100%; + font-size: 100%; +} +.nav-left{ + display: flex; + justify-content: left; + flex: 2; + align-items: center; + flex-direction: row; + height: 100%; +} +.nav-right{ + display: flex; + justify-content: right; + flex-direction: row; + flex: 2; + align-items: center; + height: 100%; +} +.content{ + color: #F6CCB6; + font-size: 32%; + font-family: sans-serif; + letter-spacing: 2px; + margin-right: 10px; + position: relative; +} +.tool-set{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex: 0.5; + padding: 0; + height: 100%; +} +.notifications-YDO, +.Settings-YDO, +.Account-YDO{ + height: 34%; +} + +.YDO-logo{ + height: 99%; +} + + +.notifications-YDO:hover, +.Settings-YDO:hover, +.Account-YDO:hover, +.content:hover +{ + color: #F6CCB6; + filter: url(#pinkShadow); +} +.btn, +.btn:active, +.btn:focus { + display: flex; + justify-content: center; + border: 0; + outline: 0; + box-shadow: none ; + background-color: transparent; + align-items: center; + padding: 0; + padding-right: 10px; +} +.nav-indicator{ + background-color: #F6CCB6; + height: 2px; + display: block; + position: absolute; + bottom: 30%; + transform-origin: left; + transition: transform 0.6s ease,width 0.6s ease; + border-radius: 2px; + transform: translateX(0px); + opacity: 0; + width: 0; +} + +@media screen and (min-width: 700px) and (max-width: 850px) { + .nav-header{ + height: 75px; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: center; position: fixed; - top: 0; + top: 10px; left: 0; right: 0; background-color: transparent; border: none; margin-bottom: 2px; - z-index: 9999; + font-size: 75px; } - .nav-middle{ - flex: 1; + .nav-main{ display: flex; - flex-direction: row; - justify-content: space-between; + position: relative; + width: 90%; align-items: center; - margin-left: 15px; } - .content{ - color: #F6CCB6; - font-size: 25px; - font-family: sans-serif; - letter-spacing: 2px; - margin-right: 15px; +} + +@media screen and (min-width: 590px) and (max-width: 699px) { + .nav-header{ + height: 60px; + display: flex; + flex-direction: row; + justify-content: center; + position: fixed; + top: 10px; + left: 0; + right: 0; + background-color: transparent; + border: none; + margin-bottom: 2px; + font-size: 60px; } - .tool-set{ + .nav-main{ + display: flex; + position: relative; + width: 90%; + align-items: center; + } +} + +@media screen and (min-width: 520px) and (max-width: 590px){ + .nav-header{ + height: 52px; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: center; + position: fixed; + top: 10px; + left: 0; + right: 0; + background-color: transparent; + border: none; + margin-bottom: 2px; + font-size: 55px; + } + .nav-main{ + display: flex; + position: relative; + width: 96%; align-items: center; } - .notifications-YDO{ - height: 24px; - margin-right: 20px; +} +@media screen and (min-width: 430px) and (max-width: 519px){ + .nav-header{ + height: 45px; + display: flex; + flex-direction: row; + justify-content: center; + position: fixed; + top: 10px; + left: 0; + right: 0; + background-color: transparent; + border: none; + margin-bottom: 2px; + font-size: 45px; } - .Settings-YDO{ - height: 28px; - margin-right: 20px; + .content{ + color: #F6CCB6; + font-size: 32%; + font-family: sans-serif; + letter-spacing: 1px; + margin-right: 10px; + position: relative; } - .Account-YDO{ - height: 27px; - margin-right: 20px; + .nav-main{ + display: flex; + position: relative; + width: 98%; + align-items: center; } - .YDO-logo{ - height: 81px; - margin-right: 20px; +} +@media screen and (max-width: 429px){ + .nav-header{ + height: 35px; + display: flex; + flex-direction: row; + justify-content: center; + position: fixed; + top: 10px; + left: 0; + right: 0; + background-color: transparent; + border: none; + margin-bottom: 2px; + font-size: 35px; } - - - .notifications-YDO:hover, - .Settings-YDO:hover, - .Account-YDO:hover, - .content:hover - { + .content{ color: #F6CCB6; - filter: url(#redShadow); + font-size: 32%; + font-family: sans-serif; + letter-spacing: 0.5px; + margin-right: 10px; + position: relative; } - .active{ - color: #F6CCB6; - filter: url(#pinkShadow); + .nav-main{ + display: flex; + position: relative; + width: 99%; + align-items: center; } - .active:hover{ - color: #F6CCB6; - filter: url(#pinkShadow); - } \ No newline at end of file +} diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 47e376a..0f2c048 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,71 +1,107 @@ -import React from 'react' +import React, { useEffect, useRef, useState } from 'react' +import { useLocation } from 'react-router' import {NavLink} from 'react-router' import './Navbar.css' import YDO from '../../assets/navbar-images/YDO-logo.png' import notification from '../../assets/navbar-images/notification-YDO.png' import Account from '../../assets/navbar-images/Account-YDO.png' import Settings from '../../assets/navbar-images/Settings-YDO.png' -function Navbar() { + +function App() { + const Reference=useRef(null) + const location=useLocation() + const [initialLoad,setInitialLoad]=useState(true) + + const [windowSize, setWindowSize] = useState({ + width: window.innerWidth, + height: window.innerHeight, + }); + useEffect(() => { + const OnResize = () => { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + window.addEventListener('resize', OnResize); + OnResize(); + + return () => window.removeEventListener('resize', OnResize); + }, []); + + useEffect(()=>{ + const activePage=document.querySelector('.active') + const indicator=Reference.current; + if(activePage && indicator){ + const { offsetLeft, offsetWidth } = activePage; + indicator.style.transform =`translateX(${offsetLeft}px)`; + indicator.style.width = `${offsetWidth}px`; + } + if(initialLoad){ + indicator.style.transition='none'; + indicator.style.opacity='1'; + setInitialLoad(false) + } + else{ + indicator.style.transition='transform 0.8s ease,width 0.8s ease'; + } + },[location.pathname,windowSize]) + return ( <> - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - ); -}; + ) +} -export default Navbar; +export default App