We don't have access to jQuery inside of Fastboot.

 TypeError: $ is not a function
    at [object Object].disableScroll (/Users/adambaker/Development/project/projectname/dist/fastboot/vendor.js:100110:29)

which leads me to

var $rootNode = $(get(this, "rootNodeSelector"));

https://ember-fastboot.com/docs/addon-author-guide

There are a few different ways to solve this, but one is to move the definition of the observer into the didInsertElement

Just when I try swipe to open the menu I receive this error.

side-menu.js:140

rootNode.addEventListener("touchmove", throttledOnTouchMove);
rootNode.addEventListener("touchend", onTouchEnd);

I am receiving this deprecation alerts when the component is instantiated.

Menu became choppy from version 0.0.10, so this could be related with demo app, and upgrading to ember 2.8 version.

When I click and hold the backdrop and slide just a little, the content inside the menu slides out of frame but the parent side menu container is still there. It seems to happen only if I click and hold close to the edge of the side menu as opposed to further out from it on a larger viewport.

I got around this by making the main component rendered in the side menu have position: fixed, but I'm wondering what could be causing the underlying issue?

Any idea what could cause this? I have a component nested inside my side menu and that's it

Is it enough to remove the ul and li style from the scss, because I use Semantic UI for the rest of the page that I'm using your side menu on. Is the addon easily framework agnostic? I know many people use Bootstrap, but many don't, and there aren't as many options out there for menu systems that give you the function without also forcing a style framework.

The screen dims, but the actual navigation doesn't show up on windows/Microsoft Edge Browsers.

In our app, we are using ember-side-menu and it contains a scrollable content area which is absolutely positioned with overflow-y: scroll (we have a header bar above it which we dont want to scroll). This works well in mouse-based environments, but scrolling within the ember-side-menu content seems to be completely disabled on touch devices.

It appears that the cause of this is specifically line 140 in addon/components/side-menu.js, where event.preventDefault(); is called within the touchMove event listener. When this line is removed, scrolling works fine on touch devices, and it doesn't seem to negatively affect the functionality of the menu itself.

Is this behavior of disabling scrolling within the menu intentional, and if so, why? And/or is there any other way to enable scrolling without having to remove the event.preventDefault();?

Using

• Ember 2.6.2

The steps I followed:

1. ember install ember-side-menu
2. Added this to my application template

    {{#side-menu width="300px" side="right"}}
        <nav class="sm-item-list">
            <a href="">
                <i class="fa fa-fw fa-star-o"></i>
                <span>Favorites</span>
            </a>
            <a href="">
                <i class="fa fa-fw fa-bell-o"></i>
                <span>Alerts</span>
            </a>
            <a href="">
                <i class="fa fa-fw fa-envelope-o"></i>
                <span>Messages</span></a>
            <a href="">
                <i class="fa fa-fw fa-comment-o"></i>
                <span>Comments</span></a>
            <a href="">
                <i class="fa fa-fw fa-bar-chart-o"></i>
                <span>Analytics</span></a>
            <a href="">
                <i class="fa fa-fw fa-newspaper-o"></i>
                <span>Reading List</span>
            </a>
        </nav>
    {{/side-menu}}
    {{#side-menu-toggle}}
        <span class="glyphicon glyphicon-menu-hamburger"></span>
    {{/side-menu-toggle}}
    {{content-backdrop}}

Here's the result I get

The ability to have different side-menus, with different toggles, would be great. While I made my own modifications to it on my app to do this, it is not generalized.

Any suggestions on how to get this to work?

Sometimes it is really annoying.

Hi! We use ember-side-menu in our video editor application and cordova app. Thanks for sharing!

On IPhone 6s (my test device), iOS 9.3 the slide to open and slide to close action needs dragging across half of the menu width until the threshold is reached.

I noticed, that changedTouches on touchEnd contains the same pageX as the start event most times. But the current pageX is given as originalEvent.pageX in iOS.
=> velocityX = 0 most times => threshold passed 50%? complete : abort

This feels a little bit jerky. So i tried to improve it. It is not tested in the field yet, only on three devices and chrome. Maybe i post an update later. The current solution is to change _completeMenuTransition to this:

    _completeMenuTransition(event) {
        const progress = get(this, "progress");
        const touchStartEvent = get(this, "touchStartEvent");
        const side = get(this, "side");
        const velocityX = this._calculateVelocityX(
            touchStartEvent.originalEvent.touches[0].pageX,
            touchStartEvent.originalEvent.timeStamp,
            typeof event.originalEvent.pageX !== "undefined"? event.originalEvent.pageX : event.originalEvent.changedTouches[0].pageX,
            event.originalEvent.timeStamp
        );
        const minClosingVelocity = 0.000001;
        const isSwipingLeft = velocityX > minClosingVelocity;
        const isSwipingRight = velocityX < -minClosingVelocity;

        const isClosingMovement = (side === "left" && isSwipingLeft) ||
            (side === "right" && isSwipingRight);
        const isOpeningMovement = (side === "left" && isSwipingRight) ||
            (side === "right" && isSwipingLeft);

        if (isClosingMovement) {
            get(this, "sideMenu").close();
        } else if (isOpeningMovement) {
            get(this, "sideMenu").open();
        }
    },

I get this depreciation with ember 3.1

DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located: mrx -> ember-side-menu -> ember-cli-babel

I checked.

npm ls ember-cli-babel@5
[email protected] C:\myapp
-- [email protected]
  -- [email protected]

I took at look at your add-on yesterday and liked what I saw. Just came back to take another look and am getting 404 errors for all the assets for the dummy app ...