mirror/myspeed
1
0
Fork 0
mirror of https://github.com/gnmyt/myspeed.git synced 2026-02-11 08:08:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix pagination layout issue

Browse Source
This commit is contained in:
Mathias Wagner
2026-01-20 00:05:45 +01:00
parent e9cdbe1dd3
commit b6f88c70fb
1 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
client/src/common/components/Header/components/Pagination/Pagination.jsx
View File

@@ -2,7 +2,7 @@ import "./styles.sass";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChartArea, faListUl } from "@fortawesome/free-solid-svg-icons";
import { useLocation, useNavigate } from "react-router-dom";
import { useState, useEffect, useRef } from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import {t} from "i18next";
export const Pagination = () => {
@@ -10,26 +10,31 @@ export const Pagination = () => {
const location = useLocation();
const [activeIndex, setActiveIndex] = useState(location.pathname === "/" ? 0 : 1);
const paginationRef = useRef(null);
const activeItemRef = useRef(null);
const itemRefs = useRef([]);
useEffect(() => {
const currentIndex = location.pathname === "/" ? 0 : 1;
setActiveIndex(currentIndex);
}, [location.pathname]);
useEffect(() => {
const updateActiveBackground = () => {
if (paginationRef.current && activeItemRef.current) {
const { offsetLeft, offsetWidth } = activeItemRef.current;
paginationRef.current.style.setProperty('--active-left', `${offsetLeft}px`);
paginationRef.current.style.setProperty('--active-width', `${offsetWidth}px`);
}
};
const updateActiveBackground = useCallback(() => {
if (paginationRef.current && itemRefs.current[activeIndex]) {
const { offsetLeft, offsetWidth } = itemRefs.current[activeIndex];
paginationRef.current.style.setProperty('--active-left', `${offsetLeft}px`);
paginationRef.current.style.setProperty('--active-width', `${offsetWidth}px`);
}
}, [activeIndex]);
useEffect(() => {
updateActiveBackground();
if (document.fonts?.ready) {
document.fonts.ready.then(updateActiveBackground);
}
window.addEventListener('resize', updateActiveBackground);
return () => window.removeEventListener('resize', updateActiveBackground);
}, [activeIndex]);
}, [updateActiveBackground]);
return (
<div className="pagination" ref={paginationRef}>
@@ -39,7 +44,7 @@ export const Pagination = () => {
navigate("/");
setActiveIndex(0);
}}
ref={activeIndex === 0 ? activeItemRef : null}
ref={el => itemRefs.current[0] = el}
>
<FontAwesomeIcon icon={faListUl}/>
<p>{t("page.overview")}</p>
@@ -50,7 +55,7 @@ export const Pagination = () => {
navigate("/statistics");
setActiveIndex(1);
}}
ref={activeIndex === 1 ? activeItemRef : null}
ref={el => itemRefs.current[1] = el}
>
<FontAwesomeIcon icon={faChartArea}/>
<p>{t("page.statistics")}</p>