ReactJS Web Messenger Header Component

import React from 'react';
import { NavLink, Link } from 'react-router-dom';
import './style.css';

/**
* @author Rizwan Khan
* @function Header
**/

const Header = (props) => {
  return(
    <header className="header">
        <div style={{display: 'flex'}}>
          <div className="logo">Web Messenger</div>
            <ul className="leftMenu">
              <li><NavLink to={'/login'}>Login</NavLink></li>
              <li><NavLink to={'/signup'}>Sign up</NavLink></li>
            </ul>
        </div>
          <div style={{margin: '20px 0', color: '#fff', fontWeight: 'bold'}}>Hi Riz</div>
        <ul className="menu">
            <li>
                <Link to={'#'} onClick={props.logout}>Logout</Link>
            </li> 
        </ul>
    </header>
   )

 }

export default Header

.header{
    width: 100%;
    position: relative;
    height: 60px;
    display: flex;
    background: #1b5ff9;
    justify-content: space-between;
    box-sizing: border-box;
}

.logo{
    font-size: 20px;
    color: #fff;
    text-transform: capitalize;
    font-weight: bold;
    margin: 18px;
    text-shadow: 0 0;
}

.menu{
    display: flex;
    margin: 20px;
}

.menu > li > a{
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0;
    text-decoration: none;
}

.leftMenu{
    display: flex; 
    color: #fff; 
    margin: 20px;
}

.leftMenu > li{
    margin: 0 10px;
}

.leftMenu > li > a{
    color: #fff;
}

.leftMenu > li > a.active{
    font-weight: bold;
}