feat(sidebar): apply fade animation to overlay

aneurysmjs · Jul 28, 2019 · 5095a49 · 5095a49
1 parent f3d900c
commit 5095a49
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/app/components/shared/Sidebar/Sidebar.js b/src/app/components/shared/Sidebar/Sidebar.js
@@ -63,7 +63,7 @@ const Sidebar = ({
           onKeyPress={() => {}}
           role="presentation"
           onClick={closeSidebar}
-          className="sidebar__overlay"
+          className={`sidebar__overlay sidebar__overlay--fade-${isOpen ? 'in' : 'out'}`}
         />
         <aside
           // $FlowFixMe

diff --git a/src/app/components/shared/Sidebar/Sidebar.scss b/src/app/components/shared/Sidebar/Sidebar.scss
@@ -38,6 +38,24 @@ $sidebar-width: px-to-rem(300);
     top: 0;
     width: 100%;
     z-index: 9;
+
+    @include modifier(fade-in) {
+      animation: fadeIn .4s linear forwards;
+    }
+
+    @include modifier(fade-out) {
+      animation: fadeOut .4s linear forwards;
+    }
+  }
+
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
   }
 
   @include element(header) {