mobile side nav

dist/app.css

@@ -1,18 +1,18 @@
 /* Generated by cssConcatenator.js */
 /** Source: ./dist/main.tmp.css */
-.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.Navigation__navigation__32sTf{position:static;display:flex;flex-flow:row nowrap;padding:0;margin:0;width:100%;justify-content:space-evenly}.Navigation__navigation__32sTf button{margin-bottom:0}}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
+.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}.Navigation__navigation__32sTf.Navigation__menu__2XeMt{position:fixed;right:72px;z-index:1;width:100px;height:325px;justify-content:space-between}.Navigation__navigation__32sTf.Navigation__menu__2XeMt button>*{display:block;margin:auto}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
 
-.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
+.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
 
 .nes-field.is-inline .IvForm__ivInput__xR5IU{width:4.25em;padding-left:0.45em;padding-right:0.25em}.nes-field.is-inline .IvForm__ivInput__xR5IU.IvForm__levelInput__1n6We{width:6.5em}.nes-field.is-inline.IvForm__fieldRow__3HcBN{font-size:0.9em;justify-content:space-between;align-items:baseline}.nes-field.is-inline.IvForm__fieldRow__3HcBN label{flex-grow:0;margin-left:1em}.nes-field.is-inline.IvForm__fieldRow__3HcBN label:first-child{margin-left:0}
 
-.LeagueSelector__wrapper__fxmRz{font-size:0.8em;display:flex;justify-content:space-between;margin:0 0 0.5rem 0}.LeagueSelector__leagueRadioLabel__3aPV9{display:flex;align-items:center}.LeagueSelector__leagueRadio__3hY7B{display:none}
+.LeagueSelector__wrapper__fxmRz{font-size:0.8em;display:flex;justify-content:space-around;margin:0 0 0.5rem 0}.LeagueSelector__leagueRadioLabel__3aPV9{display:flex;align-items:center}.LeagueSelector__leagueRadio__3hY7B{display:none}
 
 .LeagueStatsList__selectList__1FBIL{flex-grow:1;display:flex;overflow:hidden}.LeagueStatsList__selectList__1FBIL>*{flex:1;overflow:auto}.LeagueStatsList__listItem__oCOvr{position:relative;display:flex;justify-content:space-evenly}.LeagueStatsList__listItem__oCOvr.list-item.active::before,.LeagueStatsList__listItem__oCOvr.list-item:hover::before{top:8px;left:10px}
 
-.StatDisplay__baseStatRow__1B60A{display:flex;align-items:center}.StatDisplay__baseStatRow__1B60A>*{flex-shrink:0}.StatDisplay__baseStatRow__1B60A>progress{flex-shrink:1;margin:0 0 0 1em;width:5em;height:1em;border-image-outset:1;padding:2px}@media only screen and (max-width: 767px){.StatDisplay__baseStatRow__1B60A>progress{height:1.2em}}@media only screen and (max-width: 359px){.StatDisplay__baseStatRow__1B60A>progress{height:1.4em}}
+.StatDisplay__baseStatRow__1B60A{display:flex;align-items:center}.StatDisplay__baseStatRow__1B60A>*{flex-shrink:0}.StatDisplay__baseStatRow__1B60A>progress{flex-shrink:1;margin:0 0 0 1em;width:5em;height:1em;border-image-outset:1;padding:2px}@media only screen and (max-width: 767px){.StatDisplay__baseStatRow__1B60A>progress{height:1.2em}}@media only screen and (max-width: 359px){.StatDisplay__baseStatRow__1B60A>progress{height:1.3em}}
 
