From c9d813beb7e2fa960d4b3e0c5d6c456402b54ee1 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Thu, 29 Apr 2021 22:33:57 +0200
Subject: [PATCH] feat(project): add layout component

---
 src/components/Layout/Layout.module.scss |  7 ++++++
 src/components/Layout/Layout.test.tsx    | 13 ++++++++++++
 src/components/Layout/Layout.tsx         | 27 ++++++++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 src/components/Layout/Layout.module.scss
 create mode 100644 src/components/Layout/Layout.test.tsx
 create mode 100644 src/components/Layout/Layout.tsx

diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
new file mode 100644
index 000000000..836caf972
--- /dev/null
+++ b/src/components/Layout/Layout.module.scss
@@ -0,0 +1,7 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.Layout {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/src/components/Layout/Layout.test.tsx b/src/components/Layout/Layout.test.tsx
new file mode 100644
index 000000000..5ed94948b
--- /dev/null
+++ b/src/components/Layout/Layout.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { render } from '../../testUtils';
+
+import Layout from './Layout';
+
+describe('<Layout />', () => {
+  test('renders layout', () => {
+    const { container } = render(<Layout />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
new file mode 100644
index 000000000..34cd9491a
--- /dev/null
+++ b/src/components/Layout/Layout.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode, FC, useState } from 'react';
+
+import Header from '../Header/Header';
+import SideBar from '../SideBar/SideBar';
+
+import styles from './Layout.module.scss';
+
+type LayoutProps = {
+  children?: ReactNode;
+};
+
+const Layout: FC<LayoutProps> = ({ children }) => {
+  const [sideBarOpen, toggleSideBar] = useState(false);
+
+  return (
+    <div className={styles.layout}>
+      <Header openSideBar={() => toggleSideBar(true)} />
+      <SideBar
+        sideBarOpen={sideBarOpen}
+        closeSideBar={() => toggleSideBar(false)}
+      />
+      {children}
+    </div>
+  );
+};
+
+export default Layout;