move search to header

dist/app.css

@@ -18,6 +18,9 @@
 
 .PokemonApp__header__2s_s2 {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
   margin: 0.1em; }
   .PokemonApp__header__2s_s2 a {
     display: inline-block; }
@@ -26,20 +29,18 @@
   height: 60px; }
 
 .PokemonApp__leftNavigation__1rBU9 {
-  padding: 0.5em;
+  padding: 1em;
   position: relative;
   display: flex;
   flex-flow: column nowrap; }
-  .PokemonApp__leftNavigation__1rBU9 .PokemonApp__activeNavigationButton__lZQ4L {
+
-    z-index: 1; }
+.PokemonApp__header__2s_s2 button,
-  .PokemonApp__leftNavigation__1rBU9 button {
+.PokemonApp__leftNavigation__1rBU9 button {
   padding: 0;
   margin-bottom: 1em;
   outline: none;
   border: none;
   background-color: transparent; }
-    .PokemonApp__leftNavigation__1rBU9 button + button {
-      margin-bottom: 0.5em; }
 
 .PokemonApp__overlay__2vc-r {
   position: absolute;
@@ -147,6 +148,9 @@
 
 .PokemonApp__header__2s_s2 {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
   margin: 0.1em; }
   .PokemonApp__header__2s_s2 a {
     display: inline-block; }
@@ -155,20 +159,18 @@
   height: 60px; }
 
 .PokemonApp__leftNavigation__1rBU9 {
-  padding: 0.5em;
+  padding: 1em;
   position: relative;
   display: flex;
   flex-flow: column nowrap; }
-  .PokemonApp__leftNavigation__1rBU9 .PokemonApp__activeNavigationButton__lZQ4L {
+
-    z-index: 1; }
+.PokemonApp__header__2s_s2 button,
-  .PokemonApp__leftNavigation__1rBU9 button {
+.PokemonApp__leftNavigation__1rBU9 button {
   padding: 0;
   margin-bottom: 1em;
   outline: none;
   border: none;
   background-color: transparent; }
-    .PokemonApp__leftNavigation__1rBU9 button + button {
-      margin-bottom: 0.5em; }
 
 .PokemonApp__overlay__2vc-r {
   position: absolute;
@@ -375,40 +377,43 @@
   align-items: start;
   align-self: stretch; }
 
-.PokemonSelectList__leftPanel__2ktnA {
+.PokemonSelectList__wrapper__2LQMY {
   font-size: 0.8rem;
   width: 20em;
   display: flex;
   flex-flow: column nowrap;
-  margin-left: 1rem;
+  margin: 0 1.5em 0 auto;
-  position: absolute;
+  position: relative; }
-  top: 0.8em;
+  .PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6 {
-  right: 4.5em;
-  bottom: 1em; }
-  .PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6 {
     flex: 1 1 auto;
     display: flex;
     padding: 0;
-    overflow: hidden; }
+    overflow: hidden;
-    .PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6 > * {
+    height: 340px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 2; }
+    .PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6 > * {
       width: 100%; }
-    .PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb {
+    .PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb {
       align-self: center;
-      text-align: center;
+      text-align: center; }
-      margin-top: -100%; }
+      .PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb > *:first-child {
-      .PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb > *:first-child {
         margin: 1em auto; }
-  .PokemonSelectList__leftPanel__2ktnA a {
+  .PokemonSelectList__wrapper__2LQMY a {
     color: inherit;
     text-decoration: none;
     padding: 5px 1em 5px 2em;
     justify-content: flex-end;
     align-content: space-around;
-    flex-wrap: wrap; }
+    flex-wrap: wrap;
-    .PokemonSelectList__leftPanel__2ktnA a .PokemonSelectList__menuIcon__1I2_T {
+    display: flex; }
+    .PokemonSelectList__wrapper__2LQMY a .PokemonSelectList__menuIcon__1I2_T {
       margin: -4px 0 0 0.5em;
       opacity: 0.5; }
-    .PokemonSelectList__leftPanel__2ktnA a.active .PokemonSelectList__menuIcon__1I2_T {
+    .PokemonSelectList__wrapper__2LQMY a.active .PokemonSelectList__menuIcon__1I2_T {
       opacity: 1; }
 
 .PokemonSelectList__filterWrapper__1d1Wl {

dist/global.css

@@ -1896,7 +1896,7 @@ input[type="checkbox"] {
 .badge {
   background: url(a7238a57c9ba2b3d82d9a408561f77ce.png) no-repeat;
   background-size: 640px 40px;
-  background-position: 0 0;
+  background-position: -120px 0;
   height: 40px;
   width: 40px; }
 

dist/main-bundle.js

@@ -36942,6 +36942,10 @@ function (_react_1$default$Comp) {
     };
 
     _this.handleChangeFilter = function (filterTerm) {
+      _this.setState({
+        activeNavigation: 'pokedex'
+      });
+
       return _this.props.dispatch(ActionsPokemonSelectList.filterPokemonList(filterTerm));
     };
 
@@ -37066,28 +37070,42 @@ function (_react_1$default$Comp) {
       var pokedexCss = classnames_1.default(iconCss, 'pokedex', {
         active: activeNavigation === 'pokedex'
       });
-      var pokedexButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, activeNavigation === 'pokedex'));
+      var pokedexButtonCss = classnames_1.default();
       var pvpCss = classnames_1.default(iconCss, 'pvp', {
         active: widgets.pvp
       });
-      var pvpButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, widgets.pvp));
+      var pvpButtonCss = classnames_1.default();
       var badgeCss = classnames_1.default(iconCss, 'badge', {
         active: widgets.types
       });
-      var badgeButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, widgets.types));
+      var badgeButtonCss = classnames_1.default();
       var tmCss = classnames_1.default(iconCss, 'tm', {
         active: widgets.moves
       });
-      var tmButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, widgets.moves));
+      var tmButtonCss = classnames_1.default();
       return react_1.default.createElement("div", {
         className: wrapperCss
-      }, react_1.default.createElement(Header_1.Header, null), react_1.default.createElement("div", {
+      }, react_1.default.createElement(Header_1.Header, null, react_1.default.createElement(PokemonSelectList_1.PokemonSelectList, {
+        isLoading: this.props.pokemonSelectListState.isLoading,
+        isListOpen: activeNavigation === 'pokedex',
+        activePokemonId: activePokemonId,
+        activePokemonForm: activePokemonForm,
+        pokemonList: filterTerm === '' ? pokemonList : pokemonListFiltered,
+        filterTerm: this.props.pokemonSelectListState.filterTerm,
+        handleActivatePokemon: this.handleActivatePokemon,
+        handleChangeFilter: this.handleChangeFilter
+      }), react_1.default.createElement("button", {
+        className: pokedexButtonCss,
+        onClick: this.handlePokedexClick
+      }, react_1.default.createElement("i", {
+        className: pokedexCss
+      }))), react_1.default.createElement("div", {
         className: styles.body
       }, react_1.default.createElement("div", {
         className: displayWrapperCss
       }, leaguePokemon !== null && react_1.default.createElement(PokemonDisplay_1.PokemonDisplay, {
         leaguePokemon: leaguePokemon,
-        temporaryNavigationIsActive: isOverlayShown
+        isHighlighted: isOverlayShown
       }), widgets.pvp && leaguePokemon !== null && react_1.default.createElement(LeagueIvExplorer_1.LeagueIvExplorer, {
         activeLeague: league,
         leaguePokemon: leaguePokemon,
@@ -37101,11 +37119,6 @@ function (_react_1$default$Comp) {
       }), react_1.default.createElement("div", {
         className: leftNavCss
       }, react_1.default.createElement("button", {
-        className: pokedexButtonCss,
-        onClick: this.handlePokedexClick
-      }, react_1.default.createElement("i", {
-        className: pokedexCss
-      })), react_1.default.createElement("button", {
         className: pvpButtonCss,
         onClick: this.handlePvpClick
       }, react_1.default.createElement("i", {
@@ -37123,14 +37136,6 @@ function (_react_1$default$Comp) {
       }))), isOverlayShown && react_1.default.createElement("div", {
         className: styles.overlay,
         onClick: this.handleOverlayClick
-      }), activeNavigation === 'pokedex' && react_1.default.createElement(PokemonSelectList_1.PokemonSelectList, {
-        isLoading: this.props.pokemonSelectListState.isLoading,
-        activePokemonId: activePokemonId,
-        activePokemonForm: activePokemonForm,
-        pokemonList: filterTerm === '' ? pokemonList : pokemonListFiltered,
-        filterTerm: this.props.pokemonSelectListState.filterTerm,
-        handleActivatePokemon: this.handleActivatePokemon,
-        handleChangeFilter: this.handleChangeFilter
       })), react_1.default.createElement(Footer_1.Footer, null));
     }
   }]);
@@ -37475,10 +37480,16 @@ var Header =
 function (_react_1$default$Comp) {
   _inherits(Header, _react_1$default$Comp);
 
-  function Header() {
+  function Header(props) {
+    var _this;
+
     _classCallCheck(this, Header);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Header).apply(this, arguments));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Header).call(this, props));
