Hmenu update + iPad horizontal

This commit is contained in:
tmshv committed 2017-06-03 20:31:39 +03:00
1 parent f478be03f5
commit 5e8948b8da
3 files changed
+15 -17

No files matched your search

+1 -1
View File
@@ -37,7 +37,7 @@ const Menu = ({items}) => {
</li> </li>
)) ))
return ( return (
<menu className="main-menu HMenu" data-toggle-width="900"> <menu className="main-menu HMenu" data-toggle-width="1024">
<MenuToggle/> <MenuToggle/>
{content} {content}
+9 -10
View File
@@ -1,5 +1,12 @@
const body = document.querySelector('body') const body = document.querySelector('body')
function isFoldedState(element) {
const w = body.clientWidth
const toggleWidth = getToggleWidth(element)
return w <= toggleWidth
}
function isFolded(element) { function isFolded(element) {
return element.classList.contains('HMenu--folded') return element.classList.contains('HMenu--folded')
} }
@@ -73,8 +80,6 @@ function runHmenu() {
const menus = [...document.querySelectorAll('.HMenu')] const menus = [...document.querySelectorAll('.HMenu')]
function initMenus() { function initMenus() {
const w = body.clientWidth
return menus return menus
.map(menu => { .map(menu => {
const toggle = menu.querySelector('.HMenu__toggle') const toggle = menu.querySelector('.HMenu__toggle')
@@ -83,10 +88,7 @@ function runHmenu() {
toggleMenu(menu) toggleMenu(menu)
}) })
const toggleWidth = getToggleWidth(menu) if (isFoldedState(menu)) {
const foldedState = w < toggleWidth
if (foldedState) {
return foldMenu(menu) return foldMenu(menu)
} else { } else {
return unfoldMenu(menu) return unfoldMenu(menu)
@@ -96,11 +98,8 @@ function runHmenu() {
} }
function handleMenus() { function handleMenus() {
const w = body.clientWidth
return menus.map(menu => { return menus.map(menu => {
const toggleWidth = getToggleWidth(menu) const foldedState = isFoldedState(menu)
const foldedState = w < toggleWidth
if (foldedState && !isFolded(menu)) { if (foldedState && !isFolded(menu)) {
return foldMenu(menu) return foldMenu(menu)
+5 -6
View File
@@ -118,7 +118,7 @@ $hmenu-icon-height: 32px;
.HMenu--folded.HMenu--open { .HMenu--folded.HMenu--open {
z-index: 100; z-index: 100;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -143,11 +143,6 @@ $hmenu-icon-height: 32px;
/*-webkit-transition: opacity 0.5s ease-in-out;*/ /*-webkit-transition: opacity 0.5s ease-in-out;*/
} }
.HMenu--folded .HMenu__item {
max-width: 10em;
}
._HMenu--folded li:last-child { ._HMenu--folded li:last-child {
@@ -155,6 +150,10 @@ $hmenu-icon-height: 32px;
} }
@media (max-width: $mobile-width) { @media (max-width: $mobile-width) {
.HMenu--folded .HMenu__item {
max-width: 10em;
}
.HMenu--folded.HMenu--closed { .HMenu--folded.HMenu--closed {
.HMenu__toggle { .HMenu__toggle {
a { a {