Adding chat window.

client/src/App/App.css

@@ -1 +1,27 @@
-@import '~antd/dist/antd.css';
+@import "~antd/dist/antd.css";
+
+.ant-layout-header {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 5vh;
+  right: 0px;
+  overflow: hidden;
+}
+.ant-layout-content {
+  position: absolute;
+  top: 5vh;
+  bottom: 3vh;
+  left: 0px;
+  right: 0px;
+  overflow: auto;
+}
+
+.ant-layout-footer {
+  position: absolute;
+  bottom: 0px;
+  height: 3vh;
+  left: 0px;
+  right: 0px;
+  overflow: hidden;
+}

client/src/components/chat-window/chat-window.component.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function ChatWindowComponent() {
+  return <div>Chat Windows and more</div>;
+}

client/src/components/chat-window/chat-window.container.jsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import ChatWindowComponent from "./chat-window.component";
+import { Button } from "antd";
+
+export default function ChatWindowContainer() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <div style={{ position: "absolute", zIndex: 1000 }}>
+      {visible ? <ChatWindowComponent /> : null}
+      <Button
+        onClick={() => {
+          setVisible(!visible);
+        }}>
+        Open!
+      </Button>
+    </div>
+  );
+}

client/src/components/footer/footer.component.jsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
-import { Row, Col } from "antd";
+import { Row, Col, Button } from "antd";
+import ChatWindowContainer from "../chat-window/chat-window.container";
 
 export default function FooterComponent() {
   return (

client/src/pages/manage/manage.page.jsx

@@ -8,18 +8,19 @@ import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 
-import './manage.page.styles.scss'
+import "./manage.page.styles.scss";
+import ChatWindowContainer from "../../components/chat-window/chat-window.container";
 
 const WhiteBoardPage = lazy(() => import("../white-board/white-board.page"));
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
-const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
+const JobsDetailPage = lazy(() =>
+  import("../jobs-detail/jobs-detail.page.container")
+);
 const ProfilePage = lazy(() => import("../profile/profile.container.page"));
 const JobsDocumentsPage = lazy(() =>
   import("../../components/jobs-documents/jobs-documents.container")
 );
 
-
-
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
 export default function Manage({ match }) {
@@ -35,7 +36,7 @@ export default function Manage({ match }) {
         <HeaderContainer />
       </Header>
 
-      <Content className="content-container">
+      <Content className='content-container'>
         <ErrorBoundary>
           <Suspense
             fallback={<div>TODO: Suspended Loading in Manage Page...</div>}>
@@ -62,6 +63,7 @@ export default function Manage({ match }) {
       </Content>
 
       <Footer>
+        <ChatWindowContainer />
         <FooterComponent />
       </Footer>
       <BackTop />