Menu component refactoring
This commit is contained in:
1 parent
3f4ffdb93a
commit
36ed564231
1 file changed
+14
-32
+14
-32
@@ -1,9 +1,7 @@
|
||||
import React from 'react'
|
||||
const getPathWithNoTrailingSlas = require('../lib/url').getPathWithNoTrailingSlash
|
||||
import {getPathWithNoTrailingSlash} from '../lib/url'
|
||||
|
||||
const hasSubmenu = item => !!item.items
|
||||
const doDrawSubmenu = item => false //item.active && hasSubmenu(item)
|
||||
const itemUrl = url => getPathWithNoTrailingSlas(url)
|
||||
const itemUrl = url => getPathWithNoTrailingSlash(url)
|
||||
|
||||
const selectedClassName = flag => flag
|
||||
? 'selected'
|
||||
@@ -13,10 +11,12 @@ const hmenuCurClassName = flag => flag
|
||||
? 'HMenu__item--cur'
|
||||
: ''
|
||||
|
||||
const MenuItem = ({ active, text, url }) => (active
|
||||
? <span>{text}</span>
|
||||
: <a href={itemUrl(url)}>{text}</a>
|
||||
)
|
||||
const MenuItem = ({ active, text, url }) => active
|
||||
? (
|
||||
<span>{text}</span>
|
||||
) : (
|
||||
<a href={itemUrl(url)}>{text}</a>
|
||||
)
|
||||
|
||||
const MenuToggle = () => (
|
||||
<div className="HMenu__toggle">
|
||||
@@ -24,32 +24,14 @@ const MenuToggle = () => (
|
||||
</div>
|
||||
)
|
||||
|
||||
export const Menu = ({ items }) => {
|
||||
const content = items.map((item, index) => (
|
||||
<li key={index}
|
||||
className={`HMenu__item ${hmenuCurClassName(item.highlighted)} ${item.color} ${selectedClassName(item.highlighted)}`}
|
||||
>
|
||||
<MenuItem {...item} />
|
||||
export const Menu = ({ items }) => (
|
||||
<menu className="main-menu HMenu" data-toggle-width="1024">
|
||||
<MenuToggle />
|
||||
|
||||
{!doDrawSubmenu(item) ? null : (
|
||||
<Submenu key={index} items={item.items} />
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
|
||||
return (
|
||||
<menu className="main-menu HMenu" data-toggle-width="1024">
|
||||
<MenuToggle />
|
||||
|
||||
{content}
|
||||
</menu>
|
||||
)
|
||||
}
|
||||
|
||||
const Submenu = ({ items }) => (
|
||||
<menu className="main-menu__submenu">
|
||||
{items.map((item, index) => (
|
||||
<li key={index} className={`${item.color} ${selectedClassName(item.active)}`}>
|
||||
<li key={index}
|
||||
className={`HMenu__item ${hmenuCurClassName(item.highlighted)} ${item.color} ${selectedClassName(item.highlighted)}`}
|
||||
>
|
||||
<MenuItem {...item} />
|
||||
</li>
|
||||
))}
|
||||
|
||||
Reference in new issue
Block a user