+    _this.state = {
+      activeNavigation: null
+    };
+    return _this;
   }
 
   _createClass(Header, [{
@@ -37498,7 +37509,7 @@ function (_react_1$default$Comp) {
         className: headerCss
       }, react_1.default.createElement(react_router_dom_1.Link, {
         to: "/explorer"
-      }, "Explorer"));
+      }, "Explorer"), this.props.children);
     }
   }]);
 
@@ -38439,9 +38450,9 @@ function (_react_1$default$Comp) {
     value: function render() {
       var _this$props = this.props,
           leaguePokemon = _this$props.leaguePokemon,
-          temporaryNavigationIsActive = _this$props.temporaryNavigationIsActive;
+          isHighlighted = _this$props.isHighlighted;
       var dex = formatter_1.formatDexNumber(leaguePokemon.dex);
-      var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, temporaryNavigationIsActive));
+      var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, isHighlighted));
       var containerCss = classnames_1.default('nes-container', 'with-title');
       var containerTitleCss = classnames_1.default('title');
       var baseStatsCss = classnames_1.default(styles.pokemonBaseStats, containerCss);
@@ -38692,7 +38703,7 @@ function (_react_1$default$Comp) {
       };
 
       var missingNoCss = classnames_1.default('icon', 'sprite', 'pokemon-missing-no');