-.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
+.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__navigationButton__2BuiE.PokemonApp__hamburgerIcon__1ujIT{font-size:2rem;margin-top:-6px}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.7}.PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s{z-index:1}.PokemonApp__navigationWrapper__3oyCI{display:flex;margin:0 auto}.PokemonApp__displayWrapper__2PiN5{margin:0 auto}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
 
 .LeagueIvExplorer__wrapper__3E7AD{display:flex;flex-flow:column nowrap}.LeagueIvExplorer__container__3GKct{margin-bottom:1rem}.LeagueIvExplorer__leftColumn__3au0L{}.LeagueIvExplorer__rightColumn__1eyvh{}.LeagueIvExplorer__leaguePokemonRank__3bjyU{justify-content:flex-start;flex-wrap:wrap}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonInfoWrapper__3WVsh{flex:1 0 100%;display:flex}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__leftColumn__3au0L{align-items:flex-start}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonRankValue__3k3ih{display:inline}.LeagueIvExplorer__ivsContainer__31sfb{max-height:350px;font-size:0.95em;flex:0 999 auto;display:flex;flex-flow:column nowrap}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX{display:flex;justify-content:flex-end;background-color:transparent;padding:0}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*{background-color:#fff}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*:first-child{margin-right:auto;padding:0 0.5em}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*:last-child{padding-right:0.5em}.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8{padding:1.5rem 0 0}.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8 .title.LeagueIvExplorer__ivContainerTitle__3Z3eX{margin-bottom:0;margin-right:-9px;margin-left:-9px;padding:0 1.5em}
 
@@ -24,7 +24,7 @@
 
 .MovesExplorer__wrapper__2y-BK h3{font-size:1rem}.MovesExplorer__wrapper__2y-BK h4{font-size:0.8em;color:#676767}
 
-.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.Navigation__navigation__32sTf{position:static;display:flex;flex-flow:row nowrap;padding:0;margin:0;width:100%;justify-content:space-evenly}.Navigation__navigation__32sTf button{margin-bottom:0}}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
+.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}.Navigation__navigation__32sTf.Navigation__menu__2XeMt{position:fixed;right:72px;z-index:1;width:100px;height:325px;justify-content:space-between}.Navigation__navigation__32sTf.Navigation__menu__2XeMt button>*{display:block;margin:auto}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
 
 .PokemonDisplay__highlight__h50BA{color:#fff;pointer-events:none}.PokemonDisplay__pokemonInfoWrapper__3AW3e{margin-bottom:1rem}.PokemonDisplay__pokemonInfoLeftColumn__1vugM{}.PokemonDisplay__pokemonInfoRightColumn__27Q49{}.PokemonDisplay__pokemonName__WBKbk{margin-bottom:0}.PokemonDisplay__dexHeader__2HVfr{margin-bottom:0.25rem}.PokemonDisplay__pokemonTypeWrapper__1rJIA{display:flex;justify-content:center;align-self:stretch}.PokemonDisplay__formHeader__1pr6M{text-transform:uppercase;margin-bottom:0}.PokemonDisplay__pokemonBaseStats__3UJvn{display:flex;flex-flow:column nowrap;align-items:start;align-self:stretch}
 

src/scss/index.scss

@@ -11,7 +11,7 @@ body {
   }
 
   @media only screen and (max-width: $max-small-mobile-width) {
-    font-size: 10px;
+    font-size: 11px;
   }
 }
 
@@ -86,6 +86,10 @@ a.list-item {
       content: "";
 
       @include pixelize(2px, $radio, $colors);
+
+      @media only screen and (max-width: $max-mobile-width) {
+        left: 0;
+      }
     }
   }
 

src/ts/app/PokemonApp.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Media from 'react-media';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
@@ -9,7 +10,7 @@ import { appReducers } from 'app/index';
 import * as ActionsPokemonApp from 'app/actions';
 import * as ActionsPokemonExplorer from 'app/components/PokemonExplorer/actions';
 import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
-import { IPokemonAppDispatch, IRouterProps } from 'app/types';
+import { IPokemonAppDispatch, IRouterProps, Navigation } from 'app/types';
 
 import { convertFormParamToPokemonForm, convertIdParamToPokemonId, convertLeagueParamToLeague } from 'app/utils/navigation';
 
@@ -18,6 +19,7 @@ import { Header } from 'app/components/Header';
 import { ConnectedPokemonExplorer } from 'app/components/PokemonExplorer/PokemonExplorer';
 import { PokemonSelectList } from 'app/components/PokemonSelectList/PokemonSelectList';
 
