feat: Sidebar and StoreProvider

packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: calc(100vh - 38px);
+
+  aside {
+    min-width: 230px;
+    border-right: solid 1px #e1e1e1;
+  }
+
+  section.main {
+    display: flex;
+
+    section.request-pane, section.response-pane {
+    }
+  }
+
+  div.drag-request {
+    display: flex;
+    width: 1px;
+    padding: 0;
+    cursor: col-resize;
+    background: #e1e1e1;
+
+    &:hover {
+      background: silver;
+    }
+  }
+
+  .fw-600 {
+    font-weight: 600;
+  }
+
+  .react-tabs {
+    .react-tabs__tab-list {
+      padding-left: 1rem;
+      border-bottom: 1px solid #cfcfcf;
+
+      .react-tabs__tab--selected {
+        border-color: #cfcfcf;
+      }
+    }
+  }
+
+  .collection-filter {
+    input {
+      border: 1px solid rgb(211 211 211);
+      border-radius: 2px;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+`;
+
+export default Wrapper;

packages/grafnode-run/src/pageComponents/Main/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Navbar, Sidebar} from '@grafnode/components';
+import actions from 'providers/Store/actions';
+import { useStore } from 'providers/Store';
+import StyledWrapper from './StyledWrapper';
+
+export default function Main() {
+  const [state, dispatch] = useStore();
+
+  const {
+    collections,
+    activeRequestTabId
+  } = state;
+
+  console.log(actions);
+
+  return (
+    <div>
+      <Navbar />
+      <StyledWrapper>
+        <Sidebar
+          collections={collections}
+          actions={actions}
+          dispatch={dispatch}
+          activeRequestTabId={activeRequestTabId}
+        />
+        <section className='mt-4 flex flex-grow flex-col'>
+          Request & Response Tabs
+        </section>
+      </StyledWrapper>
+    </div>
+  )
+}