-      var wrapperCss = classnames_1.default(styles.leftPanel, {
+      var wrapperCss = classnames_1.default(styles.wrapper, {
         loading: this.props.isLoading
       });
       var listWrapperCss = classnames_1.default('nes-container', styles.listWrapper, _defineProperty({}, styles.emptyList, listLength === 0));
@@ -38712,7 +38723,7 @@ function (_react_1$default$Comp) {
       }), this.props.filterTerm !== '' && react_1.default.createElement("i", {
         className: "nes-icon close is-small",
         onClick: this.handleClickClearFilter
-      })), react_1.default.createElement("div", {
+      })), this.props.isListOpen && react_1.default.createElement("div", {
         className: listWrapperCss
       }, listLength > 0 && react_1.default.createElement(react_measure_1.default, {
         bounds: true,
@@ -39066,7 +39077,7 @@ exports.PokemonSelectListReducers = function () {
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"leftPanel":"PokemonSelectList__leftPanel__2ktnA","listWrapper":"PokemonSelectList__listWrapper__bBtO6","emptyList":"PokemonSelectList__emptyList__1vgpK","emptyState":"PokemonSelectList__emptyState__3sBmb","menuIcon":"PokemonSelectList__menuIcon__1I2_T","filterWrapper":"PokemonSelectList__filterWrapper__1d1Wl","filterInput":"PokemonSelectList__filterInput__1z_s2","dex":"PokemonSelectList__dex__1QHut","form":"PokemonSelectList__form__VIw8Q"};
+module.exports = {"wrapper":"PokemonSelectList__wrapper__2LQMY","listWrapper":"PokemonSelectList__listWrapper__bBtO6","emptyList":"PokemonSelectList__emptyList__1vgpK","emptyState":"PokemonSelectList__emptyState__3sBmb","menuIcon":"PokemonSelectList__menuIcon__1I2_T","filterWrapper":"PokemonSelectList__filterWrapper__1d1Wl","filterInput":"PokemonSelectList__filterInput__1z_s2","dex":"PokemonSelectList__dex__1QHut","form":"PokemonSelectList__form__VIw8Q"};
 
 /***/ }),
 
@@ -39860,7 +39871,7 @@ module.exports = {"selectList":"LeagueStatsList__selectList__S5RTA","listItem":"
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"wrapper":"PokemonApp__wrapper__3ZEoC","overlaid":"PokemonApp__overlaid__3B_Ol","highlight":"PokemonApp__highlight__1zywH","body":"PokemonApp__body__23cv_","header":"PokemonApp__header__2s_s2","footer":"PokemonApp__footer__3q19Q","leftNavigation":"PokemonApp__leftNavigation__1rBU9","activeNavigationButton":"PokemonApp__activeNavigationButton__lZQ4L","overlay":"PokemonApp__overlay__2vc-r","displayWrapper":"PokemonApp__displayWrapper__2PiN5","container":"PokemonApp__container__MsUHy","leftColumn":"PokemonApp__leftColumn__3Lv_L","rightColumn":"PokemonApp__rightColumn__1xE25"};
+module.exports = {"wrapper":"PokemonApp__wrapper__3ZEoC","overlaid":"PokemonApp__overlaid__3B_Ol","highlight":"PokemonApp__highlight__1zywH","body":"PokemonApp__body__23cv_","header":"PokemonApp__header__2s_s2","footer":"PokemonApp__footer__3q19Q","leftNavigation":"PokemonApp__leftNavigation__1rBU9","overlay":"PokemonApp__overlay__2vc-r","displayWrapper":"PokemonApp__displayWrapper__2PiN5","container":"PokemonApp__container__MsUHy","leftColumn":"PokemonApp__leftColumn__3Lv_L","rightColumn":"PokemonApp__rightColumn__1xE25"};
 
 /***/ }),
 

