I've built a reatjs component header - with antd -- mobile/desktop.. I'm trying to reduce the repetitive code - generate the menu structure in one function.
I am also having issues with the menu in terms of trying to deactive all active links -- if the user has navigated to pages not on the menu.. like if they interact with the footer /terms -- it won't be on the /home page so I want to ensure home in the header menu is deselected.
- use the buildMenu function to render the menu for the desktop and mobile versions.
- resolve the deselecting/active issues if the user navigates to a page not on the menu - I tried looking into checking location paths - but it got messy.
here is the code base.
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Menu, Icon, Alert } from 'antd'
// assets
import LogoImage from '../../img/logo.png'
// css
import './header.scss'
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
// this is a class because it needs state
class Header extends Component {
constructor (props) {
super(props)
//console.log(this.props.current)
this.state = {
isHamburgerOpen: false,
current: this.props.current,
}
this.toggleHamburgerIcon = this.toggleHamburgerIcon.bind(this)
}
toggleHamburgerIcon () {
this.setState(prevState => ({
isHamburgerOpen: !prevState.isHamburgerOpen
}))
}
handleClick = (e) => {
//console.log('click ', e);
this.setState({
current: e.key,
});
}
componentDidMount() {
//console.log('did mount')
// window.location.pathname.substr(1)
}
buildMenu (menu) {
//build the menu and return it here
}
render () {
//console.log('this.state', this.state)
//console.log('this.props.current', this.props.current)
var menu = [
{
"title" : "Home",
"link" : "/home"
},
{
"title" : "Actions",
"link" : "/actions"
},
{
"title" : "Past SDQS",
"link" : "/past-sdq"
},
{
"title" : "Account",
"link" : "/account"
}/*,
{
"title" : "Sub page test",
"link" : "/sub",
"children" : [
{
"title" : "child sub",
"link" : "/child"
}
]
}*/
];
console.log("menu", menu);
return (
<div>
<nav className={`HeaderLandingNavOffcanvas ${this.state.isHamburgerOpen ? 'show' : ''}`}>
<h1 className='display-none nocontent'>Site navigation</h1>
<i className='anticon anticon-close closeOffsiteMenu' onClick={this.toggleHamburgerIcon}/>
<div className='row grid__row--offset--30'>
<div className='small-58 small-centered columns'>
<Menu
mode='inline'
onClick={this.handleClick}
selectedKeys={[this.state.current]}
>
{
menu.map(item => {
if (item.hasOwnProperty('children') && item.children.length > 0) {
//if the header menu comes with children make use of the submenu component
return (
<SubMenu className='menu-gtm' key={item.title} title={<span>{item.title}<Icon type='down' /></span>}>
{item.children.map(function (child) {
//If the lang file list additional children of the child, produce a grouped menu component
if (child.hasOwnProperty('children')) {
return (
<MenuItemGroup style={{textTransform: 'uppercase'}} key={item.title + ':' + child.title} title={child.title}>
{child.children.map(function (grandChild, index) {
return (
<Menu.Item className='menu-gtm-bundle' key={grandChild.title + index}>
<Link onClick={this.specifyBundleIsNull} to={grandChild.link}>{grandChild.title}
</Link>
</Menu.Item>
)
}, this)}
</MenuItemGroup>
)
} else {
//use a submenu item without group style
return (
<Menu.Item className='menu-gtm-service' key={item.title + ':' + child.title}>
<Link to={child.link}>
{child.title}
</Link>
</Menu.Item>
)
}
}, this)}
</SubMenu>
)
} else {
//If the menu has not child elements - simple nav elements without dropdown menu
return (
<Menu.Item className='menu-gtm' key={item.title}>
<Link to={item.link}>{item.title}</Link>
</Menu.Item>
)
}
}, this)
}
</Menu>
</div>
</div>
</nav>
{/* Large Header */}
<header className='ant-design-header transition show-for-large-up transparent'>
<Row align='middle' type='flex' className='header-row-offset' style={{height: '100%'}}>
<Col span={24}>
<Row align='middle' type='flex' className='header-row-offset' style={{maxWidth: '1250px', marginLeft: 'auto', marginRight: 'auto'}}>
<Col xs={10} sm={6} md={6}>
<Link to='/'>
<img className='-logo transition' src={LogoImage} alt='logo' />
</Link>
</Col>
<Col xs={0} sm={0} md={18}>
<Menu
className='show-for-large-up'
mode='horizontal'
onClick={this.handleClick}
selectedKeys={[this.state.current]}
style={{ float: 'right', marginTop: '5px' }}
>
{
menu.map(item => {
if (item.hasOwnProperty('children') && item.children.length > 0) {
//if the header menu comes with children make use of the submenu component
return (
<SubMenu className='menu-gtm' key={item.title} title={<span>{item.title}<Icon type='down' /></span>}>
{item.children.map(function (child) {
//If the lang file list additional children of the child, produce a grouped menu component
if (child.hasOwnProperty('children')) {
return (
<MenuItemGroup style={{textTransform: 'uppercase'}} key={item.title + ':' + child.title} title={child.title}>
{child.children.map(function (grandChild, index) {
return (
<Menu.Item className='menu-gtm-bundle' key={grandChild.title + index}>
<Link onClick={this.specifyBundleIsNull} to={grandChild.link}>{grandChild.title}
</Link>
</Menu.Item>
)
}, this)}
</MenuItemGroup>
)
} else {
//use a submenu item without group style
return (
<Menu.Item className='menu-gtm-service' key={item.title + ':' + child.title}>
<Link to={child.link}>
{child.title}
</Link>
</Menu.Item>
)
}
}, this)}
</SubMenu>
)
} else {
//If the menu has not child elements - simple nav elements without dropdown menu
return (
<Menu.Item className='menu-gtm' key={item.title}>
<Link to={item.link}>{item.title}</Link>
</Menu.Item>
)
}
}, this)
}
</Menu>
</Col>
<Col xs={{ span: 4, offset: 10 }} sm={{ span: 4, offset: 14 }} md={0}>
<div style={{ float: 'right', height: '50px', marginRight: '10px' }}>
<div className={`hamburger--elastic hamburger hamburger_nav_button right-off-canvas-toggle ${this.state.isHamburgerOpen ? 'is-active' : ''}`} onClick={this.toggleHamburgerIcon} style={{ marginTop: '5px' }}>
<span className='hamburger-box'>
<span className='hamburger-inner' />
</span>
</div>
</div>
</Col>
</Row>
</Col>
</Row>
</header>
</div>
)
}
}
export default Header
I managed to refactor the header - and use a function to render the menu for both mobile and desktop. -- I still have an issue of "deselecting" or "selecting" the menu - when the user is NOT on a menu link. Any suggestions on how to do this or other enhancements?
Some have proposed using redux to set the state -- but I felt that if the only component that needs this information already can tap into the global location its not necessary? window.location.pathname.substr(1) - would get me the path -- but I am unsure if its something I can invoke when the component gets rendered... I've tried to expose other component... functions to see if that replenishes when page switching occurs - but I am not sure.