diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index cac39f2f63301b0ca75de4674a9074d15b7b0806..eab3b939da6cd0d3f12587143ff6ad5bbb5c1fb0 100644 --- a/frontend/src/components/App.tsx +++ b/frontend/src/components/App.tsx @@ -16,6 +16,7 @@ type AppState = { }; class App extends React.Component<{}, AppState> { + width = window.innerWidth; constructor(props: {}) { super(props); this.state = { toggledLeft: false, toggledRight: false }; @@ -25,47 +26,52 @@ class App extends React.Component<{}, AppState> { let interfaceSize = localStorage.getItem("interfaceSize"); if (interfaceSize) { document.documentElement.style.fontSize = `${interfaceSize}%`; - } - - window.addEventListener('resize', () => this.showOrHideSideBars()); - this.showOrHideSideBars(); - } + } + + window.addEventListener("resize", () => { + if (window.innerWidth !== this.width) { + this.width = window.innerWidth; + this.showOrHideSideBars(); + } + }); + this.showOrHideSideBars(); + } toggleLeftBar() { - if (window.innerWidth <= 1024) { + if (window.innerWidth <= 1024) { this.setState({ toggledRight: false, - }); - } + }); + } this.setState((state) => ({ toggledLeft: !state.toggledLeft, })); } toggleRightBar() { - if (window.innerWidth <= 1024) { + if (window.innerWidth <= 1024) { this.setState({ toggledLeft: false, - }); - } + }); + } this.setState((state) => ({ toggledRight: !state.toggledRight, })); } - showOrHideSideBars(){ - if (window.innerWidth <= 1024) { + showOrHideSideBars() { + if (window.innerWidth <= 1024) { this.setState({ - toggledLeft: false, + toggledLeft: false, toggledRight: false, - }); - } else{ - this.setState({ - toggledLeft: true, + }); + } else { + this.setState({ + toggledLeft: true, toggledRight: true, - }); - } - } + }); + } + } render() { const horizontalBarPages = [