Add left nav (#4705)

* Automated translation update ( bf08a04cda )

* Add Layout component wip

* finish layout implementation

* convert header to left nav

* better nav item spacing

* return source files to original glory

* lint fix

* Remove height limit on login screen

* fix top spacing on 3-panel layout

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Brent Clark <brent@backboneiq.com>

webclient/src/components/ThreePaneLayout/ThreePaneLayout.css

@@ -33,4 +33,5 @@
 .three-pane-layout .grid-main__bottom.fixedHeight {
   height: 50%;
   overflow: visible;
+  padding: 0 0 16px;
 }

webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx

@@ -1,5 +1,4 @@
-// eslint-disable-next-line
-import React, { Component, CElement } from "react";
+import { Component, CElement } from "react";
 import { connect } from 'react-redux';
 import Grid from '@mui/material/Grid';
 import Hidden from '@mui/material/Hidden';
@@ -12,7 +11,7 @@ class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
   render() {
     return (
       <div className="three-pane-layout">
-        <Grid container spacing={2} className="grid">
+        <Grid container rowSpacing={0} columnSpacing={2} className="grid">
           <Grid item xs={12} md={9} lg={10} className="grid-main">
             <Grid item className={
               'grid-main__top'

webclient/src/components/index.ts

@@ -2,7 +2,6 @@
 export { default as Card } from './Card/Card';
 export { default as CardDetails } from './CardDetails/CardDetails';
 export { default as CountryDropdown } from './CountryDropdown/CountryDropdown';
-export { default as Header } from './Header/Header';
 export { default as InputField } from './InputField/InputField';
 export { default as InputAction } from './InputAction/InputAction';
 export { default as KnownHosts } from './KnownHosts/KnownHosts';

webclient/src/containers/Account/Account.tsx

@@ -11,6 +11,7 @@ import { UserDisplay, VirtualList, AuthGuard, LanguageDropdown } from 'component
 import { AuthenticationService, SessionService } from 'api';
 import { ServerSelectors } from 'store';
 import { User } from 'types';
+import Layout from 'containers/Layout/Layout';
 
 import AddToBuddies from './AddToBuddies';
 import AddToIgnore from './AddToIgnore';
@@ -33,7 +34,7 @@ const Account = (props: AccountProps) => {
   };
 
   return (
-    <div className="account">
+    <Layout className="account">
       <AuthGuard />
       <div className="account-column">
         <Paper className="account-list">
@@ -96,7 +97,7 @@ const Account = (props: AccountProps) => {
           </div>
         </Paper>
       </div>
-    </div>
+    </Layout>
   )
 }
 

webclient/src/containers/App/AppShell.tsx

@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import { MemoryRouter as Router } from 'react-router-dom';
 import CssBaseline from '@mui/material/CssBaseline';
 import { store } from 'store';
-import { Header } from 'components';
 import Routes from './AppShellRoutes';
 import FeatureDetection from './FeatureDetection';
 
@@ -29,8 +28,6 @@ class AppShell extends Component {
           <ToastProvider>
             <div className="AppShell" onContextMenu={this.handleContextMenu}>
               <Router>
-                <Header />
-
                 <FeatureDetection />
                 <Routes />
               </Router>

webclient/src/containers/Decks/Decks.tsx

@@ -2,16 +2,17 @@
 import React, { Component } from "react";
 
 import { AuthGuard } from 'components/index';
+import Layout from 'containers/Layout/Layout';
 
 import './Decks.css';
 
 class Decks extends Component {
   render() {
     return (
-      <div>
+      <Layout>
         <AuthGuard />
         <span>"Decks"</span>
-      </div>
+      </Layout>
     )
   }
 }

webclient/src/containers/Game/Game.tsx

@@ -2,16 +2,17 @@
 import React, { Component } from "react";
 
 import { AuthGuard } from 'components';
+import Layout from 'containers/Layout/Layout';
 
 import './Game.css';
 
 class Game extends Component {
   render() {
     return (
-      <div>
+      <Layout>
         <AuthGuard />
         <span>"Game"</span>
-      </div>
+      </Layout>
     )
   }
 }

webclient/src/containers/Initialize/Initialize.tsx

@@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography';
 import { Images } from 'images';
 import { ServerSelectors } from 'store';
 import { RouteEnum } from 'types';
+import Layout from 'containers/Layout/Layout';
 
 import './Initialize.css';
 
@@ -35,6 +36,7 @@ const Initialize = ({ initialized }: InitializeProps) => {
   return initialized
     ? <Navigate to={RouteEnum.LOGIN} />
     : (
+      <Layout>
         <Root className={'Initialize ' + classes.root}>
           <div className='Initialize-content'>
             <img src={Images.Logo} alt="logo" />
@@ -54,6 +56,7 @@ const Initialize = ({ initialized }: InitializeProps) => {
             <div className="bottomBar Initialize-graphics__bar" />
           </div>
         </Root>
+      </Layout>
     );
 }
 

webclient/src/containers/Layout/Layout.css

@@ -0,0 +1,31 @@
+.layout {
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: hidden;
+}
+
+.layout--no-height-limit {
+    height: initial;
+    max-height: initial;
+}
+
+.bottom-bar__container {
+    background: #555;
+    height: 50px;
+    width: 100%;
+}
+
+.page__body {
+    flex: 1;
+    max-height: calc(100% - 50px);
+}
+
+.page {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+}

webclient/src/containers/Layout/Layout.tsx

@@ -0,0 +1,39 @@
+import LeftNav from './LeftNav';
+
+import './Layout.css'
+
+function Layout(props:LayoutProps) {
+  const { children, className, showNav = true, noHeightLimit = false } = props;
+  const containerClasses = ['layout']
+  if (noHeightLimit === true) {
+    containerClasses.push('layout--no-height-limit')
+  }
+
+  return (
+    <div className={containerClasses.join(" ")}>
+      {showNav && <LeftNav />}
+      <section className="page">
+        <div className={`page__body ${className}`}>
+          {children}
+        </div>
+        {showNav && <BottomBar />}
+      </section>
+    </div>
+  )
+}
+
+function BottomBar(props) {
+  return (
+    <div className="bottom-bar__container">
+    </div>
+  )
+}
+
+interface LayoutProps {
+    showNav?: boolean;
+    children: any;
+    className?: string;
+    noHeightLimit?: boolean
+}
+
+export default Layout;

webclient/src/containers/Layout/LeftNav.css

@@ -1,31 +1,34 @@
-.Header {
+.LeftNav__container {
+  background: #7033DB;
+  width: 100px;
+  min-width: 100px;
+  height: 100%;
 }
 
-.Header__logo {
+.LeftNav__logo {
   display: flex;
   align-items: center;
+  justify-content: center;
+  padding: 16px 0;
 }
 
-.Header__logo a {
+.LeftNav__logo a {
   line-height: 1;
 }
 
-.Header__logo img {
+.LeftNav__logo img {
   height: 32px;
 }
 
-.Header-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
+.LeftNav-content {
   color: white;
 }
 
-.Header-serverDetails {
+.LeftNav-serverDetails {
   font-size: 12px;
 }
 
-.Header-server__indicator {
+.LeftNav-server__indicator {
   display: inline-block;
   height: 12px;
   width: 12px;
@@ -35,46 +38,43 @@
   margin-left: 10px;
 }
 
-.Header-nav {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
+.LeftNav-nav {
 }
 
-.Header-nav__links {
-  width: 100%;
+.LeftNav-nav__links {
   display: flex;
-  padding-left: 50px;
+  flex-flow: column;
   align-items: center;
+  gap: 16px;
 }
 
-.Header-nav__link {
+.LeftNav-nav__link {
   position: relative;
   height: 100%;
 }
 
-.Header-nav__link:hover {
+.LeftNav-nav__link:hover {
   background: rgba(0, 0, 0, .125);
 }
 
-.Header-nav__link:hover .Header-nav__link-menu {
+.LeftNav-nav__link:hover .LeftNav-nav__link-menu {
   display: block;
 }
 
-.Header-nav__link-btn {
+.LeftNav-nav__link-btn {
   display: flex;
   height: 100%;
   width: 100%;
   align-items: center;
-  padding: 5px 10px;
+  padding: 5px 20px;
   font-weight: bold;
 }
 
-.Header-nav__link-btn__icon {
+.LeftNav-nav__link-btn__icon {
   margin-left: 5px;
 }
 
-.Header-nav__link-menu {
+.LeftNav-nav__link-menu {
   display: none;
   position: absolute;
   bottom: 0;
@@ -82,13 +82,14 @@
   min-width: 150px;
   background: #3f51b5;
   box-shadow: 1px 1px 2px 0px black;
+  z-index: 1;
 }
 
-.Header-nav__link-menu__item {
+.LeftNav-nav__link-menu__item {
   padding: 0 !important;
 }
 
-.Header-nav__link-menu__btn {
+.LeftNav-nav__link-menu__btn {
   padding: 6px 16px;
   width: 100%;
   color: white;
@@ -96,15 +97,16 @@
   justify-content: space-between;
 }
 
-.Header-nav__actions {
+.LeftNav-nav__actions {
   display: flex;
+  justify-content: center;
 }
 
-.Header-nav__action {
+.LeftNav-nav__action {
 
 }
 
-.Header-nav__action button {
+.LeftNav-nav__action button {
   color: white;
 }
 
@@ -124,4 +126,3 @@
 .temp-chip > div {
   cursor: inherit;
 }
-

webclient/src/containers/Layout/LeftNav.tsx

@@ -1,11 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { NavLink, useNavigate, generatePath } from 'react-router-dom';
-import AppBar from '@mui/material/AppBar';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import Toolbar from '@mui/material/Toolbar';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import CloseIcon from '@mui/icons-material/Close';
 import MailOutlineRoundedIcon from '@mui/icons-material/MailOutline';
@@ -18,11 +16,11 @@ import { Images } from 'images';
 import { RoomsSelectors, ServerSelectors } from 'store';
 import { Room, RouteEnum, User } from 'types';
 
-import './Header.css';
+import './LeftNav.css';
 
-const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
+const LeftNav = ({ joinedRooms, serverState, user }: LeftNavProps) => {
   const navigate = useNavigate();
-  const [state, setState] = useState<HeaderState>({
+  const [state, setState] = useState<LeftNavState>({
     anchorEl: null,
     showCardImportDialog: false,
     options: [],
@@ -73,23 +71,23 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
   }
 
   return (
-    <AppBar className="Header" position="static">
-      <Toolbar variant="dense">
-        <div className="Header__logo">
+    <div className="LeftNav__container">
+      <div>
+        <div className="LeftNav__logo">
           <NavLink to={RouteEnum.SERVER}>
             <img src={Images.Logo} alt="logo" />
           </NavLink>
           { AuthenticationService.isConnected(serverState) && (
-            <span className="Header-server__indicator"></span>
+            <span className="LeftNav-server__indicator"></span>
           ) }
         </div>
         { AuthenticationService.isConnected(serverState) && (
-          <div className="Header-content">
-            <nav className="Header-nav">
-              <nav className="Header-nav__links">
-                <div className="Header-nav__link">
+          <div className="LeftNav-content">
+            <nav className="LeftNav-nav">
+              <nav className="LeftNav-nav__links">
+                <div className="LeftNav-nav__link">
                   <NavLink
-                    className="Header-nav__link-btn"
+                    className="LeftNav-nav__link-btn"
                     to={
                       joinedRooms.length
                         ? generatePath(RouteEnum.ROOM, { roomId: joinedRooms[0].roomId.toString() })
@@ -97,42 +95,42 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
                     }
                   >
                     Rooms
-                    <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                   </NavLink>
-                  <div className="Header-nav__link-menu">
+                  <div className="LeftNav-nav__link-menu">
                     {joinedRooms.map(({ name, roomId }) => (
-                      <MenuItem className="Header-nav__link-menu__item" key={roomId}>
-                        <NavLink className="Header-nav__link-menu__btn" to={ generatePath(RouteEnum.ROOM, { roomId: roomId.toString() }) }>
+                      <div className="LeftNav-nav__link-menu__item" key={roomId}>
+                        <NavLink className="LeftNav-nav__link-menu__btn" to={ generatePath(RouteEnum.ROOM, { roomId: roomId.toString() }) }>
                           {name}
 
                           <IconButton size="small" edge="end" onClick={event => leaveRoom(event, roomId)}>
                             <CloseIcon style={{ fontSize: 10, color: 'white' }} />
                           </IconButton>
                         </NavLink>
-                      </MenuItem>
+                      </div>
                     ))}
                   </div>
                 </div>
-                <div className="Header-nav__link">
-                  <NavLink className="Header-nav__link-btn" to={ RouteEnum.GAME }>
+                <div className="LeftNav-nav__link">
+                  <NavLink className="LeftNav-nav__link-btn" to={ RouteEnum.GAME }>
                     Games
-                    <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                   </NavLink>
                 </div>
-                <div className="Header-nav__link">
-                  <NavLink className="Header-nav__link-btn" to={ RouteEnum.DECKS }>
+                <div className="LeftNav-nav__link">
+                  <NavLink className="LeftNav-nav__link-btn" to={ RouteEnum.DECKS }>
                     Decks
-                    <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                   </NavLink>
                 </div>
               </nav>
-              <div className="Header-nav__actions">
-                <div className="Header-nav__action">
+              <div className="LeftNav-nav__actions">
+                <div className="LeftNav-nav__action">
                   <IconButton size="large">
                     <MailOutlineRoundedIcon style={{ color: 'inherit' }} />
                   </IconButton>
                 </div>
-                <div className="Header-nav__action">
+                <div className="LeftNav-nav__action">
                   <IconButton onClick={handleMenuOpen} size="large">
                     <MenuRoundedIcon style={{ color: 'inherit' }} />
                   </IconButton>
@@ -163,24 +161,25 @@ const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
             </nav>
           </div>
         ) }
-      </Toolbar>
+      </div>
 
       <CardImportDialog
         isOpen={state.showCardImportDialog}
         handleClose={closeImportCardWizard}
       ></CardImportDialog>
-    </AppBar>
+    </div>
   );
 }
 
-interface HeaderProps {
+interface LeftNavProps {
   serverState: number;
   server: string;
   user: User;
   joinedRooms: Room[];
+  showNav?: boolean;
 }
 
-interface HeaderState {
+interface LeftNavState {
   anchorEl: Element;
   showCardImportDialog: boolean;
   options: string[];
@@ -193,4 +192,4 @@ const mapStateToProps = state => ({
   joinedRooms: RoomsSelectors.getJoinedRooms(state),
 });
 
-export default connect(mapStateToProps)(Header);
+export default connect(mapStateToProps)(LeftNav);

webclient/src/containers/Login/Login.tsx

@@ -16,6 +16,7 @@ import { Images } from 'images';
 import { HostDTO, serverProps } from 'services';
 import { RouteEnum, WebSocketConnectOptions, getHostPort } from 'types';
 import { ServerSelectors, ServerTypes } from 'store';
+import Layout from 'containers/Layout/Layout';
 
 import './Login.css';
 import { useToast } from 'components/Toast';
@@ -225,6 +226,7 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
   };
 
   return (
+    <Layout showNav={false} noHeightLimit={true}>
       <Root className={'login overflow-scroll ' + classes.root}>
         { isConnected && <Navigate to={RouteEnum.SERVER} />}
 
@@ -339,6 +341,7 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
           handleClose={closeActivateAccountDialog}
         />
       </Root>
+    </Layout>
   );
 }
 

webclient/src/containers/Player/Player.tsx

@@ -1,15 +1,16 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
+import Layout from 'containers/Layout/Layout';
 
 import { AuthGuard } from 'components';
 
 class Player extends Component {
   render() {
     return (
-      <div>
+      <Layout>
         <AuthGuard />
         <span>"Player"</span>
-      </div>
+      </Layout>
     )
   }
 }

webclient/src/containers/Room/Room.tsx

@@ -9,6 +9,7 @@ import { RoomsService } from 'api';
 import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, AuthGuard } from 'components';
 import { RoomsStateMessages, RoomsStateRooms, JoinedRooms, RoomsSelectors, RoomsTypes } from 'store';
 import { RouteEnum } from 'types';
+import Layout from 'containers/Layout/Layout';
 
 import OpenGames from './OpenGames';
 import Messages from './Messages';
@@ -40,7 +41,7 @@ const Room = (props) => {
   }
 
   return (
-    <div className="room-view">
+    <Layout className="room-view">
       <AuthGuard />
 
       <div className="room-view__main">
@@ -84,7 +85,7 @@ const Room = (props) => {
           )}
         />
       </div>
-    </div>
+    </Layout>
   );
 }
 

webclient/src/containers/Server/Server.tsx

@@ -11,6 +11,7 @@ import { useReduxEffect } from 'hooks';
 import { RoomsSelectors, RoomsTypes, ServerSelectors } from 'store';
 import { Room, RouteEnum, User } from 'types';
 import Rooms from './Rooms';
+import Layout from 'containers/Layout/Layout';
 
 import './Server.css';
 
@@ -23,7 +24,7 @@ const Server = ({ message, rooms, joinedRooms, users }: ServerProps) => {
   }, RoomsTypes.JOIN_ROOM, []);
 
   return (
-    <div className="server-rooms">
+    <Layout className="server-rooms">
       <AuthGuard />
 
       <ThreePaneLayout
@@ -55,7 +56,7 @@ const Server = ({ message, rooms, joinedRooms, users }: ServerProps) => {
           </Paper>
         )}
       />
-    </div>
+    </Layout>
   );
 }
 

webclient/src/containers/Unsupported/Unsupported.tsx

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
+import Layout from 'containers/Layout/Layout';
 
 import './Unsupported.css';
 
@@ -9,7 +10,7 @@ const Unsupported = () => {
   const { t } = useTranslation();
 
   return (
-    <div className='Unsupported'>
+    <Layout className='Unsupported'>
       <Paper className='Unsupported-paper'>
         <div className='Unsupported-paper__header'>
           <Typography variant="h1">{ t('UnsupportedContainer.title') }</Typography>
@@ -18,7 +19,7 @@ const Unsupported = () => {
 
         <Typography variant="subtitle2">{ t('UnsupportedContainer.subtitle2') }</Typography>
       </Paper>
-    </div>
+    </Layout>
   );
 };