rendering nav for mobile layout

net/web/src/context/useViewportContext.hook.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 export function useViewportContext() {
 
   const [state, setState] = useState({ });
-  const SMALL_MEDIUM = 600;
+  const SMALL_MEDIUM = 650;
   const MEDIUM_LARGE = 1000;
   const LARGE_XLARGE = 1400;
 

net/web/src/session/Session.jsx

@@ -13,6 +13,7 @@ import { Cards } from './cards/Cards';
 import { Contact } from './contact/Contact';
 import { Profile } from './profile/Profile';
 import { Welcome } from './welcome/Welcome';
+import { BottomNav } from './bottomNav/BottomNav';
 
 export function Session() {
 
@@ -107,7 +108,7 @@ export function Session() {
       )}
       { (viewport.state.display === 'small') && (
         <div class="mobile-layout">
-          <div class="center">
+          <div class="top">
             <Channels />
             { state.conversation && (
               <div class="reframe">
@@ -135,6 +136,9 @@ export function Session() {
               </div>
             )}
           </div>
+          <div class="bottom">
+            <BottomNav state={state} actions={actions} />
+          </div>
         </div>
       )}
     </SessionWrapper>

net/web/src/session/Session.styled.js

@@ -40,14 +40,37 @@ export const SessionWrapper = styled.div`
   }
 
   .tablet-layout {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+
     .left {
+      min-width: 256px;
+      max-width: 384px;
+      width: 30%;
+      height: 100%;
+      background-color: yellow; 
+      display: flex;
+      flex-direction: column;
     }
-    .right {
+    .center {
+      flex-grow: 1;
     }
   }
 
   .mobile-layout {
-    .center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .top {
+      flex-grow: 1;
+      position: relative;
+    }
+    .bottom {
+      height: 48px;
     }
   }
 `;

net/web/src/session/bottomNav/BottomNav.jsx

@@ -0,0 +1,105 @@
+import { BottomNavWrapper } from './BottomNav.styled';
+import { CommentOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';
+
+export function BottomNav({ state, actions }) {
+
+  const tab = () => {
+    if (state.profile) {
+      return 'profile';
+    }
+    if (state.cards || state.contact) {
+      return 'cards';
+    }
+    return 'channels';
+  }
+
+  const setChannels = () => {
+    actions.closeDetails();
+    actions.closeCards();
+    actions.closeContact();
+    actions.closeProfile();
+    actions.closeConversation();
+  }
+
+  const setProfile = () => {
+    actions.closeDetails();
+    actions.closeCards();
+    actions.closeContact();
+    actions.openProfile();
+    actions.closeConversation();
+  }
+
+  const setCards = () => {
+    actions.closeDetails();
+    actions.openCards();
+    actions.closeContact();
+    actions.closeProfile();
+    actions.closeConversation();
+  }
+
+  return (
+    <BottomNavWrapper>
+      { !state.cards && !state.contact && !state.profile && (
+        <div class="nav-item">
+          <div class="nav-active">
+            <div class="nav-div-right">
+              <CommentOutlined />
+            </div>
+          </div>
+        </div>
+      )}
+      { (state.cards || state.contact || state.profile) && (
+        <div class="nav-item">
+          <div class="nav-inactive">
+            <div class="nav-div-right">
+              <div class="nav-button" onClick={() => setChannels()}>
+                <CommentOutlined />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      { state.profile && (
+        <div class="nav-item">
+          <div class="nav-active">
+            <div class="nav-div-right nav-div-left">
+              <UserOutlined />
+            </div>
+          </div>
+        </div>
+      )}
+      { !state.profile && (
+        <div class="nav-item">
+          <div class="nav-inactive">
+            <div class="nav-div-right nav-div-left">
+              <div class="nav-button" onClick={() => setProfile()}>
+                <UserOutlined />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      { (state.cards || state.contact) && !state.profile && (
+        <div class="nav-item">
+          <div class="nav-active">
+            <div class="nav-div-left">
+              <TeamOutlined />
+            </div>
+          </div>
+        </div>
+      )}
+      { ((!state.cards && !state.contact) || state.profile) && (
+        <div class="nav-item">
+          <div class="nav-inactive">
+            <div class="nav-div-left">
+              <div class="nav-button" onClick={() => setCards()}>
+                <TeamOutlined />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </BottomNavWrapper>
+  );
+}
+

net/web/src/session/bottomNav/BottomNav.styled.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const BottomNavWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: ${Colors.formBackground};
+  font-size: 24px;
+
+  .nav-item {
+    width: 33%;
+    height: 100%;
+
+    .nav-inactive {
+      width: 100%;
+      height: 100%;
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .nav-active {
+      width: 100%;
+      height: 100%;
+      background-color: ${Colors.formHover};
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .nav-div-right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      border-right: 1px solid ${Colors.divider};
+    }
+
+    .nav-div-left {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      border-left: 1px solid ${Colors.divider};
+    }
+
+    .nav-button {
+      cursor: pointer;
+    }
+  }
+`;
+

net/web/src/session/identity/Identity.jsx

@@ -1,5 +1,3 @@
-import { useContext } from 'react';
-import { AppContext } from 'context/AppContext';
 import { Dropdown, Menu, Tooltip } from 'antd';
 import { Logo } from 'logo/Logo';
 import { IdentityWrapper } from './Identity.styled';

net/web/src/session/useSession.hook.js

@@ -27,12 +27,18 @@ export function useSession() {
     closeDetails: () => {
       updateState({ details: false });
     },
+    openCards: () => {
+      updateState({ cards: true });
+    },
     closeCards: () => {
       updateState({ cards: false });
     },
     closeContact: () => {
       updateState({ contact: false });
     },
+    openProfile: () => {
+      updateState({ profile: true });
+    },
     closeProfile: () => {
       updateState({ profile: false });
     },