diff --git a/CHANGELOG.md b/CHANGELOG.md index f7b8eb35..8b3ecb0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ ## Neste versjon - 🎨 **Designendringer**. Kalenderen på arrangementer er oppdatert +- ⚡ **Ytelse** Optimaliserte ytelsen ved å fjerne unødvendige oppdateringer av navigasjonsbaren. ## Versjon 2025.15.01 - ⚡ **Kopier link**. Man kan nå kopiere forkortede linker. diff --git a/src/components/navigation/Topbar.tsx b/src/components/navigation/Topbar.tsx index 87718c90..af1b7502 100644 --- a/src/components/navigation/Topbar.tsx +++ b/src/components/navigation/Topbar.tsx @@ -1,10 +1,8 @@ import { cn } from 'lib/utils'; -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; import URLS from 'URLS'; -import useMediaQuery, { MEDIUM_SCREEN } from 'hooks/MediaQuery'; - import TihldeLogo from 'components/miscellaneous/TihldeLogo'; import { NavigationItem } from 'components/navigation/Navigation'; import ProfileTopbarButton from 'components/navigation/ProfileTopbarButton'; @@ -60,46 +58,29 @@ export type TopbarProps = { }; const Topbar = ({ items }: TopbarProps) => { - const [scrollLength, setScrollLength] = useState(0); - const isMediumScreen = useMediaQuery(MEDIUM_SCREEN); - - const handleScroll = () => setScrollLength(window.pageYOffset); + const [isOnTop, setIsOnTop] = useState(false); useEffect(() => { - window.addEventListener('scroll', handleScroll, { passive: true }); + function handleScroll() { + setIsOnTop(window.scrollY < 20); + } + window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); - }, []); - - const isOnTop = useMemo(() => scrollLength < 20, [scrollLength]); - - if (!isMediumScreen) { - return ( -
- - {' '} - - -
- ); - } + }, [setIsOnTop]); return ( <>
-