From e394e839068b2423f727840302d9b9f754bcc3ac Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Tue, 4 Aug 2020 14:55:13 +0100
Subject: [PATCH] Add shadow for sidebars on mobile
---
frontend/src/components/App.tsx | 7 +++--
.../organisms/LeftBar/style.module.scss | 5 ++--
.../components/pages/StandardView/index.tsx | 7 +++--
.../components/pages/StandardView/style.scss | 29 +++++++++++++++++--
4 files changed, 38 insertions(+), 10 deletions(-)
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index c11b4a990..f100fd5cc 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -21,7 +21,7 @@ class App extends React.Component<{}, MyState> {
this.state = { isToggled: false };
}
- handleIconClick(e: React.MouseEvent<HTMLImageElement>) {
+ toggleLeftBar(e: React.MouseEvent<HTMLElement>) {
e.preventDefault();
this.setState((state) => ({
isToggled: !state.isToggled,
@@ -40,12 +40,13 @@ class App extends React.Component<{}, MyState> {
<>
<TopBar
pages={horizontalBarPages}
- onIconClick={(e) => this.handleIconClick(e)}
+ onIconClick={(e) => this.toggleLeftBar(e)}
/>
<StandardView
pages={horizontalBarPages}
- isToggled={this.state.isToggled}
+ isToggled={this.state.isToggled}
+ onOverlayClick={(e) => this.toggleLeftBar(e)}
/>
<BottomBar pages={horizontalBarPages} />
diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss
index f62757b0e..142018d6d 100644
--- a/frontend/src/components/organisms/LeftBar/style.module.scss
+++ b/frontend/src/components/organisms/LeftBar/style.module.scss
@@ -14,11 +14,12 @@
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
- transition: all 0.5s ease;
+ transition: all 0.5s ease;
+ z-index: 5000;
}
:global(#wrapper.toggled) #sidebarWrapper {
- width: 250px;
+ width: 250px;
}
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 1722d2d5b..a51093335 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -9,12 +9,14 @@ interface StandardViewProps {
name: string;
path: string;
}[];
- isToggled: boolean;
+ isToggled: boolean;
+ onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
}
const StandardView: React.FC<StandardViewProps> = ({
pages,
- isToggled,
+ isToggled,
+ onOverlayClick,
}: StandardViewProps) => {
const topBarRoutes = pages.map(({ name, path }) => (
<Route path={path} key={name}>
@@ -25,6 +27,7 @@ const StandardView: React.FC<StandardViewProps> = ({
return (
<div id="wrapper" className={isToggled ? "toggled" : ""}>
<LeftBar />
+ <div id="sidenav-overlay" onClick={e => onOverlayClick(e)}></div>
<Switch>
<Route exact path="/" render={() => <Redirect to="/modules" />} />
{topBarRoutes}
diff --git a/frontend/src/components/pages/StandardView/style.scss b/frontend/src/components/pages/StandardView/style.scss
index e819702e5..79caf07f9 100644
--- a/frontend/src/components/pages/StandardView/style.scss
+++ b/frontend/src/components/pages/StandardView/style.scss
@@ -6,12 +6,35 @@
transition: all 0.5s ease;
}
+#sidenav-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1;
+ display: none;
+
+ -webkit-transition: all 0.5s ease;
+ -moz-transition: all 0.5s ease;
+ -o-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
@media (min-width: 992px) {
#wrapper {
padding-left: 250px;
- }
-
+ }
+
#wrapper.toggled {
padding-left: 0;
}
-}
\ No newline at end of file
+}
+
+@media (max-width: 992px) {
+ #wrapper.toggled #sidenav-overlay {
+ display: block;
+ }
+}
--
GitLab