+import { MAX_MOBILE_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';
 import * as PVPogoProtos from 'common/models/PVPogoProtos';
 
 import * as styles from 'app/styles/PokemonApp.scss';
@@ -26,21 +28,7 @@ type PokemonAppProps = ReturnType<typeof appReducers>;
 
 interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch, IRouterProps {}
 
-// TODO: this should be on PokemonAppState
+class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
-export type Navigation = 'pokedex';
-interface IState {
-    activeNavigation : Navigation | null;
-}
-
-class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
-
-    constructor(props : IConnectedPokemonAppProps) {
-        super(props);
-
-        this.state = {
-            activeNavigation: null,
-        };
-    }
 
     public async componentWillMount() {
         const {
@@ -74,6 +62,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
 
     public render() {
         const {
+            navigation,
             isInterruption,
             attackTypeEffectiveness,
             combatMoves,
@@ -86,9 +75,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         const {
             leaguePokemon,
         } = this.props.pokemonExplorerState;
-        const {
-            activeNavigation,
-        } = this.state;
         const matchParams = this.props.match.params;
         const activePokemonId = convertIdParamToPokemonId(matchParams.id);
         const activePokemonForm = convertFormParamToPokemonForm(matchParams.form);
@@ -110,7 +96,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             iconCss,
             'pokedex',
             {
-                active: activeNavigation === 'pokedex',
+                active: navigation === 'pokedex',
             }
         );
         const pokedexButtonCss = classNames(
@@ -120,6 +106,14 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             // }
         );
 
+        const hamburgerButtonCss = classNames(
+            styles.hamburgerIcon,
+            styles.navigationButton,
+            // {
+            //     [styles.activeNavigationButton]: activeNavigation === 'menu',
+            // }
+        );
+
         // react optimization for rendering on pokemon switching
         // https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key
         const uniquePokemonId = leaguePokemon !== null ? `${leaguePokemon.id}~${leaguePokemon.form}` : undefined;
@@ -129,7 +123,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
                 <Header>
                     <PokemonSelectList
                         isLoading={ this.props.pokemonSelectListState.isLoading }
-                        isListOpen={ activeNavigation === 'pokedex' }
+                        isListOpen={ navigation === 'pokedex' }
                         activePokemonId={ activePokemonId }
                         activePokemonForm={ activePokemonForm }
                         pokemonList={ filterTerm === '' ? pokemonList : pokemonListFiltered }
@@ -137,10 +131,16 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
                         handleActivatePokemon={ this.handleActivatePokemon }
                         handleChangeFilter={ this.handleChangeFilter }
                     />
-                    <button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
+                    <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
+                        <button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
+                    </Media>
+                    <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                        <button className={ hamburgerButtonCss } onClick={ this.handleMenuClick }>&#9776;</button>
+                    </Media>
                 </Header>
                 <ConnectedPokemonExplorer
                     key={ uniquePokemonId }
+                    isMenuOpen={ navigation === 'menu' }
                     isOverlaid={ isInterruption }
                     attackTypeEffectiveness={ attackTypeEffectiveness }
                     combatMoves={ combatMoves }
@@ -151,14 +151,14 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         );
     }
 
-    private readonly handleSearchInterruption = (isInterruption : boolean) => {
+    private readonly handleInterruption = (isInterruption : boolean, navigation : Navigation) => {
-        this.setState({
+        const { dispatch } = this.props;
-            activeNavigation: isInterruption ? 'pokedex' : null,
+
-        });
+        dispatch(ActionsPokemonApp.setNavigation(isInterruption ? navigation : null));
-        this.props.dispatch(ActionsPokemonApp.setIsInterruption(isInterruption));
+        dispatch(ActionsPokemonApp.setIsInterruption(isInterruption));
 
         if (isInterruption) {
-            this.props.dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({
+            dispatch(ActionsPokemonExplorer.setCombatMoveSelectorsOpen({
                 quickMove: false,
                 chargeMove1: false,
                 chargeMove2: false,
@@ -169,14 +169,16 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
     private readonly handleToggleInterruption = (isInterruption : boolean) => {
         this.props.dispatch(ActionsPokemonApp.setIsInterruption(isInterruption));
         if (!isInterruption) {
-            this.setState({
+            this.props.dispatch(ActionsPokemonApp.setNavigation(null));
-                activeNavigation: null,
-            });
         }
     }
 
     private readonly handlePokedexClick = () => {
-        this.handleSearchInterruption(true);
+        this.handleInterruption(true, 'pokedex');
+    }
+
+    private readonly handleMenuClick = () => {
+        this.handleInterruption(true, 'menu');
     }
 
     private readonly handleActivatePokemon = async (pokemonId : PVPogoProtos.PokemonId, form : PVPogoProtos.PokemonForm) => {
@@ -192,11 +194,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             dispatch(ActionsPokemonExplorer.setLeaguePokemon(null));
         }
         dispatch(ActionsPokemonExplorer.setIsLoading(false));
-        this.handleSearchInterruption(false);
+        this.handleInterruption(false, 'pokedex');
     }
 
     private readonly handleChangeFilter = (filterTerm : string) => {
-        this.handleSearchInterruption(true);
+        this.handleInterruption(true, 'pokedex');
         return this.props.dispatch(ActionsPokemonSelectList.filterPokemonList(filterTerm));
     }
 }

src/ts/app/actions.ts

@@ -4,10 +4,12 @@ import { ILeaguePokemon } from 'app/models/League';
 import { CombatMoveStats, IMaxStats } from 'app/models/Pokemon';
 import * as PVPogoProtos from 'common/models/PVPogoProtos';
 
-import { PokemonAppActionTypes, ThunkResult } from 'app/types';
+import { Navigation, PokemonAppActionTypes, ThunkResult } from 'app/types';
 
 import { AttackTypeEffectiveness } from 'app/models/Config';
 
+export const setNavigation = (navigation : Navigation | null) => action(PokemonAppActionTypes.SET_NAVIGATION, { navigation });
+
 export const setIsInterruption = (isInterruption : boolean) => action(PokemonAppActionTypes.SET_IS_INTERRUPTION, { isInterruption });
 
 export const setMaxPossibleStats = (maxStats : IMaxStats) => action(PokemonAppActionTypes.SET_MAX_STATS, { maxStats });

src/ts/app/components/Header.tsx

@@ -6,22 +6,12 @@ import classNames from 'classnames';
 
 import { MIN_TABLET_WIDTH } from 'common/models/constants';
 
-import { Navigation } from 'app/PokemonApp';
-
 import * as styles from 'app/styles/PokemonApp.scss';
 
 interface IHeaderProps {}
 
 export class Header extends React.Component<IHeaderProps> {
 
-    constructor(props : IHeaderProps) {
-        super(props);
-
-        this.state = {
-            activeNavigation: null,
-        };
-    }
-
     public render() {
         const headerCss = classNames(
             'nes-container',
@@ -35,7 +25,6 @@ export class Header extends React.Component<IHeaderProps> {
             'sprite',
             'pokeball',
             'premier-ball',
-            ''
         );
 
         // const linkTo = {

src/ts/app/components/PokemonExplorer/Navigation.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Media from 'react-media';
 
 import classNames from 'classnames';
 
@@ -6,23 +7,32 @@ import {
     SubNavigation,
     SubNavigationDisplay,
 } from 'app/components/PokemonExplorer/types';
+import { Navigation as NavigationType } from 'app/types';
+
+import { MAX_MOBILE_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';
 
 import * as styles from 'app/components/PokemonExplorer/styles/Navigation.scss';
 
 export interface INavigationProps {
+    isMenu : boolean;
     widgets : SubNavigationDisplay;
-    handleNavigationClick : (widget : SubNavigation) => void;
+    handleNavigationClick : (widget : SubNavigation | NavigationType) => void;
 }
 
 export class Navigation extends React.Component<INavigationProps> {
 
     public render() {
         const {
+            isMenu,
             widgets,
         } = this.props;
 
         const navCss = classNames(
             styles.navigation,
+            {
+                'nes-container': isMenu,
+                [styles.menu]: isMenu,
+            }
         );
 
         const iconCss = classNames(
@@ -73,16 +83,50 @@ export class Navigation extends React.Component<INavigationProps> {
             //     [styles.activeNavigationButton]: widgets.moves,
             // }
         );
+        const pokedexCss = classNames(
+            iconCss,
+            'pokedex',
+        );
+        const pokedexButtonCss = classNames(
+            buttonCss,
+        );
 
         return (
             <div className={ navCss }>
-                <button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
+                { isMenu &&
-                <button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
+                    <button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }>
-                <button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
+                        <i className={ pokedexCss } />
+                        <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                            <span>Dex</span>
+                        </Media>
+                    </button>
+                }
+                <button className={ badgeButtonCss } onClick={ this.handleTypesClick }>
+                    <i className={ badgeCss } />
+                    <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                        <span>Types</span>
+                    </Media>
+                </button>
+                <button className={ tmButtonCss } onClick={ this.handleMovesClick }>
+                    <i className={ tmCss } />
+                    <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                        <span>Moves</span>
+                    </Media>
+                </button>
+                <button className={ pvpButtonCss } onClick={ this.handlePvpClick }>
+                    <i className={ pvpCss } />
+                    <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                        <span>PVP</span>
+                    </Media>
+                </button>
             </div>
         );
     }
 
+    private handlePokedexClick = () => {
+        this.props.handleNavigationClick('pokedex');
+    }
+
     private handleTypesClick = () => {
         this.props.handleNavigationClick('types');
     }

src/ts/app/components/PokemonExplorer/PokemonDisplay.tsx

@@ -21,7 +21,6 @@ export interface IPokemonDisplay {
 export class PokemonDisplay extends React.Component<IPokemonDisplay> {
     public render() {
         const {
-            children,
             leaguePokemon,
             isHighlighted
         } = this.props;
@@ -136,7 +135,6 @@ export class PokemonDisplay extends React.Component<IPokemonDisplay> {
                             statRank={ leaguePokemon.statsRank.defenseRank }
                         />
                     </section>
-                    { children }
                 </div>
             </div>
         );

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -9,6 +9,7 @@ import { AttackTypeEffectiveness } from 'app/models/Config';
 import { League } from 'app/models/League';
 import { CombatMoveStats, TypeEffectiveness } from 'app/models/Pokemon';
 
+import * as ActionsPokemonApp from 'app/actions';
 import * as ActionsPokemonExplorer from 'app/components/PokemonExplorer/actions';
 import {
     CombatMoveSelectorsOpen,
@@ -18,7 +19,7 @@ import {
     SelectedCombatMoves,
     SubNavigation,
 } from 'app/components/PokemonExplorer/types';
-import { IRouterProps } from 'app/types';
+import { IRouterProps, Navigation as NavigationType } from 'app/types';
 
 import { LeagueIvExplorer } from 'app/components/PokemonExplorer/LeagueIvExplorer';
 import { MovesExplorer } from 'app/components/PokemonExplorer/MovesExplorer';
@@ -35,6 +36,7 @@ import * as PVPogoProtos from 'common/models/PVPogoProtos';
 import * as styles from 'app/styles/PokemonApp.scss';
 
 interface IPokemonExplorerProps extends IRouterProps {
+    isMenuOpen : boolean;
     isOverlaid : boolean;
     attackTypeEffectiveness : AttackTypeEffectiveness;
     combatMoves : CombatMoveStats;
@@ -47,6 +49,8 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
 
     public render() {
         const {
+            isMenuOpen,
+            isOverlaid,
             combatMoves,
             attackTypeEffectiveness,
         } = this.props;
@@ -60,7 +64,7 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
         } = this.props.pokemonExplorerState;
 
         const isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
-        const isOverlayShown = this.props.isOverlaid || isSelectingMove;
+        const isOverlayShown = isOverlaid || isSelectingMove;
 
         const navWrapperCss = classNames(
             styles.navigationWrapper,
@@ -90,14 +94,7 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
                             <PokemonDisplay
                                 leaguePokemon={ leaguePokemon }
                                 isHighlighted={ isOverlayShown }
-                            >
+                            />
-                                <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
-                                    <Navigation
-                                        widgets={ widgets }
-                                        handleNavigationClick={ this.handleNavigationClick }
-                                    />
-                                </Media>
-                            </PokemonDisplay>
                         }
                         { widgets.types && leaguePokemon !== null &&
                             <div className="nes-container with-title">
@@ -135,10 +132,20 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
                     </div>
                     <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
                         <Navigation
+                            isMenu={ false }
                             widgets={ widgets }
                             handleNavigationClick={ this.handleNavigationClick }
                         />
                     </Media>
+                    { isMenuOpen &&
+                        <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                            <Navigation
+                                isMenu={ true }
+                                widgets={ widgets }
+                                handleNavigationClick={ this.handleNavigationClick }
+                            />
+                        </Media>
+                    }
                 </div>
                 { isOverlayShown &&
                     <div className={ overLayCss } onClick={ this.handleOverlayClick } />
@@ -176,8 +183,13 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
         this.props.toggleInterruption(false);
     }
 
-    private readonly handleNavigationClick = (widget : SubNavigation) => {
+    private readonly handleNavigationClick = (widget : SubNavigation | NavigationType) => {
-        this.props.dispatch(ActionsPokemonExplorer.setSubNavigationWidgetIsShown(widget, !this.props.pokemonExplorerState.widgets[widget]));
+        if (widget === 'pokedex') {
+            this.props.dispatch(ActionsPokemonApp.setIsInterruption(true));
+            this.props.dispatch(ActionsPokemonApp.setNavigation('pokedex'));
+        } else if (widget !== 'menu') {
+            this.props.dispatch(ActionsPokemonExplorer.setSubNavigationWidgetIsShown(widget, !this.props.pokemonExplorerState.widgets[widget]));
+        }
     }
 
     private readonly handleChangeIndividualValue = (stat : IndividualValueKey, value : number | null) => {

src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss

@@ -70,7 +70,7 @@
 .wrapper {
   font-size: 0.8em;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   margin: 0 0 0.5rem 0;
 }
 

src/ts/app/components/PokemonExplorer/styles/Navigation.scss

@@ -9,17 +9,17 @@
   flex-flow: column nowrap;
   align-self: flex-start;
 
-  @media only screen and (max-width: $max-mobile-width) {
+  &.menu {
-    position: static;
+    position: fixed;
-    display: flex;
+    right: $navigation-width;
-    flex-flow: row nowrap;
+    z-index: 1;
-    padding: 0;
+    width: 100px;
-    margin: 0;
+    height: 325px;
-    width: 100%;
+    justify-content: space-between;
-    justify-content: space-evenly;
 
-    button {
+    button > * {
-      margin-bottom: 0;
+      display: block;
+      margin: auto;
     }
   }
 }

src/ts/app/components/PokemonExplorer/styles/Navigation.scss.d.ts

@@ -1,4 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const menu: string;
 export const navigation: string;
 export const navigationButton: string;

src/ts/app/components/PokemonExplorer/styles/StatDisplay.scss

@@ -21,7 +21,7 @@
     }
 
     @media only screen and (max-width: $max-small-mobile-width) {
-      height: 1.4em;
+      height: 1.3em;
     }
   }
 }

src/ts/app/reducers.ts

@@ -4,6 +4,7 @@ import * as Actions from 'app/actions';
 import { IPokemonAppState, PokemonAppActionTypes } from 'app/types';
 
 export const initialState : IPokemonAppState = {
+    navigation: null,
     isInterruption: false,
     maxPossibleStats: {
         baseStamina: 0,
@@ -16,6 +17,14 @@ export const initialState : IPokemonAppState = {
     pokemonLeagueStats: {}, // TODO: this should be a map, but only if it makes sense with action reducers
 };
 
+const reduceSetNavigation = (
+    state : IPokemonAppState,
+    action : ReturnType<typeof Actions.setNavigation>
+) : IPokemonAppState => ({
+    ...state,
+    navigation: action.payload.navigation,
+});
+
 const reduceSetInterruption = (
     state : IPokemonAppState,
     action : ReturnType<typeof Actions.setIsInterruption>
@@ -66,6 +75,8 @@ export const PokemonAppReducers : Reducer<IPokemonAppState> = (
     action,
 ) : IPokemonAppState => {
     switch (action.type) {
+        case PokemonAppActionTypes.SET_NAVIGATION:
+            return reduceSetNavigation(state, action as ReturnType<typeof Actions.setNavigation>);
         case PokemonAppActionTypes.SET_IS_INTERRUPTION:
             return reduceSetInterruption(state, action as ReturnType<typeof Actions.setIsInterruption>);
         case PokemonAppActionTypes.SET_MAX_STATS:

src/ts/app/styles/PokemonApp.scss

@@ -58,6 +58,11 @@ $footer-height: 60px;
 
 .navigationButton {
   composes: navigationButton from '../components/PokemonExplorer/styles/Navigation.scss';
+
+  &.hamburgerIcon {
+    font-size: 2rem;
+    margin-top: -6px;
+  }
 }
 
 .overlay {

src/ts/app/styles/PokemonApp.scss.d.ts

@@ -5,6 +5,7 @@ export const complete: string;
 export const container: string;
 export const displayWrapper: string;
 export const footer: string;
+export const hamburgerIcon: string;
 export const header: string;
 export const highlight: string;
 export const leftColumn: string;

src/ts/app/types.ts

@@ -12,7 +12,10 @@ import { IPokemonSelectListState } from 'app/components/PokemonSelectList/types'
 
 import { PokemonService } from 'api/PokemonService';
 
+export type Navigation = 'pokedex' | 'menu';
+
 export interface IPokemonAppState {
+    navigation : Navigation | null;
     isInterruption : boolean;
     maxPossibleStats : IMaxStats;
     attackTypeEffectiveness : AttackTypeEffectiveness;
@@ -21,6 +24,7 @@ export interface IPokemonAppState {
 }
 
 export const PokemonAppActionTypes = {
+    SET_NAVIGATION: 'SET_NAVIGATION',
     SET_IS_INTERRUPTION: 'POKEMON_APP/SET_IS_INTERRUPTION',
     SET_MAX_STATS: 'POKEMON_APP/SET_MAX_STATS',
     SET_ATTACK_TYPE_EFFECTIVENESS: 'POKEMON_APP/SET_ATTACK_TYPE_EFFECTIVENESS',