Added querying to sidebar. Fixed initial state.

client/src/components/white-board-left-sider/white-board-left-sider.component.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Menu, Icon } from "antd";
+export default function WhiteBoardLeftSiderComponent({visible}) {
+  return (
+    <Menu theme="dark" mode="inline" defaultSelectedKeys={["4"]}>
+      <Menu.Item key="1">
+        <Icon type="user" />
+        <span className="nav-text">nav 1</span>
+      </Menu.Item>
+      <Menu.Item key="2">
+        <Icon type="video-camera" />
+        <span className="nav-text">nav 2</span>
+      </Menu.Item>
+      <Menu.Item key="3">
+        <Icon type="upload" />
+        <span className="nav-text">nav 3</span>
+      </Menu.Item>
+      <Menu.Item key="4">
+        <Icon type="user" />
+        <span className="nav-text">nav 4</span>
+      </Menu.Item>
+    </Menu>
+  );
+}

client/src/components/white-board-left-sider/white-board-left-sider.container.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Query, Mutation } from "react-apollo";
+
+import WhiteBoardLeftSiderComponent from './white-board-left-sider.component'
+import Spin from "../loading-spinner/loading-spinner.component";
+import { GET_WHITE_BOARD_LEFT_SIDER_VISIBLE } from "../../graphql/local.queries";
+
+export default function WhiteBoardPageContainer() {
+  return (
+    <Query query={GET_WHITE_BOARD_LEFT_SIDER_VISIBLE}>
+      {({ loading, error, data: { whiteBoardLeftSiderVisible} }) => {
+        if (loading) return <Spin />;
+        if (error) return error.message;
+        return <WhiteBoardLeftSiderComponent visible={whiteBoardLeftSiderVisible}/>;
+      }}
+    </Query>
+  );
+}