diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index 040cf4024afdfaa051ff83d61c4b25d17920ae31..cac39f2f63301b0ca75de4674a9074d15b7b0806 100644 --- a/frontend/src/components/App.tsx +++ b/frontend/src/components/App.tsx @@ -25,16 +25,14 @@ 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(); + } toggleLeftBar() { if (window.innerWidth <= 1024) { - this.setState({ - toggledRight: true, - }); - } - if (window.innerWidth <= 992) { this.setState({ toggledRight: false, }); @@ -46,11 +44,6 @@ class App extends React.Component<{}, AppState> { toggleRightBar() { if (window.innerWidth <= 1024) { - this.setState({ - toggledLeft: true, - }); - } - if (window.innerWidth <= 992) { this.setState({ toggledLeft: false, }); @@ -60,6 +53,20 @@ class App extends React.Component<{}, AppState> { })); } + showOrHideSideBars(){ + if (window.innerWidth <= 1024) { + this.setState({ + toggledLeft: false, + toggledRight: false, + }); + } else{ + this.setState({ + toggledLeft: true, + toggledRight: true, + }); + } + } + render() { const horizontalBarPages = [ { name: "Dashboard", path: "/dashboard", icon: faHome }, diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss index 7990c434999d7d929cb43c034bc38a88b91bf1c0..0f052fe57901bd40ffba927389ef70bf91b1bfdb 100644 --- a/frontend/src/components/organisms/LeftBar/style.module.scss +++ b/frontend/src/components/organisms/LeftBar/style.module.scss @@ -56,12 +56,4 @@ position: relative; width: max-content; } - - #leftbarWrapper { - width: 15.625rem; - } - - :global(#wrapper.toggledLeft) #leftbarWrapper { - width: 0; - } } diff --git a/frontend/src/components/organisms/RightBar/style.module.scss b/frontend/src/components/organisms/RightBar/style.module.scss index 58a26d8cfa016e92d5c9c69b2d5f626b8d22f64d..88ad794c59dd13056ad46e4fd4bbbaeb0095008e 100644 --- a/frontend/src/components/organisms/RightBar/style.module.scss +++ b/frontend/src/components/organisms/RightBar/style.module.scss @@ -67,12 +67,4 @@ width: max-content; text-transform: uppercase; } - - #rightbarWrapper { - width: 15.625rem; - } - - :global(#wrapper.toggledRight) #rightbarWrapper { - width: 0; - } } diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx index b4718739b663a8969ed68cb68bc91cb4b9b36762..a37f47e7d91279e9df0ecc7a32ef50948b436154 100644 --- a/frontend/src/components/pages/StandardView/index.tsx +++ b/frontend/src/components/pages/StandardView/index.tsx @@ -53,7 +53,7 @@ const StandardView: React.FC<StandardViewProps> = ({ </Switch> <div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div> - <Container className={classNames("p-4", "pageContainer")}> + <Container className={classNames("px-4", "pageContainer")}> <Switch> <Route path="/dashboard"> <ExamplePage name="Dashboard" /> diff --git a/frontend/src/components/pages/StandardView/style.scss b/frontend/src/components/pages/StandardView/style.scss index 6918d53d81bc73f1dabd877126b47b6e3ba649ef..35ed38ba7a6449ef8c27e0a02403db16afa68c30 100644 --- a/frontend/src/components/pages/StandardView/style.scss +++ b/frontend/src/components/pages/StandardView/style.scss @@ -26,16 +26,16 @@ @media (min-width: 62rem) { #wrapper { - padding-left: 15.625rem; - padding-right: 15.625rem; + padding-left: 0; + padding-right: 0; } #wrapper.toggledLeft { - padding-left: 0; + padding-left: 15.625rem; } #wrapper.toggledRight { - padding-right: 0; + padding-right: 15.625rem; } }