Implement sidebar to display stats when clicking on game header (closes

#10).

client/src/App.css

@@ -33,6 +33,11 @@ input[type=number] {
   flex-shrink: 0;
 }
 
+.appPageHeader-name {
+  text-align: center;
+  width: 75%;
+}
+
 .appPageHeader-link,
 .appPageHeader-link:hover,
 .appPageHeader-link:visited {
@@ -355,6 +360,27 @@ input[type=number] {
   color: rgba(0, 0, 0, .87);
 }
 
+.GameExtraSidebarWrapper {
+  top: 50%;
+  position: relative;
+  transform: translateY(-50%);
+  padding: 1em 0.5em;
+  --std-color: white;
+}
+
+.GameExtraSidebarWrapper .ui.list > .item > .icon + .content {
+  display: block;
+}
+
+.GameExtraSidebarWrapper .ui.header,
+.GameExtraSidebarWrapper .ui.label.isYou {
+  display: none;
+}
+
+.GameExtraSidebarWrapper .item + .item {
+  margin-top: 0.5em;
+}
+
 @media only screen and (max-width: 767.98px) {
   .ui.selection.dropdown .menu {
     max-height: 15rem;

client/src/Page.tsx

@@ -55,10 +55,12 @@ function PageContextProvider(
 interface FullRouteProps extends RouteProps {
   displayName?: string;
   menuItems?: PageMenuItems;
+  ExtraSidebar?: React.FunctionComponent<{ visible: boolean; close: () => void }>;
 }
 
 export default function Page(props: FullRouteProps): ReactElement {
   const [visible, setVisible] = useState(false);
+  const [extraSidebarVisible, setExtraSidebarVisible] = useState(false);
   const openMenu = useCallback(() => setVisible(true), []);
   const closeMenu = useCallback(() => setVisible(false), []);
   const parentPageContext = usePageContext();
@@ -68,6 +70,7 @@ export default function Page(props: FullRouteProps): ReactElement {
   delete routeProps.children;
   delete routeProps.displayName;
   delete routeProps.menuItems;
+  delete routeProps.ExtraSidebar;
   return <Route {...routeProps}>
     <PageContextProvider parentPageContext={parentPageContext}
                          parentUrl={parentUrl}
@@ -88,9 +91,15 @@ export default function Page(props: FullRouteProps): ReactElement {
         >
           <PageMenu closeMenu={closeMenu}/>
         </Sidebar>
-        <Sidebar.Pusher dimmed={visible}>
+        {props.ExtraSidebar && <props.ExtraSidebar visible={extraSidebarVisible}
+                                                   close={() => setExtraSidebarVisible(false)}/>}
+        <Sidebar.Pusher dimmed={visible || extraSidebarVisible}>
           <div className="appPage">
-            <PageHeader openMenu={openMenu}/>
+            <PageHeader openMenu={openMenu} onNameClick={() => {
+              if (props.ExtraSidebar) {
+                setExtraSidebarVisible(true);
+              }
+            }}/>
             <div className="appPageContent">
               {props.children}
             </div>

client/src/PageHeader.tsx

@@ -4,12 +4,12 @@ import {Icon} from 'semantic-ui-react';
 import {usePageContext} from './Page';
 import {Link} from 'react-router-dom';
 
-export default function PageHeader({openMenu}: { openMenu: () => void }): ReactElement {
+export default function PageHeader({onNameClick, openMenu}: { onNameClick?: () => void; openMenu: () => void }): ReactElement {
   const {displayName, parents} = usePageContext();
   return <header className="appPageHeader">
     {parents.length === 0 && <SuitsLogo/>}
     {parents.length > 0 && <Link className="appPageHeader-link" to={parents[0].url}><Icon name={'arrow left'}/></Link>}
-    <div>{displayName}</div>
+    <div className="appPageHeader-name" onClick={onNameClick}>{displayName}</div>
     <Icon name={'bars'} onClick={openMenu}/>
   </header>;
 }

client/src/pages/game/ExtraSidebar.tsx

@@ -0,0 +1,20 @@
+import React, {ReactElement} from 'react';
+import {Menu, Sidebar} from 'semantic-ui-react';
+import Players from '../round/Players';
+
+export default function ExtraSidebar({visible, close}: { visible: boolean; close: () => void }): ReactElement {
+  return <Sidebar
+    as={Menu}
+    animation='overlay'
+    icon='labeled'
+    inverted
+    onHide={close}
+    vertical
+    visible={visible}
+    direction='left'
+  >
+    <div className={'GameExtraSidebarWrapper'}>
+      <Players/>
+    </div>
+  </Sidebar>;
+}

client/src/pages/games/index.tsx

@@ -4,11 +4,13 @@ import Page from '../../Page';
 import Games from './Games';
 import Game from '../game';
 import RemoveGameMenuItem from '../game/RemoveGameMenuItem';
+import ExtraSidebar from '../game/ExtraSidebar';
 
 export default function GamesIndex(): ReactElement {
   const {url} = useRouteMatch();
   return <Switch>
-    <Page path={`${url}/game/:gameId`} displayName={'Spiel'} menuItems={[RemoveGameMenuItem]}>
+    <Page path={`${url}/game/:gameId`} displayName={'Spiel'} menuItems={[RemoveGameMenuItem]}
+          ExtraSidebar={ExtraSidebar}>
       <Game/>
     </Page>
     <Page path={`${url}`}>

client/src/pages/round/Players.tsx

@@ -26,7 +26,7 @@ export default function Players(): ReactElement {
               <Label size={'small'} color={dutySoloPlayed ? 'green' : 'red'}>
                 <span className={dutySoloPlayed ? '' : 'u-line-through'}>Solo</span> <Icon name='male'/>
               </Label>
-              {!!member.isYou && <Label size={'small'} color={'teal'}>
+              {!!member.isYou && <Label size={'small'} color={'teal'} className={'isYou'}>
                 du <Icon name='linkify'/>
               </Label>}
             </List.Description>