src/scss/sprites.scss

@@ -69,7 +69,7 @@ $scale: 4;
 
   background: url('../img/badges.png') no-repeat;
   background-size: 160px * $badge-scale 10px * $badge-scale;
-  background-position: 0 * $badge-scale 0 * $badge-scale;
+  background-position: -30px * $badge-scale 0 * $badge-scale;
   height: 10px * $badge-scale;
   width: 10px * $badge-scale;
 

src/ts/app/PokemonApp.tsx

@@ -32,7 +32,7 @@ interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch
     location : RouteComponentProps['location'];
 }
 
-type Navigation = 'pokedex';
+export type Navigation = 'pokedex';
 type SubNavigation = 'pvp' | 'types' | 'moves';
 interface IState {
     activeNavigation : Navigation | null;
@@ -135,9 +135,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             }
         );
         const pokedexButtonCss = classNames(
-            {
+            // {
-                [styles.activeNavigationButton]: activeNavigation === 'pokedex',
+            //     [styles.activeNavigationButton]: activeNavigation === 'pokedex',
-            }
+            // }
         );
 
         const pvpCss = classNames(
@@ -148,9 +148,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             }
         );
         const pvpButtonCss = classNames(
-            {
+            // {
-                [styles.activeNavigationButton]: widgets.pvp,
+            //     [styles.activeNavigationButton]: widgets.pvp,
-            }
+            // }
         );
         const badgeCss = classNames(
             iconCss,
@@ -160,9 +160,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             }
         );
         const badgeButtonCss = classNames(
-            {
+            // {
-                [styles.activeNavigationButton]: widgets.types,
+            //     [styles.activeNavigationButton]: widgets.types,
-            }
+            // }
         );
         const tmCss = classNames(
             iconCss,
@@ -172,14 +172,26 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             }
         );
         const tmButtonCss = classNames(
-            {
+            // {
-                [styles.activeNavigationButton]: widgets.moves,
+            //     [styles.activeNavigationButton]: widgets.moves,
-            }
+            // }
         );
 
         return (
             <div className={ wrapperCss }>
-                <Header />
+                <Header>
+                    <PokemonSelectList
+                        isLoading={ this.props.pokemonSelectListState.isLoading }
+                        isListOpen={ activeNavigation === 'pokedex' }
+                        activePokemonId={ activePokemonId }
+                        activePokemonForm={ activePokemonForm }
+                        pokemonList={ filterTerm === '' ? pokemonList : pokemonListFiltered }
+                        filterTerm={ this.props.pokemonSelectListState.filterTerm }
+                        handleActivatePokemon={ this.handleActivatePokemon }
+                        handleChangeFilter={ this.handleChangeFilter }
+                    />
+                    <button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
+                </Header>
                 <div className={ styles.body }>
                     <div className={ displayWrapperCss }>
                         { leaguePokemon !== null &&
@@ -206,7 +218,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
                         />
                     }
                     <div className={ leftNavCss }>
-                        <button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
                         <button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
                         <button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
                         <button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
@@ -214,17 +225,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
                     { isOverlayShown &&
                         <div className={ styles.overlay } onClick={ this.handleOverlayClick } />
                     }
-                    { activeNavigation === 'pokedex' &&
-                        <PokemonSelectList
-                            isLoading={ this.props.pokemonSelectListState.isLoading }
-                            activePokemonId={ activePokemonId }
-                            activePokemonForm={ activePokemonForm }
-                            pokemonList={ filterTerm === '' ? pokemonList : pokemonListFiltered }
-                            filterTerm={ this.props.pokemonSelectListState.filterTerm }
-                            handleActivatePokemon={ this.handleActivatePokemon }
-                            handleChangeFilter={ this.handleChangeFilter }
-                        />
-                    }
                 </div>
                 <Footer />
             </div>
@@ -294,6 +294,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
     }
 
     private readonly handleChangeFilter = (filterTerm : string) => {
+        this.setState({
+            activeNavigation: 'pokedex',
+        });
         return this.props.dispatch(ActionsPokemonSelectList.filterPokemonList(filterTerm));
     }
 

