From 1bea7baf0c4226cef944c93d71e2712807617796 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Sat, 6 Aug 2022 23:41:09 -0700 Subject: [PATCH] rendering nav for mobile layout --- .../src/context/useViewportContext.hook.js | 2 +- net/web/src/session/Session.jsx | 6 +- net/web/src/session/Session.styled.js | 27 ++++- net/web/src/session/bottomNav/BottomNav.jsx | 105 ++++++++++++++++++ .../src/session/bottomNav/BottomNav.styled.js | 56 ++++++++++ net/web/src/session/identity/Identity.jsx | 2 - net/web/src/session/useSession.hook.js | 6 + 7 files changed, 198 insertions(+), 6 deletions(-) create mode 100644 net/web/src/session/bottomNav/BottomNav.jsx create mode 100644 net/web/src/session/bottomNav/BottomNav.styled.js diff --git a/net/web/src/context/useViewportContext.hook.js b/net/web/src/context/useViewportContext.hook.js index b64ba9b8..c0d1fe4c 100644 --- a/net/web/src/context/useViewportContext.hook.js +++ b/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; diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index c4085d8f..100a79fc 100644 --- a/net/web/src/session/Session.jsx +++ b/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') && (
-
+
{ state.conversation && (
@@ -135,6 +136,9 @@ export function Session() {
)}
+
+ +
)} diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js index 9a67d841..9745d7f7 100644 --- a/net/web/src/session/Session.styled.js +++ b/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; } } `; diff --git a/net/web/src/session/bottomNav/BottomNav.jsx b/net/web/src/session/bottomNav/BottomNav.jsx new file mode 100644 index 00000000..30a71b7e --- /dev/null +++ b/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 ( + + { !state.cards && !state.contact && !state.profile && ( +
+
+
+ +
+
+
+ )} + { (state.cards || state.contact || state.profile) && ( +
+
+
+
setChannels()}> + +
+
+
+
+ )} + { state.profile && ( +
+
+
+ +
+
+
+ )} + { !state.profile && ( +
+
+
+
setProfile()}> + +
+
+
+
+ )} + { (state.cards || state.contact) && !state.profile && ( +
+
+
+ +
+
+
+ )} + { ((!state.cards && !state.contact) || state.profile) && ( +
+
+
+
setCards()}> + +
+
+
+
+ )} + + ); +} + diff --git a/net/web/src/session/bottomNav/BottomNav.styled.js b/net/web/src/session/bottomNav/BottomNav.styled.js new file mode 100644 index 00000000..74da0748 --- /dev/null +++ b/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; + } + } +`; + diff --git a/net/web/src/session/identity/Identity.jsx b/net/web/src/session/identity/Identity.jsx index b49befe6..c6779b46 100644 --- a/net/web/src/session/identity/Identity.jsx +++ b/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'; diff --git a/net/web/src/session/useSession.hook.js b/net/web/src/session/useSession.hook.js index 307b5811..8e70e62d 100644 --- a/net/web/src/session/useSession.hook.js +++ b/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 }); },