feat(project): add sidebar transition

jwplayer · Apr 30, 2021 · fbacf79 · fbacf79
1 parent c6c7597
commit fbacf79
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 130 deletions.
diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -73,63 +73,62 @@ exports[`<Layout /> renders layout 1`] = `
     </header>
     <div
       class="backdrop"
+    />
+    <div
+      class="sidebar"
     >
+      <nav
+        class="group"
+      >
+        <svg
+          class="icon"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </g>
+        </svg>
+      </nav>
       <div
-        class="sidebar"
+        class="group"
       >
-        <nav
-          class="group"
+        <a
+          aria-current="page"
+          class="link active"
+          href="/"
         >
-          <svg
-            class="icon"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g>
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </g>
-          </svg>
-        </nav>
-        <div
-          class="group"
+          <span>
+            Home
+          </span>
+        </a>
+        <a
+          aria-current="page"
+          class="link active"
+          href="/"
         >
-          <a
-            aria-current="page"
-            class="link active"
-            href="/"
-          >
-            <span>
-              Home
-            </span>
-          </a>
-          <a
-            aria-current="page"
-            class="link active"
-            href="/"
-          >
-            <span>
-              Test
-            </span>
-          </a>
-          <hr
-            class="divider"
-          />
-          <a
-            aria-current="page"
-            class="link active"
-            href="/"
-          >
-            <span>
-              Settings
-            </span>
-          </a>
-        </div>
+          <span>
+            Test
+          </span>
+        </a>
+        <hr
+          class="divider"
+        />
+        <a
+          aria-current="page"
+          class="link active"
+          href="/"
+        >
+          <span>
+            Settings
+          </span>
+        </a>
       </div>
     </div>
   </div>

diff --git a/src/components/SideBar/SideBar.module.scss b/src/components/SideBar/SideBar.module.scss
@@ -1,5 +1,6 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
+@use '../../styles/mixins/responsive';
 
 //
 // jwSidebarBackdrop
@@ -11,15 +12,10 @@
   left: 0;
   z-index: variables.$sidebar-z-index - 1;
   display: none;
-
   width: 100%;
   height: 100%;
-
   background: rgba(variables.$black, 0.4);
-
-  &.visible {
-    display: block;
-  }
+  transition: all 0.3s ease;
 }
 
 //
@@ -30,24 +26,13 @@
   position: fixed;
   top: 0;
   z-index: variables.$sidebar-z-index;
-
+  display: none;
   width: 270px;
   max-width: 90vw;
   height: 100vh;
-  max-height: 100vh;
-
-  overflow-x: hidden;
-  overflow-y: auto;
   background-color: var(--body-background-color);
   transform: translateX(-100%);
-
-  visibility: hidden;
-  transition: transform 0.2s cubic-bezier(0.52, 0.51, 0.2, 1);
-
-  &.open {
-    transform: translateX(0);
-    visibility: visible;
-  }
+  transition: transform 0.3s cubic-bezier(0.52, 0.51, 0.2, 1);
 }
 
 .group {
@@ -57,8 +42,29 @@
 }
 
 .divider {
+  position: relative;
+  left: -12px;
   width: 270px;
   max-width: 90vw;
   border-top: 1px solid rgba(variables.$white, 0.12);
   opacity: 0.12;
 }
+
+@include responsive.mobile-and-tablet() {
+  .sidebar {
+    display: inline-block;
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+
+  .backdrop {
+    display: inline-block;
+    visibility: hidden;
+
+    &.visible {
+      visibility: visible;
+    }
+  }
+}
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import classNames from 'classnames';
 
 import Close from '../../icons/Close';
@@ -13,12 +13,17 @@ type SideBarProps = {
 
 const SideBar: React.FC<SideBarProps> = ({ sideBarOpen, closeSideBar }) => {
   return (
-    <div
-      className={classNames(styles.backdrop, { [styles.visible]: sideBarOpen })}
-      onClick={closeSideBar}
-    >
+    <Fragment>
       <div
-        className={classNames(styles.sidebar, { [styles.open]: sideBarOpen })}
+        className={classNames(styles.backdrop, {
+          [styles.visible]: sideBarOpen,
+        })}
+        onClick={closeSideBar}
+      ></div>
+      <div
+        className={classNames(styles.sidebar, {
+          [styles.open]: sideBarOpen,
+        })}
         onClick={closeSideBar}
       >
         <nav className={styles.group}>
@@ -31,7 +36,7 @@ const SideBar: React.FC<SideBarProps> = ({ sideBarOpen, closeSideBar }) => {
           <ButtonLink label="Settings" to="/" />
         </div>
       </div>
-    </div>
+    </Fragment>
   );
 };
 

diff --git a/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap b/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
@@ -4,63 +4,62 @@ exports[`<SideBar /> renders sideBar 1`] = `
 <div>
   <div
     class="backdrop visible"
+  />
+  <div
+    class="sidebar open"
   >
+    <nav
+      class="group"
+    >
+      <svg
+        class="icon"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+          />
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+        </g>
+      </svg>
+    </nav>
     <div
-      class="sidebar open"
+      class="group"
     >
-      <nav
-        class="group"
+      <a
+        aria-current="page"
+        class="link active"
+        href="/"
+      >
+        <span>
+          Home
+        </span>
+      </a>
+      <a
+        aria-current="page"
+        class="link active"
+        href="/"
       >
-        <svg
-          class="icon"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g>
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-          </g>
-        </svg>
-      </nav>
-      <div
-        class="group"
+        <span>
+          Test
+        </span>
+      </a>
+      <hr
+        class="divider"
+      />
+      <a
+        aria-current="page"
+        class="link active"
+        href="/"
       >
-        <a
-          aria-current="page"
-          class="link active"
-          href="/"
-        >
-          <span>
-            Home
-          </span>
-        </a>
-        <a
-          aria-current="page"
-          class="link active"
-          href="/"
-        >
-          <span>
-            Test
-          </span>
-        </a>
-        <hr
-          class="divider"
-        />
-        <a
-          aria-current="page"
-          class="link active"
-          href="/"
-        >
-          <span>
-            Settings
-          </span>
-        </a>
-      </div>
+        <span>
+          Settings
+        </span>
+      </a>
     </div>
   </div>
 </div>