martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rendering nav for mobile layout

Browse Source
This commit is contained in:
Roland Osborne 2022-08-06 23:41:09 -07:00
parent 4ee3f6be0d
commit 1bea7baf0c
7 changed files with 198 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/context/useViewportContext.hook.js
View File

@ -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;

6
net/web/src/session/Session.jsx
View File

@ -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>

27
net/web/src/session/Session.styled.js
View File

@ -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;
}
}
`;

105
net/web/src/session/bottomNav/BottomNav.jsx Normal file
View File

@ -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>
);
}

56
net/web/src/session/bottomNav/BottomNav.styled.js Normal file
View File

@ -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;
}
}
`;

2
net/web/src/session/identity/Identity.jsx
View File

@ -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';

6
net/web/src/session/useSession.hook.js
View File

@ -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 });
},