nickschot / ember-mobile-menu Goto Github PK

View Code? Open in Web Editor NEW

34.0 34.0 9.0 8.71 MB

A draggable sidebar menu for Ember

Home Page: https://nickschot.github.io/ember-mobile-menu

License: MIT License

JavaScript 84.18% HTML 2.88% Handlebars 5.94% SCSS 7.00%

ember-mobile-menu's People

Contributors

Stargazers

Watchers

Forkers

betocantu93 guibahia nullvoxpopuli bartocc johanrd jamemackson thisdaemondave luxferresum mansona

ember-mobile-menu's Issues

Remove ember-mobile-core dependency

At this time it's really only used for the very compact Tween implementation it provides. Two options:

Extract it
Use https://www.npmjs.com/package/@tweenjs/tween.js (check size!)

Add fixed width mode for desktop

I've been thinking of a way to improve the usability of this addon on desktop browsers. I'm thinking of the following:

Should park the sidebar next to the content.
Remove any position fixed markup so that it becomes part of the normal flow.
Remove the mask.
Gestures should be disabled in this mode.

I'm aware this does not cover all use cases (yet?). Input is welcome!

To be considered: a mode where the sidebar pushes the content (like on emberlcear.io. cc @NullVoxPopuli ) where gestures can still be enabled (i.e. for ipad use). The downside of this mode (which I have used in the past too) is that it causes many many reflows resulting in a degraded framerate for the duration of the animation. I used to partially cover this up by delaying the resize of the main content until after the sidebar transition is done. This still gives good animated feel, but has better performance.

Release versioning and ember 4 readiness

Hi.

ember install ember-mobile-menu installs the latest release from npm. v2.1.1 is quite far behind master (with quite some outdated dependencies).

Especially ember-concurrency needs an update to support ember 4. (master may actually also need an update to ember-concurrency v2.2.0).

Not sure about the plans/status regarding new releases and/or supporting ember 4, so asking here before making possible PRs, @nickschot.

Add option to configure the spring

Add documentation

Add compiled css support

When SASS is not present, import the base structural css automatically.

Add proper a11y

