Expected behavior

• (1) Navbar items collapse into hamburger menu
• (2) Hamburger icon is visible & can be clicked
• (3) When icon is clicked, navbar items are displayed

Actual behavior

• (1) Navbar items collapse into hamburger menu
• (2) No visible hamburger menu is displayed
• (3) When whitespace is clicked, navbar items are displayed

Resources (screenshots, code snippets etc.)

import React, { Component } from 'react';
import { LightLogo } from '../Illustration/LightLogo';
import Globe from '../../images/Globe.svg';
import Router from 'next/router';
import Link from 'next/link';
import { NavWrapper } from './HeaderStyles';

import {
  MDBNavbarBrand,
  MDBIcon,
  MDBNavbar,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavbarToggler,
  MDBCollapse,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem } from 'mdbreact';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }

  toggleCollapse = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  render() {
    return (
        <NavWrapper>
          <MDBNavbar expand='lg' className='pl-5 pr-5'>
            <MDBNavbarBrand className='pr-5'>
              <Link href='/'>
                <a><LightLogo width='40px' height='36px' /></a>
              </Link>
            </MDBNavbarBrand>
            <MDBNavbarToggler onClick={this.toggleCollapse} />
            <MDBCollapse id='navbarCollapse3' isOpen={this.state.isOpen} navbar>
              <MDBNavbarNav left>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>Insurance <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>Technology <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>Services <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
                <MDBDropdown>
                  <MDBDropdownToggle nav>
                    <span className='mr-2'>About <MDBIcon icon='angle-down' className='ml-1 nav-caret-icon'/></span>
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <Link href='/'>
                        <a>Home</a>
                      </Link>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBNavbarNav>
              <MDBNavbarNav right className='d-flex align-items-center justify-content-center'>
                <MDBNavItem className='d-flex align-items-center mr-4 pr-1'>
                  <div className="help-nav-link-text pr-1">Cyber incident?</div>
                  <Link href='#!'>
                    <a id='help-nav-link'>Get Help</a>
                  </Link>
                </MDBNavItem>
                <MDBNavItem className="align-items-center">
                  <Link href='#!'>
                    <a id='login-nav-link'>Log In</a>
                  </Link>
                </MDBNavItem>
                  <MDBDropdown dropleft>
                  <MDBDropdownToggle nav>
                    <img
                        height='18px'
                        width='18px'
                        src={Globe}
                        loading='lazy'
                        alt='USA Flag'
                    />
                    <MDBIcon icon='angle-down' className='ml-2 nav-caret-icon'/>
                  </MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <Link href='#'>
                          <a className='nav-link'>U.S.</a>
                        </Link>
                      </MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>
                        <Link href='#'>
                          <a className='nav-link'>Canada</a>
                        </Link>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
              </MDBNavbarNav>
            </MDBCollapse>
          </MDBNavbar>
        </NavWrapper>
    );
  }
}

export default Header;