Whatever I do the NavLinks are unclickable

navlinksbroken.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { palette } from 'styled-theme'
import glamorous from 'glamorous';
import { Link } from 'components';
import NavLink from 'react-router-dom/Navlink';

const NavGlam = glamorous.div(
  {
    display: 'flex',
    flexDirection: 'row',
    width:'100%',
    pointerEvents: 'none',
    listStyle: 'none',
    fontWeight: 'bolder',
    backgroundColor: 'purple',
  }
);

const NavGlamLi = glamorous.div(
  {
    display: 'flex',
    flex:'1',
    fontWeight: 'bolder',
    alignItems: 'center',
    verticalAlign: 'center',
    pointerEvents: 'none',
    textAlign: 'center',
    padding: '10px',
    margin: '10px'
  },
  ({clicked})=>({
    backgroundColor:clicked==='true'?`tomato`:`black`,
    color:clicked==='true'?`white`:`orange`
  })
);

const styles = {
  navlink: {
    width: "100%",
    height: "100%",
    zIndex: '999'
  }
}

class PrimaryNavigationGlam extends Component{
  constructor(props){
    super(props);
    this.state={
    }
  }

  componentDidMount(){
    console.log('inside PrimaryNavigationGlam and clicked is ', this.props.clicked);
    console.log(this.props.clicked==='emoji'?`true`:`false`);
  }



      navfunk(clicked){
        if (clicked==='true'){
          return(
            {
              display: 'flex',
              flex:'1',
              fontWeight: 'bolder',
              alignItems: 'center',
              verticalAlign: 'center',
              pointerEvents: 'none',
              textAlign: 'center',
              padding: '10px',
              margin: '10px',
              backgroundColor: 'tomato',
              color: 'white',
              textDecoration: 'none'
            }
          )
        }else{
          return(
            {
              display: 'flex',
              flex:'1',
              fontWeight: 'bolder',
              alignItems: 'center',
              verticalAlign: 'center',
              pointerEvents: 'none',
              textAlign: 'center',
              padding: '10px',
              margin: '10px',
              backgroundColor: 'black',
              color: 'orange',
              textDecoration: 'none'
            }
          )
        }
      }

      // <NavGlamLi clicked={this.props.clicked==='home'?`true`:`false`}>

  render(){



    return (
      <NavGlam
      >
        <NavLink style={this.navfunk(this.props.clicked==='home'?`true`:`false`)} to="/home" exact activeClassName="active">Home</NavLink>
        <NavLink style={this.navfunk(this.props.clicked==='about'?`true`:`false`)}   to="/about" activeClassName="active">About</NavLink>
        <NavLink  style={this.navfunk(this.props.clicked==='posts'?`true`:`false`)}  to="/posts" activeClassName="active">Posts</NavLink>
        <NavLink  style={this.navfunk(this.props.clicked==='message'?`true`:`false`)} to="/message" activeClassName="active">Message</NavLink>
        <NavLink style={this.navfunk(this.props.clicked==='pictureswapper'?`true`:`false`)}  to="/pictureswapper" activeClassName="active">Picture Swapper</NavLink>
        <NavLink  style={this.navfunk(this.props.clicked==='emoji'?`true`:`false`)} to="/emojimagic" activeClassName="active">Emoji Magic</NavLink>
      </NavGlam>
    )
  }
}
export default PrimaryNavigationGlam