RootLayout.tsx

import * as React from 'react';
import { withStyles, WithStyles } from '@material-ui/core/styles';
import { withTranslation, WithTranslation } from 'react-i18next';

import renderRoutes from '_core/routing/renderRoutes';
import { Link } from 'react-router-dom';

const styles = (theme) => ({
  '@global': {
    'a': {
      color: theme.palette.primary.main,
      textDecoration: 'none',
      cursor: 'pointer',
    },
  },
  app: {
    backgroundColor: theme.palette.secondary.main,
  },
  logo: {
    height: '36px',
    padding: '12px',
  },
  toolsFoot: {
    'font-size': '0.8em',
    'padding': '8px 16px',
    'backgroundColor': '#d8d8d8',
    'color': '#222',
    '& a': {
      color: theme.palette.primary.main,
    },
  },
  content: {
    '@media print': {
      '& table, & tbody, & div ': {
        overflow: 'visible !important',
        borderCollapse: 'collapse',
        // fontSize: '1vw',
      },
      '& tr': {
        pageBreakInside: 'avoid',
      },
    },
    '@media print and (orientation: portrait)': {
      '& td:nth-child(n + 10)': {
        display: 'none !important',
      },
    },
    '@media print and (orientation: landscape)': {
      '& td:nth-child(n + 15)': {
        display: 'none !important',
      },
    },
  },
});

declare const window: Window & { softwareVersion: string };

const VersionDisplay = ({}) => typeof window !== 'undefined' && window.softwareVersion ? <p><code>{ window.softwareVersion }</code></p> : <p><code>{ process.env.PROJECT_VERSION }</code></p>;


interface IRootLayoutProps {
  home: string;
  children?: React.ReactNode;
  // location: any;
  matchPath: string;
  route: any;
  Menu: any;
  routingProps: any;
}

const isNavigationOpen = () => {
  // console.log('Has classNames: ', document.getElementById('navigation').className);
  return document.getElementById('navigation').className.match(/\bnavigationopen\b/);
}

const maybeCloseNavigation = (ev) => {
  // console.log('Clickety click!');
  setTimeout(() => {
    if (isNavigationOpen()) {
      document.getElementById('navigation').className = document.getElementById('navigation').className.replace(/\bnavigationopen\b/, '');
    }
  }, 50);
}

const toggleNavigation = (ev) => {
  // console.log('Toggling', ev);
  ev.stopPropagation();
  setTimeout(() => {
    if (isNavigationOpen()) {
      // console.log('Closing nav');
      document.getElementById('navigation').className = document.getElementById('navigation').className.replace(/\bnavigationopen\b/, '');
    } else {
      // console.log('Opening nav');
      document.getElementById('navigation').className = `${document.getElementById('navigation').className} navigationopen`.trim();
    }
  }, 50);
}

function RootLayout(props: IRootLayoutProps & WithStyles & WithTranslation) {
  const { route, matchPath, routingProps, classes, Menu, home } = props;
  // console.log('root props: ', props);

  console.log(`Rendering route ${matchPath}`);

  return (
    <div id="app-layout">
      <div id="navigation" onClick={ maybeCloseNavigation }>
        <div id="app" className={ classes.app }>
          <Link className="navigationdisplayed" to={ home || '/' }><img className={ classes.logo } alt="logo" src="images/logo-white.png"/></Link>
          <img onClick={ toggleNavigation } className={ `navigationtoggle ${classes.logo}` } alt="logo" src="images/logo-white.png"/>
        </div>
        <div id="menu">
          <div id="tools">
            <Menu currentPath={ routingProps?.location?.pathname }/>
            <div id="shameless-plug" className={ classes.toolsFoot }>
              <p>
                <a rel="noreferrer" target="_blank" href="https://gitlab.croptrust.org/grin-global/support">GGCE</a>
                <br/>
                by <a rel="noreferrer" target="_blank" href="https://www.croptrust.org">Global Crop Diversity Trust</a>
              </p>
              <VersionDisplay />
            </div>
          </div>
        </div>
      </div>

      <main id="content" className={ classes.content }>
        { renderRoutes(route.routes, matchPath) }
      </main>
    </div>
  );
}

export default withTranslation()(withStyles(styles)(RootLayout));