New Menu friendly for Mobile

src/components/Menu.js

@@ -9,6 +9,10 @@ const selectedClassName = flag => flag
 	? 'selected'
 	: ''
 
+const hmenuCurClassName = flag => flag
+	? 'HMenu__item--cur'
+	: ''
+
 const MenuItem = ({active, text, url}) => (active
 		? <span>{text}</span>
 		: <a href={itemUrl(url)}>{text}</a>
@@ -17,16 +21,23 @@ const MenuItem = ({active, text, url}) => (active
 const Menu = ({items}) => {
 	const content = items.map((item, index) => (
 		<li key={index}
-			className={`${item.color} ${selectedClassName(item.highlighted)}`}
+			className={`HMenu__item ${hmenuCurClassName(item.highlighted)} ${item.color} ${selectedClassName(item.highlighted)}`}
 		>
 			<MenuItem {...item}/>
-			{!doDrawSubmenu(item) ? null :
+
+			{!doDrawSubmenu(item) ? null : (
 				<Submenu key={index} items={item.items}/>
-			}
+			)}
 		</li>
 	))
 	return (
-		<menu className="main-menu">{content}</menu>
+		<menu className="main-menu HMenu" data-toggle-width="900">
+			<div className="HMenu__toggle">
+				<a href="#">✕</a>
+			</div>
+
+			{content}
+		</menu>
 	)
 }