Merge remote-tracking branch 'origin/main' into #8-create-basic-socke…

…ts,-get-and-send-chat

client/package.json

@@ -41,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.7"
   }
 }

client/src/App.css

@@ -1,38 +1,78 @@
-.App {
-  text-align: center;
-}
+@import '~antd/dist/antd.css';
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+ant-menu-horizontal {
+  border-bottom: none;
+  box-shadow: none;
+  border: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+ul .ant-menu-horizontal {
+  background: transparent;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+.ant-menu-horizontal > .ant-menu-item {
+  border-bottom: white !important;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+}
+
+.ant-menu-horizontal > .ant-menu-item-only-child {
+  margin-top: 0rem;
+}
+
+
+.ant-form-horizontal {
+  width: 80%;
+}
+
+.ant-list-vertical .ant-list-item-extra {
+  margin: 0;
+}
+
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background: #98c3bc;
+}
+
+.ant-menu-item-selected {
+  color: white;
+}
+
+.ant-menu-inline .ant-menu-item::after {
+  border-right: 5px solid #85b0a4;
+}
+
+.ant-menu-item-selected a {
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.ant-menu-item:hover {
+  color: white;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.ant-menu-item a:hover {
+  color: white;
 }
+
+.ant-btn-primary {
+  color: #fff;
+  background: #98c3bc;
+  border-color: #98c3bc;
+  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
+}
+
+.ant-btn-primary:hover {
+  color: #fff;
+  background: #85b0a4;
+  border-color: #85b0a4;
+}
+
+.ant-btn:active, .ant-btn:focus {
+  color: #fff;
+  background: #85b0a4;
+  border-color: #85b0a4;
+}
+
+::selection {
+  background: #85b0a4;
+}

client/src/App.tsx

@@ -1,25 +1,21 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import Header from './components/Header';
+import ScrollToTop from './components/ScrollToTop';
+import SiderMenu from './components/ChatRooms/SiderMenu';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+        <ScrollToTop />
+        <Header />
+        <SiderMenu />
+        <Switch>
+          {/* <Route exact path="/" component={} /> */}
+        </Switch>
+      </Router>
   );
 }
 

client/src/components/ChatRooms/SiderMenu.tsx

@@ -1 +1,64 @@
-import React from 'react';
+import { Component, CSSProperties } from 'react';
+import { Layout, Menu, Button } from 'antd';
+import { Link, withRouter } from 'react-router-dom';
+import { LockFilled, PlusCircleFilled } from '@ant-design/icons';
+
+const { Sider } = Layout;
+class SiderMenu extends Component {
+
+    render () {
+        return (
+            <Sider
+                breakpoint="lg"
+                collapsedWidth="0"
+                onBreakpoint={broken => {
+                    console.log(broken);
+                }}
+                onCollapse={(collapsed, type) => {
+                    console.log(collapsed, type);
+                }}
+                style={{
+                    height: '100vh',
+                    background: '#f1edea'
+                }}
+            >
+                <Menu mode="inline" style={{ background: '#f1edea' }}>
+                    <Button type="primary" icon={<PlusCircleFilled />} style={{ marginTop: '8rem', marginLeft: '1rem' }}>
+                        Create room
+                    </Button>
+                    <h3 style={headlineStyle}>Open rooms</h3>
+                    <Menu.Item key="1">
+                        <Link to={'/'}> Room 1</Link>
+                    </Menu.Item>
+                    <Menu.Item key="2">
+                        <Link to={'/'}>Room 2</Link>
+                    </Menu.Item>
+                    <Menu.Item key="3">
+                        <Link to={'/'}>Room 3</Link>
+                    </Menu.Item>
+
+                    <h3 style={headlineStyle}><LockFilled /> &nbsp; Private rooms</h3>
+                    <Menu.Item key="4">
+                        <Link to={'/'}> Room 1</Link>
+                    </Menu.Item>
+                    <Menu.Item key="5">
+                        <Link to={'/'}>Room 2</Link>
+                    </Menu.Item>
+                    <Menu.Item key="6">
+                        <Link to={'/'}>Room 3</Link>
+                    </Menu.Item>
+                </Menu>
+            </Sider>
+        )          
+    }
+}
+
+export default SiderMenu;
+
+const headlineStyle: CSSProperties = {
+    paddingTop: '3rem', 
+    paddingBottom: '1rem',
+    paddingLeft: '1rem',
+    fontWeight: 'bold',
+    color: '#44474f'
+}

client/src/components/Header.tsx

@@ -1 +1,48 @@
-import React from 'react';
+import { Row, Col } from "antd";
+import { Header} from "antd/lib/layout/layout";
+import { Component, CSSProperties } from "react";
+import logo from '../assets/logo-white.png'; 
+import { Link } from 'react-router-dom';
+
+class Navbar extends Component {
+  render() {
+        return (
+            <Header style={layoutStyle}>
+                <Row style={{ width: '100%' }}>
+                    <Col span={24} style={colStyle}>
+                        <Link to='/'>
+                            <img src={logo} alt="logo" style={logoStyle} />
+                        </Link>
+                    </Col>
+                </Row>
+            </Header> 
+        )
+    }
+}; 
+
+export default Navbar;
+
+
+const layoutStyle: CSSProperties = {
+    width: '100%', 
+    top: '0',
+    left: '0',
+    background: '#98c3bc',
+    height: '5rem',
+    display: 'flex', 
+    alignItems:'center',
+    justifyItems:'center',
+    zIndex: 100,
+    position: 'fixed',
+  }
+
+  const colStyle: CSSProperties = {
+    width: '100%',
+    display: 'flex', 
+    alignItems:'center',
+    justifyItems:'center',
+  }
+
+  const logoStyle: CSSProperties = {
+   width: '10rem',
+  }

client/src/components/ScrollToTop.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}