LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): fix active tab indicator after window resize

This commit is contained in:
Michał Leszczyk 2022-02-23 10:41:20 +01:00
parent 143c6a94e5
commit 0c275a8f3e
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/dashboard-v2/src/components/Tabs/ActiveTabIndicator.js
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { useWindowSize } from "react-use";
const Wrapper = styled.div.attrs({
className: "absolute left-0 bottom-0 w-full h-0.5 bg-palette-200",
@ -15,6 +16,7 @@ const Indicator = styled.div.attrs({
export const ActiveTabIndicator = ({ tabRef }) => {
const [position, setPosition] = useState(0);
const [width, setWidth] = useState(0);
const { width: windowWidth } = useWindowSize();
useEffect(() => {
if (!tabRef?.current) {
@ -24,7 +26,7 @@ export const ActiveTabIndicator = ({ tabRef }) => {
const { offsetLeft, offsetWidth } = tabRef.current;
setPosition(offsetLeft);
setWidth(offsetWidth);
}, [tabRef]);
}, [tabRef, windowWidth]);
return (
<Wrapper>