feat: sticky navigation bar with style change on scroll

Author: pjuaristi-ikerlan

ichub-frontend/src/assets/styles/config/_variables.scss

@@ -32,6 +32,10 @@ $dark-blue-gradient-bg: linear-gradient(180deg, $dark-gradient-start 0%, $dark-g
 $header-gradient-end: rgba(0, 165, 255, 0.57);
 $header-gradient-bg: linear-gradient(180deg, $gradient-start 0%, $header-gradient-end 100%);
 
+$opaque-gradient-start: rgb(0, 42, 126);
+$opaque-gradient-end: rgb(0, 108, 167);
+$header-opaque-gradient-bg: linear-gradient(180deg, $opaque-gradient-start 0%, $opaque-gradient-end 100%);
+
 // Brand colors
 $brand-blue: rgb(1, 40, 119);
 $brand-light-blue: rgb(15, 113, 203);

ichub-frontend/src/assets/styles/layout/_Header.scss

@@ -30,6 +30,11 @@ header.ichub-header {
   border-bottom: 5px solid $brand-header-blue;
   padding: 0 !important;
   position: sticky !important;
+  transition: background-color 0.3s ease-in-out;
+
+  &.scrolled {
+    background: $header-opaque-gradient-bg;
+  }
 
   button.user-button {
     background-color: $brand-border;

ichub-frontend/src/assets/styles/layout/_MainLayout.scss

@@ -29,6 +29,12 @@
     url('/stars-background.png') !important;
 }
 
+.headerWrapper{
+  position: sticky;
+  top: 0;
+  z-index: 1100;
+}
+
 /* Content area styling */
 .contentArea {
   padding: 20px;

ichub-frontend/src/components/general/Header.tsx

@@ -20,7 +20,7 @@
  * SPDX-License-Identifier: Apache-2.0
 ********************************************************************************/
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -38,6 +38,7 @@ import { Logout, Settings } from '@mui/icons-material';
 export default function PrimarySearchAppBar() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState<null | HTMLElement>(null);
+  const [scrolled, setScrolled] = useState(false);
 
   const isMenuOpen = Boolean(anchorEl);
   const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
@@ -59,6 +60,15 @@ export default function PrimarySearchAppBar() {
     setMobileMoreAnchorEl(event.currentTarget);
   };
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   const menuId = 'primary-search-account-menu';
   const renderMenu = (
     <Menu
@@ -150,7 +160,7 @@ export default function PrimarySearchAppBar() {
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" className='ichub-header'>
+      <AppBar position="static" className={`ichub-header ${scrolled ? "scrolled" : ""}`}>
         <Toolbar>
           <a href="/">
             <img

ichub-frontend/src/layout/MainLayout.tsx

@@ -29,7 +29,7 @@ import Sidebar from '../components/general/Sidebar';
 function MainLayout() {
   return (
     <Grid2 container direction="column" className="contentWrapper">
-      <Grid2>
+      <Grid2 className="headerWrapper">
         <Header/>
       </Grid2>
       <Grid2 container className="pageWrapper" spacing={2}>