feat(layout): add filter modal

src/components/FilterModal/FilterModal.module.scss

@@ -0,0 +1,67 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+
+//
+// filterModal
+// --------------------------------
+
+.filterModal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: variables.$sidebar-z-index;
+  display: none;
+  width: 100%;
+  height: 100vh;
+  color: variables.$white;
+  background-color: var(--body-background-color);
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.52, 0.51, 0.2, 1);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: variables.$base-spacing;
+  font-size: 20px;
+  text-transform: capitalize;
+  > h4 {
+    margin-left: variables.$base-spacing;
+  }
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+}
+
+.divider {
+  position: relative;
+  width: 100%;
+  border-top: 1px solid rgba(variables.$white, 0.12);
+  opacity: 0.12;
+}
+
+//
+// mediaQueries
+// --------------------------------
+
+@include responsive.mobile-and-tablet() {
+  .filterModal {
+    display: inline-block;
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+
+  .backdrop {
+    display: inline-block;
+    visibility: hidden;
+
+    &.visible {
+      visibility: visible;
+    }
+  }
+}

src/components/FilterModal/FilterModal.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import FilterModal from './FilterModal';
+
+describe('<FilterModal>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<FilterModal />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/FilterModal/FilterModal.tsx

@@ -0,0 +1,35 @@
+import React, { Fragment, ReactNode } from 'react';
+import classNames from 'classnames';
+
+import Close from '../../icons/Close';
+
+import styles from './FilterModal.module.scss';
+
+type Props = {
+  isOpen: boolean;
+  name: string;
+  children: ReactNode[];
+  onClose: () => void;
+};
+
+const FilterModal: React.FC<Props> = ({ isOpen, onClose, name, children }) => {
+  return (
+    <Fragment>
+      <div
+        className={classNames(styles.filterModal, {
+          [styles.open]: isOpen,
+        })}
+        onClick={onClose}
+      >
+        <div className={styles.header} aria-label="close menu" role="button">
+          <Close />
+          <h4>{name}</h4>
+        </div>
+        <hr className={styles.divider} />
+        <div className={styles.group}>{children}</div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default FilterModal;

src/components/FilterModal/__snapshots__/FilterModal.test.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterModal> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="filterModal"
+  >
+    <div
+      aria-label="close menu"
+      class="header"
+      role="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        focusable="false"
+        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>
+      <h4 />
+    </div>
+    <hr
+      class="divider"
+    />
+    <div
+      class="group"
+    />
+  </div>
+</div>
+`;