adding contacts section of sidebar

net/web/src/User/SideBar/Contacts/Contacts.jsx

@@ -0,0 +1,14 @@
+import { Avatar, Image } from 'antd';
+import React from 'react'
+import { ContactsWrapper } from './Contacts.styled';
+import { useContacts } from './useContacts.hook';
+
+export function Contacts() {
+
+  const { state, actions } = useContacts()
+
+  return (
+    <ContactsWrapper>
+    </ContactsWrapper>
+  )
+}

net/web/src/User/SideBar/Contacts/Contacts.styled.jsx

@@ -0,0 +1,12 @@
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+export const ContactsWrapper = styled.div`
+  width: 100%;
+  flex-grow: 1;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  background-color: #f6f5ed;
+  border-top: 1px solid #8fbea7;
+  border-right: 1px solid #8fbea7;
+`;

net/web/src/User/SideBar/Contacts/useContacts.hook.js

@@ -0,0 +1,19 @@
+import { useContext, useState, useEffect } from 'react';
+import { AppContext } from '../../../AppContext/AppContext';
+
+export function useContacts() {
+  
+  const [state, setState] = useState({});
+
+  const actions = {};
+
+  const app = useContext(AppContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {}, [app])
+
+  return { state, actions };
+}

net/web/src/User/SideBar/Identity/Identity.jsx

@@ -1,7 +1,7 @@
 import { Avatar, Image } from 'antd';
 import React from 'react'
 import { IdentityWrapper } from './Identity.styled';
-import { DownOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
+import { RightOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
 import { useIdentity } from './useIdentity.hook';
 import { Menu, Dropdown } from 'antd';
 
@@ -10,10 +10,13 @@ export function Identity() {
   const { state, actions } = useIdentity()
 
   const Logo = () => {
-    if (state.imageUrl === '') {
+    if (state.imageUrl != null) {
-      return <Avatar size={64} icon={<UserOutlined />} />
+      if (state.imageUrl === '') {
+        return <UserOutlined />
+      }
+      return <img class="logo" src={ state.imageUrl } alt="" />
     }
-    return <Avatar size={64} src={<Image preview={false} src={ state.imageUrl } style={{ width: 64 }} />} />
+    return <></>
   }
 
   const menu = (
@@ -29,17 +32,17 @@ export function Identity() {
 
   return (
     <IdentityWrapper>
-      <Dropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="bottomRight">
+      <Dropdown overlay={menu} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="right">
         <div>
           <div class="container">
-            <div class="logo">
+            <div class="avatar">
               <Logo />
             </div>
             <div class="username">
               <span class="name">{ state.name }</span>
               <span class="handle">{ state.handle }</span>
             </div>
-            <DownOutlined />
+            <RightOutlined />
           </div>
         </div>
       </Dropdown>     

net/web/src/User/SideBar/Identity/Identity.styled.js

@@ -2,12 +2,11 @@ import { Button } from 'antd';
 import styled from 'styled-components';
 
 export const IdentityWrapper = styled.div`
-  background-color: #f6f5ed;
-  border-bottom: 2px solid #8fbea7;
   border-top: 1px solid #8fbea7;
-  border-left: 0px;
+  border-right: 1px solid #8fbea7;
-  border-right: 0px;
+  border-bottom: 1px solid #8fbea7;
-  border-radius: 0px;
+  overflow: hidden;
+  border-radius: 8px;
   &:hover {
     cursor: pointer;
   }
@@ -19,19 +18,14 @@ export const IdentityWrapper = styled.div`
     justify-content: center;
     padding-left: 16px;
     padding-right: 16px;
-  }
+    padding-top: 4px;
-
+    padding-bottom: 4px;
-  .menu {
+    background-color: #f6f5ed;
-    min-width: 0px;
   }
 
   .logo {
-    width: 33%
+    width: 100%;
-    display: flex;
+    height: 100%;
-    align-items: center;
-    justify-content: center;
-    padding-top: 4px;
-    padding-bottom: 4px;
   }
 
   .username {
@@ -43,12 +37,16 @@ export const IdentityWrapper = styled.div`
     padding-right: 8px;
   }
 
-  .edit {
+  .avatar {
-    position: absolute;
+    color: #888888;
+    font-size: 3em;
+    width: 64px;
+    height: 64px;
+    border-radius: 6px;
+    overflow: hidden;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
-    right: 0;
+    justify-content: center;
-    bottom: 0;
   }
 
   .name {
@@ -59,10 +57,7 @@ export const IdentityWrapper = styled.div`
   .handle {
     font-size: 1em;
     color: #444444;
+    font-weight: bold;
   }
 
-  .domain {
-    font-size: 1em;
-    color: #444444;
-  }
 `;

net/web/src/User/SideBar/Identity/useIdentity.hook.js

@@ -7,7 +7,7 @@ export function useIdentity() {
     name: '',
     handle: '',
     domain: '',
-    imageUrl: ''
+    imageUrl: null
   });
 
   const actions = {

net/web/src/User/SideBar/SideBar.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import { SideBarWrapper } from './SideBar.styled';
 import { Identity } from './Identity/Identity';
+import { Contacts } from './Contacts/Contacts';
 
 export function SideBar() {
 
   return (
     <SideBarWrapper>
       <Identity />
+      <Contacts />
     </SideBarWrapper>
   )
 }

net/web/src/User/SideBar/SideBar.styled.js

@@ -6,6 +6,7 @@ export const SideBarWrapper = styled.div`
   max-width: 300px;
   min-width: 200px;
   border: 1px solid #8fbea7;
+  background-color: #8fbea7;
   display: flex;
   flex-direction: column;
 `;

net/web/src/User/User.jsx

@@ -15,7 +15,6 @@ export function User() {
       <SideBar />
       <div class="canvas">
         <img class="connect" src={connect} alt="" />
-        <Button type="primary" onClick={() => actions.onLogout()} style={{ alignSelf: 'center', marginTop: '16px', width: '33%' }}>Sign Out</Button>
       </div>
     </UserWrapper>
   )

net/web/src/User/User.styled.js

@@ -13,7 +13,7 @@ export const UserWrapper = styled.div`
     flex-direction: column;
     flex-grow: 1;
     height: 100%;
-    border: 1px solid #8fbea7;
+    background-color: #8fbea7;
     align-items: center;
     justify-content: center;
   }

net/web/src/User/useUser.hook.js

@@ -10,9 +10,6 @@ export function useUser() {
   const app = useContext(AppContext);
 
   const actions = {
-    onLogout: async () => {
-      app.actions.logout()
-    },
     updateState: (value) => {
       setState((s) => ({ ...s, ...value }));
     },