(refactor) Mobile menu items and behavior.

src/assets/stylesheets/components/_App.scss

@@ -9,10 +9,6 @@
         padding-top: 0;
     }
 
-    &#{ & }-menu-open {
-        padding-top: $header-mobile-menu-container-height + $header-height;
-    }
-
 }
 
 .lo-App_Content {
@@ -20,6 +16,7 @@
     padding-bottom: 30px;
     padding-top: 40px;
     position: relative;
+    z-index: 1;
 
     &:before {
         background-color: rgba($poa-purple, 0.5);
@@ -29,10 +26,16 @@
         left: 0;
         position: fixed;
         right: 0;
-        top: $header-mobile-menu-container-height + $header-height;
+        top: 0;
         z-index: 1234;
     }
 
+    &#{ & }-mobile-menu-open {
+        &:before {
+            display: block;
+        }
+    }
+
     &#{ & }-core {
         &:before {
             background-color: rgba($poa-purple, 0.5);
@@ -50,10 +53,4 @@
             background-color: rgba($xdai-orange, 0.5);
         }
     }
-
-    &#{ & }-mobile-menu-open {
-        &:before {
-            display: block;
-        }
-    }
 }

src/assets/stylesheets/components/_ButtonNewBallot.scss

@@ -47,4 +47,8 @@ $sw-ButtonNewBallot-height: 36px;
         margin-left: 40px;
     }
 
+    .hd-MobileMenuLinks & {
+        max-width: fit-content;
+        margin: 0 auto;
+    }
 }

src/assets/stylesheets/components/_MobileMenuLinks.scss

@@ -1,56 +1,18 @@
 .hd-MobileMenuLinks {
     background-color: $poa-purple-darker;
-    height: $header-mobile-menu-container-height;
+    // height: $header-mobile-menu-container-height;
+    padding-bottom: 20px;
     width: 100%;
 
-    @media (min-width: $breakpoint-md) {
-        height: $header-height;
+    &#{ & }-core {
+        background-color: $poa-purple-darker;
     }
 
-    .sokol & { // TODO: Fix
+    &#{ & }-sokol {
         background-color: $sokol-cyan-darker;
     }
-}
 
-.hd-MobileMenuLinks_ItemsContainer {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: space-evenly;
-
-    @media (min-width: $breakpoint-md) {
-        display: none;
+    &#{ & }-dai {
+        background-color: $xdai-gray-darker;
     }
 }
-
-.hd-MobileMenuLinks_Item {
-    color: #fff;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-    margin-left: 0;
-    opacity: 0.8;
-    text-decoration: none;
-    transition: opacity linear 0.1s;
-
-    &:hover,
-    &#{ & }-active {
-        opacity: 1;
-    }
-
-    @media (min-width: $breakpoint-md) {
-        margin-left: 34px;
-    }
-}
-
-// TODO: Fix this mess
-.hd-MobileMenuLinks_Icon {
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    float: left;
-    height: 18px;
-    margin-right: 10px;
-    width: 18px;
-}
-

src/assets/stylesheets/components/_NavigationLinks.scss

@@ -1,5 +1,11 @@
 .nl-NavigationLinks {
     display: flex;
+
+    .hd-MobileMenuLinks & {
+        align-items: center;
+        flex-direction: column;
+        margin-bottom: 10px;
+    }
 }
 
 .nl-NavigationLinks_Link {
@@ -11,10 +17,11 @@
     height: 18px;
     line-height: 18px;
     margin-left: 0;
-    opacity: 0.8;
+    opacity: 0.7;
     text-decoration: none;
-    transition: opacity linear 0.1s;
+    transition: opacity ease-in 0.15s, background-color ease-in 0.15s;
 
+    &:active,
     &:hover,
     &.active {
         opacity: 1;
@@ -22,14 +29,49 @@
 
     &#{ & }-core {
         color: #fff;
+
+        &:active,
+        &.active {
+            background-color: darken($poa-purple-darker, 10%);
+
+            @media (min-width: $breakpoint-md) {
+                background-color: transparent;
+            }
+        }
     }
 
     &#{ & }-sokol {
         color: #fff;
+
+        &:active,
+        &.active {
+            background-color: darken($sokol-cyan-darker, 10%);
+
+            @media (min-width: $breakpoint-md) {
+                background-color: transparent;
+            }
+        }
     }
 
     &#{ & }-dai {
         color: #333;
+
+        &:active,
+        &.active {
+            background-color: darken($xdai-gray-darker, 10%);
+
+            @media (min-width: $breakpoint-md) {
+                background-color: transparent;
+            }
+        }
+    }
+
+    .hd-MobileMenuLinks & {
+        display: flex;
+        flex-grow: 1;
+        height: 50px;
+        justify-content: center;
+        width: 100%;
     }
 
     @media (min-width: $breakpoint-md) {

src/components/Header/index.js

@@ -5,20 +5,14 @@ import { Logo } from '../Logo'
 import { MobileMenuLinks } from '../MobileMenuLinks'
 import { NavigationLinks } from '../NavigationLinks'
 
-export const Header = ({
-  baseRootPath,
-  navigationData,
-  networkBranch = undefined,
-  onMenuToggle,
-  showMobileMenu = false
-}) => {
+export const Header = ({ baseRootPath, networkBranch = undefined, onMenuToggle, showMobileMenu = false }) => {
   return (
     <header className={`sw-Header sw-Header-${networkBranch} ${showMobileMenu ? 'sw-Header-menu-open' : ''}`}>
-      {showMobileMenu ? <MobileMenuLinks onMenuToggle={onMenuToggle} navigationData={navigationData} /> : null}
+      {showMobileMenu ? <MobileMenuLinks networkBranch={networkBranch} onClick={onMenuToggle} /> : null}
       <div className="sw-Header_Content">
         <Logo networkBranch={networkBranch} href={baseRootPath} />
         <div className="sw-Header_Links">
-          <NavigationLinks networkBranch={networkBranch} navigationData={navigationData} />
+          <NavigationLinks networkBranch={networkBranch} />
           <ButtonNewBallot networkBranch={networkBranch} />
         </div>
         <IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />

src/components/MobileMenuLinks/index.js

@@ -1,22 +1,12 @@
 import React from 'react'
-import { NavLink } from 'react-router-dom'
+import { ButtonNewBallot } from '../ButtonNewBallot'
+import { NavigationLinks } from '../NavigationLinks'
 
-export const MobileMenuLinks = ({ onMenuToggle, navigationData }) => {
+export const MobileMenuLinks = ({ onClick, networkBranch }) => {
   return (
-    <div className="hd-MobileMenuLinks">
-      <div className="hd-MobileMenuLinks_ItemsContainer" onClick={onMenuToggle}>
-        {navigationData.map(item => (
-          <NavLink
-            activeClassName="hd-MobileMenuLinks_Item-active"
-            className={`hd-MobileMenuLinks_Item ${item.class}`}
-            exact
-            to={item.url}
-          >
-            <i className={`link-icon ${item.icon}`} />
-            <span className="hd-MobileMenuLinks_Text">{item.title}</span>
-          </NavLink>
-        ))}
-      </div>
+    <div className={`hd-MobileMenuLinks hd-MobileMenuLinks-${networkBranch}`} onClick={onClick}>
+      <NavigationLinks networkBranch={networkBranch} />
+      <ButtonNewBallot networkBranch={networkBranch} />
     </div>
   )
 }