add aria-hidden to closed menus (fixed by #86)
add aria attributes to provided toggle buttons (aria-controls etc.)

Make menu(-wrapper) "embeddable"

Some challenges:

in the calculation and use of the pan events we assume the entire viewport is used
proper (functional) styling for both use cases

Result:

embeddable menu's for the docs
more "complex" interfaces become possible

Add more generic way to "lock pan"

in v1 this was intertwined with ember-mobile-core's lockPan function & panning service. I'd like to make this more general and decouple from ember-mobile-core.

We'll like need:

a boolean argument on MobileMenuWrapper to enable/disable pan starts (i.e. something else is panning)
hooks which fire on start/end (so the user can lock pan on this menu)

Lazy render menus

Investigate:

Just in time rendering
Deferred initial rendering
???

Setting maxWidth of menu to 100% of the viewport

One of my projects need this feature which requires the menu to overlay all the contents below.

[3.0.0-beta.3] Cannot read properties of undefined (reading 'extend') at link-to.js

When running an app with ember-mobile-menu 3.0.0-beta.3 from embroider 1.5.0 and ember-source 4.3.0, I get the following error:

TypeError: Cannot read properties of undefined (reading 'extend') at 
eval (webpack://webapp/./node_modules/ember-mobile-menu/components/mobile-menu/link-to.js?:15:143)

Maybe be related to #229? or some build / package.json entanglement happening with the recent migration to monorepo? (I see there is a package.json both in root and in /addon). Please tell me if you are not able to reproduce – I'll try to create a minimal reproduction.

Investigate alternative to ember-did-resize-modifier

The addon uses https://github.com/wnr/element-resize-detector under the hood which is quite a big library. Maybe we can use something simpler (for modern browsers).

Menu in position relative element

Hi,
In demo page is menu shown in like div rectangle. I would like to show menu in position relative div but it is always shown over whole page. How can I achieve it?

Add Content mask for reveal style menus

Currently you can only close these menus through a drag or a click on a menu item.

overflow: hidden set by body-scroll-lock not cleaned up when MobileMenu is destroyed

Should implement a willDestroy hook which disables body-scroll-lock.

Dependency error in fastboot

When using this addon in Fastboot it currently errors because a dependency is not whitelisted. This is actually a dependency of another addon ember-useragent of this addon.

Possible solutions I can think of right now:

Add ember-useragent as a package to the app in the blueprint of the addon
Whitelist the node module ua-parser-js again (ugly?) in this addon
Add a Fastboot section to the docs

Invalid ember-usable dependency when using Yarn 2

The ember-usable ref in package.json is problematic when referencing ember-mobile-menu in a project using Yarn 2.

The commit must be referenced with its entire 40 chars.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

Lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency ember-cli to v4.8.0
Update dependency ember-gesture-modifiers to v4
Update dependency eslint to v8
Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

pnpm/action-setup v2.2.4

actions/setup-node v3

actions/checkout v3

pnpm/action-setup v2.2.4

actions/setup-node v3

actions/checkout v3

pnpm/action-setup v2.2.4

actions/setup-node v3

npm

addon/package.json

@ember/legacy-built-in-components ^0.4.1

@ember/render-modifiers ^2.0.0

@ember/test-waiters ^3.0.0

@glimmer/component ^1.0.4

@glimmer/tracking ^1.0.4

body-scroll-lock ^3.0.1

ember-auto-import ^2.2.4

ember-cli-babel ^7.26.11

ember-cli-htmlbars ^6.0.1

ember-concurrency ^2.1.0

ember-could-get-used-to-this ^1.0.0

ember-gesture-modifiers ^3.0.0

ember-on-resize-modifier ^1.0.0

ember-set-body-class ^1.0.1

tracked-maps-and-sets ^3.0.0

wobble ^1.5.1

babel-eslint 10.1.0

ember-source 4.8.0

ember-template-lint 4.16.1

eslint 7.32.0

eslint-config-prettier 8.5.0

eslint-plugin-ember 11.1.0

eslint-plugin-node 11.1.0

eslint-plugin-prettier 4.2.1

eslint-plugin-qunit 7.3.1

npm-run-all 4.1.5

prettier 2.7.1

sass 1.55.0

webpack 5.74.0

ember-source *

node 14.* || >= 16

docs/package.json

@ember/optional-features 2.0.0

@ember/test-helpers 2.8.1

@glimmer/component 1.1.2

@glimmer/tracking 1.1.2

babel-eslint 10.1.0

broccoli-asset-rev 3.0.0

ember-auto-import 2.4.3

ember-cli 4.7.0

ember-cli-addon-docs 5.0.0

ember-cli-addon-docs-yuidoc 1.0.0

ember-cli-babel 7.26.11

ember-cli-dependency-checker 3.3.1

ember-cli-deploy 1.0.2

ember-cli-deploy-build 2.0.0

ember-cli-deploy-git 1.3.4

ember-cli-deploy-git-ci 1.0.1

ember-cli-htmlbars 6.1.1

ember-cli-inject-live-reload 2.1.0

ember-cli-sass 11.0.1

ember-cli-sri 2.1.1

ember-cli-terser 4.0.2

ember-data 4.7.3

ember-disable-prototype-extensions 1.1.3

ember-export-application-global 2.0.1

ember-load-initializers 2.1.2

ember-page-title 7.0.0

ember-qunit 6.0.0

ember-resize-observer-polyfill 0.0.1

ember-resolver 8.0.3

ember-source 4.8.0

ember-source-channel-url 3.0.0

ember-template-lint 4.16.1

ember-try 2.0.0

eslint 7.32.0

eslint-config-prettier 8.5.0

eslint-plugin-ember 11.1.0

eslint-plugin-node 11.1.0

eslint-plugin-prettier 4.2.1

eslint-plugin-qunit 7.3.1

loader.js 4.7.0

npm-run-all 4.1.5

prettier 2.7.1

qunit 2.19.2

qunit-dom 2.0.0

sass 1.55.0

webpack 5.74.0

node 14.* || >= 16

package.json

release-it 15.5.0

node 16.18.0

test-app/package.json

@ember/optional-features 2.0.0

@ember/test-helpers 2.8.1

@embroider/test-setup 1.8.3

@glimmer/component 1.1.2

@glimmer/tracking 1.1.2

babel-eslint 10.1.0

broccoli-asset-rev 3.0.0

ember-auto-import 2.4.3

ember-cli 4.7.0

ember-cli-babel 7.26.11

ember-cli-dependency-checker 3.3.1

ember-cli-htmlbars 6.1.1

ember-cli-inject-live-reload 2.1.0

ember-cli-sass 11.0.1

ember-cli-sri 2.1.1

ember-cli-terser 4.0.2

ember-disable-prototype-extensions 1.1.3

ember-export-application-global 2.0.1

ember-load-initializers 2.1.2

ember-page-title 7.0.0

ember-qunit 6.0.0

ember-resolver 8.0.3

ember-sinon 5.0.0

ember-sinon-qunit 6.0.0

ember-source 4.8.0

ember-source-channel-url 3.0.0

ember-template-lint 4.16.1

ember-try 2.0.0

eslint 7.32.0

eslint-config-prettier 8.5.0

eslint-plugin-ember 11.1.0

eslint-plugin-node 11.1.0

eslint-plugin-prettier 4.2.1

eslint-plugin-qunit 7.3.1

loader.js 4.7.0

npm-run-all 4.1.5

prettier 2.7.1

qunit 2.19.2

qunit-dom 2.0.0

sass 1.55.0

webpack 5.74.0

node 14.* || >= 16

regex

.github/workflows/ci.yml

pnpm 7.13.5

Check this box to trigger a request for Renovate to run again on this repository

can this be used without sass?

just reading this page:
https://nickschot.github.io/ember-mobile-menu/versions/v2.0.0-beta.1/docs/usage

I don't use sass.
is there a way to have the compiled CSS used?

add documentation for yielded attributes/actions

Minimize `getBoundingClientRect` calls

We only really have to make these calls if the MobileMenuWrapper element gets resized.

Don't lock scroll in desktop modes

Currently the mobile-menu--open classes is set on the body which puts an overflow hidden on it so scroll is disabled. Great for mobile & certain modes, but not for desktop without mask or for squeeze modes.

Argument to set class on the menu mask and tray

Currently using <MobileMenu class='...'> sets it on the container. I'd love to use tailwind to style the tray.

Keep Open in Desktop Layout but toggle in Mobile Layout?

Is there a way to keep the menu visible and locked in desktop layout, but then toggle in mobile layout?

Resuming a pan while a finishing animation is running is not working

Menu immediately closes when you try this. We should fix this by cancelling the animation & taking the current position as the starting position for the pan handler.

Open/closed classes incorrectly applied

Right now two things seem broken

When closed both classes are applied.
During the finishing transition, none is applied.

Getting window.addEventListener is not a function TypeError in FastBoot

I'm getting the following error when running in fastboot.

My Error:

window.addEventListener is not a function
TypeError: window.addEventListener is not a function
    at eval (webpack://__ember_auto_import__/../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js?:30:10)
    at Module.../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor.js:130247:1)
    at __webpack_require__ (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor.js:130089:30)
    at Module.eval [as callback] (webpack://__ember_auto_import__//private/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/cache-732-bundler/staging/app.js?:22:51)
    at Module.exports (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:106:1)
    at Module._reify (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:143:1)
    at Module.reify (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:130:1)
    at Module.exports (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:104:1)
    at Module._reify (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:143:1)
    at Module.reify (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:130:1)
    at Module.exports (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:104:1)
    at requireModule (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/vendor/loader/loader.js:27:1)
    at Class._extractDefaultExport (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/addon-tree-output/ember-resolver/resolvers/classic/index.js:463:1)
    at Class.resolveOther (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/addon-tree-output/ember-resolver/resolvers/classic/index.js:123:1)
    at Class.resolve (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/addon-tree-output/ember-resolver/resolvers/classic/index.js:186:1)
    at resolve (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/container/index.js:1197:34)
    at Registry.resolve (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/container/index.js:744:19)
    at Registry.resolve (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/container/index.js:747:31)
    at factoryFor (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/container/index.js:296:36)
    at Container.factoryFor (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/container/index.js:215:12)
    at Class.factoryFor (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/runtime/lib/mixins/container_proxy.js:126:31)
    at componentFor (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8074:16)
    at lookupComponentPair (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8083:19)
    at lookupComponent (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8120:10)
    at RuntimeResolver._lookupComponentDefinition (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8411:16)
    at RuntimeResolver.lookupComponentHandle (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8233:35)
    at CompileTimeResolver.lookupComponent (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:2564:42)
    at DefaultCompileTimeResolverDelegate.lookupComponent (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:122:34)
    at resolveLayoutForTag (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:165:28)
    at IfResolvedComponent (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:838:19)
    at compileOp (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:743:14)
    at pushCompileOp (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:705:29)
    at concatStatements (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:1349:7)
    at compileStatements (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:2050:5)
    at maybeCompile (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:2039:16)
    at CompilableTemplateImpl.compile (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/opcode-compiler.js:2019:12)
    at JitVM.compile (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:5866:37)
    at Object.evaluate (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:2645:19)
    at AppendOpcodes.evaluate (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:1953:17)
    at LowLevelVM.evaluateSyscall (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:4856:20)
    at LowLevelVM.evaluateInner (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:4812:12)
    at LowLevelVM.evaluateOuter (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:4804:12)
    at JitVM.next (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:5751:22)
    at TemplateIteratorImpl.next (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:5878:20)
    at RootState.render (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8594:35)
    at runInAutotrackingTransaction (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/validator.js:74:7)
    at /var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8886:13
    at inTransaction (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@glimmer/runtime.js:1908:7)
    at InertRenderer._renderRoots (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8862:7)
    at InertRenderer._renderRootsTransaction (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8921:12)
    at InertRenderer._renderRoot (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8849:10)
    at InertRenderer._appendDefinition (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8764:10)
    at InertRenderer.appendOutletView (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/@ember/-internals/glimmer/index.js:8750:10)
    at invokeWithOnError (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/backburner.js:275:24)
    at Queue.flush (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/backburner.js:182:21)
    at DeferredActionQueues.flush (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/backburner.js:341:27)
    at Backburner._end (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/backburner.js:785:38)
    at Backburner._boundAutorunEnd (/var/folders/95/z8nqp5t559g3g25s412gjft00000gn/T/broccoli-84775T52kzy8gpBPQ/out-733-append_ember_auto_import_analyzer/assets/backburner.js:516:18)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

I think the following block within this file needs to be gated to only run in the browser and not in fastboot.

@action
  toggleBodyScroll(target, [isClosed]) {
    if (this.args.preventScroll && !this.args.embed) {
      if (isClosed) {
        enableBodyScroll(target);
      } else {
        disableBodyScroll(target);
      }
    }

I think the root of this issue is in this line from body-scroll-lock.

Menu returns after toggling off

On opening the modal I toggle the right menu. The above happens when I cancel the modal. Looks like two menus render and they are both open. This only seems to happen when using (fn mmw.actions.toggle 'right')

Code

<MobileMenuWrapper @embed={{true}} as |mmw|>
  <mmw.MobileMenu @type='right'>
    <button
      type='button'
      role='menuitem'
      {{on
        'click'
        (pipe (fn this.send 'RENAME') (fn mmw.actions.toggle 'right'))
      }}
    >
      Update Title
    </button>
  </mmw.MobileMenu>

  <mmw.Content class='bg-gray-100 flex flex-col flex-1'>
    {{yield}}
    <mmw.Toggle @target='right'>
      <Button
        class='flex items-center py-2 px-4 group'
        id='post-menu'
        aria-label='Post Settings'
        aria-haspopup='true'
        @appearance='outlined'
      >
        <Icon
          @icon='ellipsis-v'
          class='text-gray-700 group-hover:text-white'
        />
      </Button>
    </mmw.Toggle>

    other content here
  </mmw.Content>
</MobileMenuWrapper>

<Modal
  @isOpen={{this.isRenameModalOpen}}
  @onClose={{fn this.send 'CANCEL'}} as |m|
>
 ....
</Modal>

Support two open (squeeze style) menus

This is not supported at this moment and will unfortunately require substantial work.

Janky menu closing transition when entering a route with heavy rendering calculations.

Hi. I experience janky menu closing transitions whenever I'm entering a route that kicks off heavy rendering calculations. (the menu stops halfway until the entered route is finished with its heavy calculations)

I've thought of different ways to work around this with different ways to block heavy rendering until the menu is closed. All feels quite hackish:
a) keep track of the isOpen state whenever onToggle fires, e.g. by tracking mobileMenuIsOpen on the application controller
b) Listen for transitionend event or similar on the mobile menu DOM-element (if possible?)
c) hard code a delay for safety

Then I saw that https://motion.dev/ promotes the safety of HW-accelerated transitions when doing heavy work on the main thread. @nickschot I know that you have some oversight on the Web Animations API and wanted to ask you if there are some simple tricks to be used to avoid the closing transition issue mentioned above? If not, maybe you know a more elegant way to use the ember-mobile-menu API make sure its transitions can finish before other blocking JS can start?

Thanks a lot,
Johan