src/ts/app/components/Header.tsx

@@ -3,17 +3,28 @@ import { Link } from 'react-router-dom';
 
 import classNames from 'classnames';
 
+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',
             styles.header,
         );
+
         // const linkTo = {
         //     // pathname: '/courses',
         //     search: appendQueryString(location, {
@@ -33,6 +44,7 @@ export class Header extends React.Component<IHeaderProps> {
                 >
                     Explorer
                 </Link>
+                { this.props.children }
             </header>
         );
     }

src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx

@@ -16,6 +16,7 @@ import * as styles from './styles/PokemonSelectList.scss';
 
 export interface IPokemonSelectListProps {
     isLoading : boolean;
+    isListOpen : boolean;
     activePokemonId : POGOProtos.Enums.PokemonId | null;
     activePokemonForm : POGOProtos.Enums.Form | null;
     pokemonList : Array<IPokemon>;
@@ -70,7 +71,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
             'pokemon-missing-no',
         );
         const wrapperCss = classNames(
-            styles.leftPanel,
+            styles.wrapper,
             {
                 loading: this.props.isLoading,
             }
@@ -105,6 +106,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                         />
                     }
                 </div>
+                { this.props.isListOpen &&
                     <div className={ listWrapperCss }>
                         { listLength > 0 &&
                             <Measure
@@ -137,6 +139,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                             </div>
                         }
                     </div>
+                }
             </div>
         );
     }

src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss

@@ -1,22 +1,24 @@
 @import '~styles/Variables.scss';
 
-.leftPanel {
+.wrapper {
   font-size: 0.8rem;
   width: 20em;
-  // flex-basis: 20em;
   display: flex;
   flex-flow: column nowrap;
-  margin-left: 1rem;
+  margin: 0 1.5em 0 auto;
-  position: absolute;
+  position: relative;
-  top: 0.8em;
-  right: 4.5em;
-  bottom: 1em;
 
   .listWrapper {
     flex: 1 1 auto;
     display: flex;
     padding: 0;
     overflow: hidden;
+    height: 340px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 2;
 
     & > * {
       width: 100%;
@@ -25,7 +27,6 @@
     &.emptyList .emptyState {
       align-self: center;
       text-align: center;
-      margin-top: -100%;
 
       & > *:first-child {
         margin: 1em auto;
@@ -40,6 +41,7 @@
     justify-content: flex-end;
     align-content: space-around;
     flex-wrap: wrap;
+    display: flex;
 
     .menuIcon {
       margin: -4px 0 0 0.5em;

src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts

@@ -6,6 +6,6 @@ export const emptyState: string;
 export const filterInput: string;
 export const filterWrapper: string;
 export const form: string;
-export const leftPanel: string;
 export const listWrapper: string;
 export const menuIcon: string;
+export const wrapper: string;

src/ts/app/styles/PokemonApp.scss

@@ -32,6 +32,9 @@ $overlay-opacity: 0.7;
 
 .header {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
   margin: 0.1em;
 
   a {
@@ -44,25 +47,20 @@ $overlay-opacity: 0.7;
 }
 
 .leftNavigation {
-  padding: 0.5em;
+  padding: 1em;
   position: relative;
   display: flex;
   flex-flow: column nowrap;
+}
 
-  .activeNavigationButton {
+.header,
-    z-index: 1;
+.leftNavigation {
-  }
-
   button {
     padding: 0;
     margin-bottom: 1em;
     outline: none;
     border: none;
     background-color: transparent;
-
-    & + button {
-      margin-bottom: 0.5em;
-    }
   }
 }
 

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

@@ -1,6 +1,5 @@
 // This file is automatically generated.
 // Please do not change this file!
-export const activeNavigationButton: string;
 export const body: string;
 export const container: string;
 export const displayWrapper: string;