setting main layout

app/client/web/src/identity/Identity.module.css

@@ -0,0 +1,7 @@
+.identity {
+  width: 100%;
+  height: 48px;
+  cursor: pointer;
+  background: var(--mantine-color-surface-4);
+}
+

app/client/web/src/identity/Identity.tsx

@@ -0,0 +1,26 @@
+import classes from './Identity.module.css';
+import { useIdentity } from './useIdentity.hook';
+import { Menu } from '@mantine/core';
+import {
+  IconLogout,
+  IconSettings,
+  IconAddressBook
+} from '@tabler/icons-react'
+
+export function Identity() {
+  const { state, actions } = useIdentity();
+
+  return (
+    <Menu shadow="md" position="right">
+      <Menu.Target>
+        <div className={classes.identity}>IDENTITY</div>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Item leftSection={<IconSettings />}>{ state.strings.settings }</Menu.Item>
+        <Menu.Item leftSection={<IconAddressBook />}>{ state.strings.contacts }</Menu.Item>
+        <Menu.Item leftSection={<IconLogout />}>{ state.strings.logout }</Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  )
+}

app/client/web/src/identity/useIdentity.hook.ts

@@ -0,0 +1,15 @@
+import { useState, useContext, useEffect } from 'react'
+import { DisplayContext } from '../context/DisplayContext'
+import { ContextType } from '../context/ContextType'
+
+export function useIdentity() {
+  const display = useContext(DisplayContext) as ContextType
+  const [state, setState] = useState({
+    strings: display.state.strings,
+  });
+
+  const actions = {
+  };
+
+  return { state, actions };
+}

app/client/web/src/session/Session.module.css

@@ -3,6 +3,28 @@
   width: 100%;
   height: 100%;
 
+  .display {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+
+    .left {
+      height: 100%;
+      width: 33%;
+      min-width: 325px;
+      background: var(--mantine-color-surface-2);      
+    }
+
+    .right {
+      height: 100%;
+      display: flex;
+      flex-grow: 1;
+      background: var(--mantine-color-surface-3);      
+    }
+  }
+    
+
   .screen {
     width: 100%;
     height: calc(100% - 48px);

app/client/web/src/session/Session.tsx

@@ -6,6 +6,7 @@ import { ContextType } from '../context/ContextType'
 import classes from './Session.module.css'
 import { IconAddressBook, IconMessages, IconSettings } from '@tabler/icons-react'
 import { Settings } from '../settings/Settings';
+import { Identity } from '../identity/Identity';
 
 export function Session() {
   const [ tab, setTab ] = useState('channels');
@@ -47,7 +48,13 @@ export function Session() {
         </>
       )}
       { display.state.layout === 'large' && (
-        <div>LARGE DISPLAY</div>
+        <div className={classes.display}>
+          <div className={classes.left}>
+            <Identity />
+          </div>
+          <div className={classes.right}>
+          </div>
+        </div>
       )}
     </div>
   );