diff --git a/src/components/Menu.js b/src/components/Menu.js index dcf3ebea..39308008 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -37,7 +37,7 @@ const Menu = ({items}) => { )) return ( - + {content} diff --git a/src/public/app.js b/src/public/app.js index 0f82cc22..60c666a0 100644 --- a/src/public/app.js +++ b/src/public/app.js @@ -1,5 +1,12 @@ const body = document.querySelector('body') +function isFoldedState(element) { + const w = body.clientWidth + const toggleWidth = getToggleWidth(element) + + return w <= toggleWidth +} + function isFolded(element) { return element.classList.contains('HMenu--folded') } @@ -73,8 +80,6 @@ function runHmenu() { const menus = [...document.querySelectorAll('.HMenu')] function initMenus() { - const w = body.clientWidth - return menus .map(menu => { const toggle = menu.querySelector('.HMenu__toggle') @@ -83,10 +88,7 @@ function runHmenu() { toggleMenu(menu) }) - const toggleWidth = getToggleWidth(menu) - const foldedState = w < toggleWidth - - if (foldedState) { + if (isFoldedState(menu)) { return foldMenu(menu) } else { return unfoldMenu(menu) @@ -96,11 +98,8 @@ function runHmenu() { } function handleMenus() { - const w = body.clientWidth - return menus.map(menu => { - const toggleWidth = getToggleWidth(menu) - const foldedState = w < toggleWidth + const foldedState = isFoldedState(menu) if (foldedState && !isFolded(menu)) { return foldMenu(menu) diff --git a/src/style/hmenu.scss b/src/style/hmenu.scss index 9a228d72..04d657c0 100644 --- a/src/style/hmenu.scss +++ b/src/style/hmenu.scss @@ -118,7 +118,7 @@ $hmenu-icon-height: 32px; .HMenu--folded.HMenu--open { z-index: 100; - + display: flex; align-items: center; @@ -143,11 +143,6 @@ $hmenu-icon-height: 32px; /*-webkit-transition: opacity 0.5s ease-in-out;*/ } -.HMenu--folded .HMenu__item { - max-width: 10em; -} - - ._HMenu--folded li:last-child { @@ -155,6 +150,10 @@ $hmenu-icon-height: 32px; } @media (max-width: $mobile-width) { + .HMenu--folded .HMenu__item { + max-width: 10em; + } + .HMenu--folded.HMenu--closed { .HMenu__toggle { a {