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>
 	)
 }
 

src/public/app.js

@@ -0,0 +1,119 @@
+const body = document.querySelector('body')
+
+function isFolded(element) {
+	return element.classList.contains('HMenu--folded')
+}
+
+function isUnfolded(element) {
+	return element.classList.contains('HMenu--unfolded')
+}
+
+function isOpen(element) {
+	return element.classList.contains('HMenu--open')
+}
+
+function isClosed(element) {
+	return element.classList.contains('HMenu--closed')
+}
+
+function foldMenu(element) {
+	element.classList.remove('HMenu--unfolded')
+	element.classList.add('HMenu--folded')
+
+	return element
+}
+
+function unfoldMenu(element) {
+	element.classList.remove('HMenu--folded')
+	element.classList.add('HMenu--unfolded')
+
+	return element
+}
+
+function openMenu(element) {
+	body.classList.add('no-scroll')
+	element.classList.remove('HMenu--closed')
+	element.classList.add('HMenu--open')
+
+	return element
+}
+
+function closeMenu(element) {
+	body.classList.remove('no-scroll')
+	element.classList.remove('HMenu--open')
+	element.classList.add('HMenu--closed')
+
+	return element
+}
+
+function toggleMenu(element) {
+	if (isOpen(element)) {
+		closeMenu(element)
+	} else {
+		openMenu(element)
+	}
+}
+
+function createToggle() {
+	return `
+    <div>
+      <a class="HMenu__toggle" href="#">✕</a>
+    </div>
+    `
+}
+
+function getToggleWidth(element) {
+	const value = element.dataset.toggleWidth
+	if (value) return Number(value)
+
+	return 700
+}
+
+function runHmenu() {
+	const menus = [...document.querySelectorAll('.HMenu')]
+
+	function initMenus() {
+		const w = body.clientWidth
+
+		return menus
+			.map(menu => {
+				const toggle = menu.querySelector('.HMenu__toggle')
+				toggle.addEventListener('click', e => {
+					e.preventDefault()
+					toggleMenu(menu)
+				})
+
+				const toggleWidth = getToggleWidth(menu)
+				const foldedState = w < toggleWidth
+
+				if (foldedState) {
+					return foldMenu(menu)
+				} else {
+					return unfoldMenu(menu)
+				}
+			})
+			.map(menu => closeMenu(menu))
+	}
+
+	function handleMenus() {
+		const w = body.clientWidth
+
+		return menus.map(menu => {
+			const toggleWidth = getToggleWidth(menu)
+			const foldedState = w < toggleWidth
+
+			if (foldedState && !isFolded(menu)) {
+				return foldMenu(menu)
+			} else if (!foldedState && isFolded(menu)) {
+				return unfoldMenu(menu)
+			} else {
+				return menu
+			}
+		})
+	}
+
+	initMenus()
+	window.addEventListener('resize', handleMenus)
+}
+
+runHmenu()

src/style/components/main-menu.scss

@@ -1,8 +1,6 @@
 @import "../variables";
 
 .main-menu {
-  white-space: nowrap;
-
   font-size: $normal-font-size;
 
   list-style: none;

src/style/components/navigation.scss

@@ -1,16 +1,8 @@
 @import "../variables";
 
 .navigation {
-  -webkit-overflow-scrolling: touch;
-
   width: 100%;
-  z-index: 100;
-  overflow-x: scroll;
-  position: fixed;
-  top: 0;
-  white-space: nowrap;
-
-  background-color: rgba(255, 255, 255, 0.95);
+  background-color: white;
 
   &__body {
     display: flex;

src/style/hmenu.scss

@@ -0,0 +1,130 @@
+.no-scroll {
+  overflow: hidden;
+}
+
+.HMenu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  position: relative;
+
+  list-style: none;
+}
+
+.HMenu li {
+  margin: 0 1em .5em 0;
+}
+
+
+
+
+.HMenu--folded.HMenu--closed {
+  justify-content: center;
+}
+
+.HMenu--folded.HMenu--closed .HMenu__item{
+  display: none;
+}
+
+.HMenu--folded .HMenu__item.HMenu__item--cur{
+  display: block;
+}
+
+
+
+
+
+
+.HMenu__toggle {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: 3em;
+  font-size: 1rem;
+}
+
+
+
+
+
+
+.HMenu--unfolded {
+  margin-left: 1em;
+}
+
+.HMenu--unfolded .HMenu__toggle {
+  display: none;
+}
+
+
+
+
+
+.HMenu--folded.HMenu--open {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  //background-color: rgba(169, 144, 97, 0.95);
+  background-color: rgba(255, 255, 255, 0.95);
+
+  flex-direction: column;
+  text-align: center;
+
+  overflow-y: auto;
+
+  font-size: 1.5rem;
+
+  /*transition: opacity 0.5s ease-in-out;*/
+  /*-webkit-transition: opacity 0.5s ease-in-out;*/
+}
+
+
+
+
+
+
+._HMenu--folded li:last-child {
+  margin-bottom: 2em;
+}
+
+
+
+
+
+.HMenu__item {
+  max-width: 10em;
+}
+
+
+
+
+
+
+
+.HMenu__toggle {
+  padding: 0 .5em;
+}
+
+.HMenu__toggle a {
+  text-decoration: none;
+  border: none;
+}
+
+.HMenu__toggle a:hover {
+  font-weight: bold;
+}

src/style/style.scss

@@ -39,6 +39,7 @@
 @import "footer";
 
 @import "kazimir/video";
+@import "hmenu";
 
 // THEMES
 

src/views/main.hbs

@@ -114,6 +114,8 @@
 
 {{{content}}}
 
+<script src="app.js"/>
+
 <script>
     function initDisqus() {
         const script = document.createElement('script')