feat(project): add sidebar component

jwplayer · Apr 29, 2021 · 11a39fb · 11a39fb
1 parent c9d813b
commit 11a39fb
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 0 deletions.
diff --git a/src/components/SideBar/SideBar.module.scss b/src/components/SideBar/SideBar.module.scss
@@ -0,0 +1,64 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+//
+// jwSidebarBackdrop
+// --------------------------------
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: variables.$sidebar-z-index - 1;
+  display: none;
+
+  width: 100%;
+  height: 100%;
+
+  background: rgba(variables.$black, 0.4);
+
+  &.visible {
+    display: block;
+  }
+}
+
+//
+// jwSidebar
+// --------------------------------
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  z-index: variables.$sidebar-z-index;
+
+  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;
+  }
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  padding: variables.$base-spacing;
+}
+
+.divider {
+  width: 270px;
+  max-width: 90vw;
+  border-top: 1px solid rgba(variables.$white, 0.12);
+  opacity: 0.12;
+}
diff --git a/src/components/SideBar/SideBar.test.tsx b/src/components/SideBar/SideBar.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render } from '../../testUtils';
+
+import SideBar from './SideBar';
+
+describe('<SideBar />', () => {
+  test('renders sideBar', () => {
+    const { container } = render(
+      <SideBar sideBarOpen={true} closeSideBar={jest.fn()} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import Close from '../../icons/Close';
+import ButtonLink from '../ButtonLink/ButtonLink';
+
+import styles from './SideBar.module.scss';
+
+type SideBarProps = {
+  sideBarOpen: boolean;
+  closeSideBar: () => void;
+};
+
+const SideBar: React.FC<SideBarProps> = ({ sideBarOpen, closeSideBar }) => {
+  return (
+    <div
+      className={classNames(styles.backdrop, { [styles.visible]: sideBarOpen })}
+      onClick={closeSideBar}
+    >
+      <div
+        className={classNames(styles.sidebar, { [styles.open]: sideBarOpen })}
+        onClick={closeSideBar}
+      >
+        <nav className={styles.group}>
+          <Close />
+        </nav>
+        <div className={styles.group}>
+          <ButtonLink label="Home" to="/" />
+          <ButtonLink label="Test" to="/" />
+          <hr className={styles.divider} />
+          <ButtonLink label="Settings" to="/" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SideBar;
diff --git a/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap b/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SideBar /> renders no sideBar 1`] = `
+<div>
+  <div
+    class=""
+  >
+    <div
+      class=""
+    >
+      <nav>
+        <svg
+          class=""
+          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>
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Home
+          </span>
+        </a>
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Test
+          </span>
+        </a>
+        <hr />
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Settings
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SideBar /> renders sideBar 1`] = `
+<div>
+  <div
+    class="undefined"
+  >
+    <div
+      class="undefined"
+    >
+      <nav>
+        <svg
+          class=""
+          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>
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Home
+          </span>
+        </a>
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Test
+          </span>
+        </a>
+        <hr />
+        <a
+          aria-current="page"
+          class="function link() { [native code] } active"
+          href="/"
+        >
+          <span>
+            Settings
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;