Бургер и выпадающая панель Navbar не работают должным образом, используя React / Bulma

Question

У меня проблемы с моим бульваром Navbar - Пожалуйста, смотрите мой Navbar в Github

Желаемое поведение

• переход бургер Navbar как это site
• навигационное меню, подобное this site (занимает всю страницу, у menu-item-has-children есть хорошая стрелка / эффект выпадающего меню)

Фактическое поведение

• навигационная панель исчезает, если я слишком сильно уменьшаю страницу * Раскрывающийся список 1020 *
• занимает только часть страницы
• дочерние элементы меню отображаются на верх других пунктов меню (без стрелки раскрывающегося списка)

Navbar. js

import React from 'react'

import './style.scss'

const Navbar = () => (
  <div className="hero-head is-hidden-mobile">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    ></link>
    <nav className="navbar colorGradient">
      <div className="container">
        <div className="navbar-brand">
          <a className="navbar-item" href="/">
            <h1 className="title is-size-3 is-uppercase has-text-white-ter no-hover">
              The up
            </h1>
          </a>
          <label
            role="button"
            className="navbar-burger burger"
            aria-label="menu"
            aria-expanded="false"
            htmlFor="nav-toggle-state"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </label>
        </div>
        <input type="checkbox" id="nav-toggle-state" />
        <div id="navbarMenuHeroA" className="navbar-menu">
          <div className="navbar-end">
            <span className="navbar-item">
              <div className="dropdown is-hoverable is-right">
                <div className="dropdown-trigger">
                  <a
                    href="/money-management"
                    className="navbarLink has-text-white"
                    aria-haspopup="true"
                    aria-controls="dropdown-menu"
                  >
                    <span className="icon no-padding">
                      <i className="fas fa-dollar-sign"></i>
                    </span>
                    <span>Money Management</span>
                  </a>
                </div>
                <div className="dropdown-menu" id="dropdown-menu" role="menu">
                  <div className="dropdown-content">
                    <a
                      href="/money-management/budgeting"
                      className="dropdown-item"
                    >
                      Budgeting
                    </a>
                    <a
                      href="/money-management/investing"
                      className="dropdown-item"
                    >
                      Investing
                    </a>
                    <a
                      href="/money-management/calculators"
                      activeclassname="is-active"
                      className="dropdown-item is-active"
                    >
                      Calculators
                    </a>
                    <hr className="dropdown-divider"></hr>
                    <a href="/" className="dropdown-item">
                      With a divider
                    </a>
                  </div>
                </div>
              </div>
            </span>
            <span className="navbar-item">
              <div className="dropdown is-hoverable is-right">
                <div className="dropdown-trigger">
                  <a
                    href="/jobs"
                    className="navbarLink has-text-white"
                    aria-haspopup="true"
                    aria-controls="dropdown-menu"
                  >
                    <span className="icon no-padding">
                      <i className="fas fa-suitcase"></i>
                    </span>
                    <span>Jobs</span>
                  </a>
                </div>
                <div className="dropdown-menu" id="dropdown-menu" role="menu">
                  <div className="dropdown-content">
                    <a href="/jobs/" className="dropdown-item">
                      Strategy
                    </a>
                    <a href="/jobs/industry-charts" className="dropdown-item">
                      Industry Charts
                    </a>
                  </div>
                </div>
              </div>
            </span>
            <div>
              <div className="navVR">&nbsp;</div>
            </div>
            <span className="navbar-item">
              <div className="dropdown is-hoverable is-right">
                <div className="dropdown-trigger">
                  <a
                    href="/misc"
                    className="navbarLink has-text-white"
                    aria-haspopup="true"
                    aria-controls="dropdown-menu"
                  >
                    <span className="icon no-padding">
                      <i className="fas fa-ellipsis-h"></i>
                    </span>
                    <span>Misc</span>
                  </a>
                </div>
                <div className="dropdown-menu" id="dropdown-menu" role="menu">
                  <div className="dropdown-content">
                    <a href="/misc/more-calculators" className="dropdown-item">
                      More Calculators
                    </a>
                    <a href="/misc/" className="dropdown-item">
                      ...
                    </a>
                  </div>
                </div>
              </div>
            </span>
          </div>
        </div>
      </div>
    </nav>
  </div>
)

export default Navbar

style.s css (для navbar. js)

.navbarLink {
	vertical-align: middle;
	border: none;
	background: none;
	font-size: .9rem;
}

.colorGradient {
	display: flex;
	background: linear-gradient(to left, $night-blue, $sand-tan);
}

nav.navbar.colorGradient div.container {
	width: 100%;
    padding: 0 64px;
}

div a.navbar-item:hover {
	background-color: transparent;
}

div.dropdown-menu {
	min-width: 100%;
}

div a.dropdown-item {
	font-size: 1rem;
	color: white;
}

.icon.no-padding {
	padding: 0 12px;
	border: 0;
	margin: 0;
}

.navVR {
	margin-top: 19px;
	width:1px;
	border-left: 1px white;
	border-right: 1px white;
	height:15px;
	margin-left: 3px;
	margin-right: 3px;
}

#nav-toggle-state {
	display: none;
  }
  
#nav-toggle-state:checked ~ .navbar-menu {
	display: block;
	background: transparent;
	float: right;
	text-align: right;
}

.navbar-menu .navbar-end .navbar-item .dropdown .dropdown-menu .dropdown-content {
	background-color: transparent;
}

// #nav-toggle-state:checked ~ .navbar-menu .navbar-end .navbar-item .dropdown .dropdown-menu .dropdown-content .navbar-item {
// 	display: contents;
// }

#nav-toggle-state:checked ~ .navbar-menu .navbar-end .navVR {
	display: none;
}