refactor: 630 - header to change color via css

rolling-scopes · Nov 4, 2024 · c4e8eb1 · c4e8eb1
1 parent 1f70018
commit c4e8eb1
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 65 deletions.
diff --git a/src/core/base-layout/components/header/header.module.scss b/src/core/base-layout/components/header/header.module.scss
@@ -8,25 +8,9 @@
   height: 64px;
   padding: 0 40px;
 
-  border-radius: 0;
-
-  transition: background-color 0.2s;
-
-  &.gray {
-    background-color: $color-yellow-500;
-  }
-
-  &.none {
-    display: none;
-  }
-
-  &.white {
-    opacity: 1;
-    background-color: rgb(255 255 255);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    box-shadow: rgb(0 0 0 / 8.2%) 0 1.026px 8.0694px 0;
-  }
+  background-color: rgb(255 255 255 / 10%);
+  backdrop-filter: blur(24px) saturate(1);
+  box-shadow: rgb(0 0 0 / 8.2%) 0 1.026px 8.0694px 0;
 
   @include media-tablet {
     height: 48px;

diff --git a/src/core/base-layout/components/header/header.test.tsx b/src/core/base-layout/components/header/header.test.tsx
@@ -26,12 +26,6 @@ describe('Header', () => {
       expect(headerElement).toBeInTheDocument();
     });
 
-    it('set color as gray when scrollbar is at the top', () => {
-      const headerElement = screen.getByTestId('navigation');
-
-      expect(headerElement).toHaveClass(cxHeader('gray'));
-    });
-
     it('renders all the header links', () => {
       const headerElement = screen.getAllByText(/.*/, { selector: `span.${cxNavItem('label')}` });
 

diff --git a/src/core/base-layout/components/header/header.tsx b/src/core/base-layout/components/header/header.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import classNames from 'classnames/bind';
-import { usePathname } from 'next/navigation';
 import { BurgerMenu } from './burger/burger';
 import { NavItem } from './nav-item/nav-item';
 import { ROUTES } from '@/core/const';
@@ -34,50 +33,13 @@ const navLinks = [
 
 export const Header = () => {
   const [isMenuOpen, setMenuOpen] = useState(false);
-  const [color, setColor] = useState('gray');
-  const [hash, setHash] = useState('');
-  const [key, setKey] = useState('');
-  const pathname = usePathname();
 
   const toggleMenu = () => {
     setMenuOpen((prev) => !prev);
   };
 
-  useEffect(() => {
-    const listenScrollEvent = () => {
-      const scrollY = window.scrollY;
-
-      // setting the class depending on the scrolled height
-      // class changes the background color of the header
-      if (scrollY < 500) {
-        setColor('gray');
-      } else {
-        setColor('white');
-      }
-    };
-
-    window.addEventListener('scroll', listenScrollEvent);
-
-    return () => {
-      window.removeEventListener('scroll', listenScrollEvent);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setHash(window.location.hash);
-      setKey(window.location.href);
-    }
-  }, [pathname]);
-
-  useEffect(() => {
-    if (location.pathname) {
-      setMenuOpen(false);
-    }
-  }, [key, hash, pathname]);
-
   return (
-    <nav className={cx('navbar', color)} data-testid="navigation">
+    <nav className={cx('navbar')} data-testid="navigation">
       <section className={cx('navbar-content')}>
         <Logo />