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 (
<>
-