fixed mobile behavior of LeftMenu and Header

src/ui/layout/Header/LeftMenu.tsx

 import * as React from 'react';
 import { withStyles} from '@material-ui/core/styles';
+import withWidth from '@material-ui/core/withWidth';
 import { translate } from 'react-i18next';
 
 import Drawer from '@material-ui/core/Drawer';
@@ -7,11 +8,20 @@ import ListItem from '@material-ui/core/ListItem';
 import { NavLink, Link } from 'react-router-dom';
 import Close from '@material-ui/icons/Close';
 import MyListCount from './MyListCount';
+import {compose} from 'redux';
+import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
+
+const mobile = ['md', 'sm', 'xs'] as Breakpoint[];
 
 const styleSheet = (theme) => ({
     flex: {
         flex: 1,
     },
+    myListCount: {
+      [theme.breakpoints.up('lg')]: {
+        display: 'none' as 'none',
+      },
+    },
     /* tslint:disable */
     leftMenu: {
         height: '100%',
@@ -65,13 +75,22 @@ interface ILeftMenuProps extends React.ClassAttributes<any> {
     myListItemsCount: number;
     closeMenu: (flag) => any;
     classes: any;
+    width: Breakpoint;
     t: any;
 }
 
 class LeftMenu extends React.Component<ILeftMenuProps, any> {
 
+    public componentWillReceiveProps(nextProps) {
+        const {width, closeMenu,  open} = nextProps;
+        const isMobile = mobile.indexOf(width) !== -1;
+        if (open && !isMobile) {
+          closeMenu();
+        }
+    }
+
     public render() {
-        const { t, myListItemsCount } = this.props;
+        const { t, myListItemsCount, classes } = this.props;
 
         const closeBtn = {
             color: '#fff',
@@ -107,7 +126,10 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
                           <NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
                         </ListItem>
                         <ListItem button>
-                          <NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount style={ {float: 'right', margin: '4px 0', fontSize: 'initial'} } count={ myListItemsCount }/></NavLink>
+                          <NavLink activeClassName="active" to="/sel">
+                            { t('menu.My List') }
+                            <MyListCount count={ myListItemsCount } classes={ {root: classes.myListCount} }/>
+                          </NavLink>
                         </ListItem>
                     </div>
                 </Drawer>
@@ -116,4 +138,4 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
     }
 }
 
-export default translate()((withStyles as any)(styleSheet)(LeftMenu));
+export default translate()(compose(withStyles(styleSheet), withWidth())(LeftMenu));

src/ui/layout/Header/MyListCount.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 
 
-const styles = () => ({
+const styles = (theme) => ({
   root: {
     backgroundColor: 'grey',
     borderRadius: '50%',
@@ -10,9 +10,23 @@ const styles = () => ({
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    fontSize: '14px',
+    top: 'calc(50% - 9px)',
+    position: 'absolute' as 'absolute',
+    fontSize: '11px',
     minHeight: '1.6em',
     minWidth: '1.6em',
+    padding: '3px',
+    [theme.breakpoints.down('md')]: {
+      transform: 'scale(0.7)',
+      position: 'initial' as 'initial',
+      margin: '4px 0',
+      padding: '0 10px',
+      fontSize: 'initial',
+      minHeight: '2rem',
+    },
+    [theme.breakpoints.down('xs')]: {
+      float: 'right' as 'right',
+    },
   },
 });
 

src/ui/layout/Header/index.tsx

@@ -31,13 +31,13 @@ const styleSheet = (theme) => ({
     headerRoot: {
         backgroundColor: '#2b2924',
         height: 'auto',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
           height: '3.5rem',
         },
     },
     blockHeader: {
       padding: '0 20px',
-      [theme.breakpoints.down('sm')]: {
+      [theme.breakpoints.down('md')]: {
         alignItems: 'baseline' as 'baseline',
       },
     },
@@ -96,7 +96,7 @@ const styleSheet = (theme) => ({
         }
     },
     mobileHidden: {
-      [theme.breakpoints.down('sm')]: {
+      [theme.breakpoints.down('md')]: {
         display: 'none'
       },
     },
@@ -175,6 +175,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
                             <div className="navigation-block float-right">
                               <NavLink activeClassName="active" to="/a">{ t('menu.Accessions') }</NavLink>
                               <NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink>
+                              <NavLink activeClassName="active" to="/countries">Countries</NavLink>
                               <NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
                               <NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
                               <NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount count={ myListItemsCount }/></NavLink>

src/ui/layout/PageLayout.tsx

@@ -17,7 +17,7 @@ const styles = (theme) => ({
     width: '100%',
     overflow: 'visible' as 'visible',
     position: 'absolute' as 'absolute',
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       paddingTop: '3rem',
     },
   },

styles/app.styles.scss

@@ -105,7 +105,7 @@ $mui-breakpoints: (
 		display: inline-block;
 		position: absolute;
 		height: 100%;
-		@media (max-width: 959px) {
+		@media (max-width: 1279px) {
 			display: none;
 		}
 		a {
@@ -128,7 +128,7 @@ $mui-breakpoints: (
 	}
 	.mobile-navigation-block {
 		display: none;
-		@media (max-width: 959px) {
+		@media (max-width: 1279px) {
 			display: inline-block;
 		}
 	}