ng-responsive-nav
Version:
A mobile friendly navigation solution
130 lines • 15.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: app/mobile-navigation/mobile-navigation.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Inject } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { DOCUMENT } from '@angular/common';
import { Subscription } from 'rxjs';
import { NavConfig } from '../models/nav.config';
import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
var MobileNavigationComponent = /** @class */ (function () {
function MobileNavigationComponent(router, document, navConfig) {
this.faBars = faBars;
this.faTimes = faTimes;
this.canActivateMobileNav = false;
this._subscriptions = new Subscription();
this._router = router;
this._document = document;
this.navConfig = navConfig;
}
/**
* @return {?}
*/
MobileNavigationComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._document.body.style.overflowY = 'scroll';
this._watchNavigationChanges(this._router);
};
/**
* @return {?}
*/
MobileNavigationComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.canActivateMobileNav = false;
this._setOverFlowY();
this._subscriptions.unsubscribe();
};
/**
* @return {?}
*/
MobileNavigationComponent.prototype.toggleCanActivateMobileNavBar = /**
* @return {?}
*/
function () {
this.canActivateMobileNav = !this.canActivateMobileNav;
this._setOverFlowY();
};
/**
* @private
* @return {?}
*/
MobileNavigationComponent.prototype._setOverFlowY = /**
* @private
* @return {?}
*/
function () {
this.canActivateMobileNav
? this._document.body.style.overflowY = 'hidden'
: this._document.body.style.overflowY = 'scroll';
};
/**
* @private
* @param {?} router
* @return {?}
*/
MobileNavigationComponent.prototype._watchNavigationChanges = /**
* @private
* @param {?} router
* @return {?}
*/
function (router) {
var _this = this;
this._subscriptions.add(router.events.subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (event instanceof NavigationEnd && _this.canActivateMobileNav) {
_this.toggleCanActivateMobileNavBar();
}
})));
};
MobileNavigationComponent.decorators = [
{ type: Component, args: [{
selector: 'app-mobile-navigation-component',
template: "<div class=\"mobile-navigation-burger-menu-button circle-container\"\r\n [ngStyle]=\"{\r\n 'background-color': navConfig.navBrandConfig.colorPalette.primaryColor,\r\n 'z-index': navConfig.navBrandConfig.zIndex + 1\r\n }\"\r\n (click)=\"toggleCanActivateMobileNavBar()\"\r\n [class.animation-slide-burger-right]=\"canActivateMobileNav\"\r\n [class.animation-slide-burger-left]=\"!canActivateMobileNav\" >\r\n\r\n <div class=\"mobile-navigation-burger-menu-button-inner\" [ngStyle]=\"{'z-index': navConfig.navBrandConfig.zIndex + 1}\">\r\n <fa-icon class=\"icon\" *ngIf=\"!canActivateMobileNav\" [ngStyle]=\"{ 'color': navConfig.navBrandConfig.colorPalette.secondaryColor }\" [icon]=\"faBars\"></fa-icon>\r\n <fa-icon class=\"icon\" *ngIf=\"canActivateMobileNav\" [ngStyle]=\"{ 'color': navConfig.navBrandConfig.colorPalette.primaryColor }\" [icon]=\"faTimes\"></fa-icon>\r\n </div>\r\n</div>\r\n\r\n<div appCheckOrientation class=\"mobile-navigation-menu\" *ngIf=\"canActivateMobileNav\" [ngStyle]=\"{'z-index': navConfig.navBrandConfig.zIndex}\">\r\n <div class=\"mobile-navigation-menu-items\"\r\n [ngStyle]=\"{ 'background-color': navConfig.navBrandConfig.colorPalette.backGroundColor }\"\r\n [class.animation-slide-in-nav-menu]=\"canActivateMobileNav\"\r\n [class.animation-slide-out-nav-menu]=\"!canActivateMobileNav\">\r\n\r\n <div class=\"mobile-navigation-button-runner\"\r\n [ngStyle]=\"{ 'background-color': navConfig.navBrandConfig.colorPalette.primaryColor }\"\r\n *ngIf=\"canActivateMobileNav\">\r\n <div class=\"runner-inner\"></div>\r\n </div>\r\n\r\n <div class=\"mobile-navigation-links\">\r\n <div class=\"mobile-navigation-links-inner\">\r\n <img class=\"mobile-navigation-inner-icon\"\r\n [routerLink]=\"navConfig.navigationHomeRoute.routePath\"\r\n [src]=\"navConfig.navBrandConfig.brandImageUrl\" />\r\n </div>\r\n <a class=\"link mobile-link\"\r\n *ngFor=\"let route of navConfig.navigationMenuRoutes\"\r\n [routerLink]=\"route.routePath\"\r\n [ngStyle]=\"{ 'color': navConfig.navBrandConfig.colorPalette.primaryColor }\">{{route.routeName}}</a>\r\n </div>\r\n\r\n <div class=\"mobile-navigation-extras\">\r\n <ng-content select=\"[mobileExtras]\"></ng-content>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n",
styles: ["@-webkit-keyframes slide-burger-right{to{right:29%;margin:18px 0 0;background-color:transparent;color:#1976d2}}@keyframes slide-burger-right{to{right:29%;margin:18px 0 0;background-color:transparent;color:#1976d2}}@-webkit-keyframes slide-burger-left{from{right:29%}to{right:68%}}@keyframes slide-burger-left{from{right:29%}to{right:68%}}@-webkit-keyframes animation-slide-in-nav-left{from{right:100%}to{right:25%}}@keyframes animation-slide-in-nav-left{from{right:100%}to{right:25%}}@-webkit-keyframes animation-slide-in-left{from{right:100%}to{right:0}}@keyframes animation-slide-in-left{from{right:100%}to{right:0}}@-webkit-keyframes animation-slide-out-nav-right{from{right:0}to{right:100%}}@keyframes animation-slide-out-nav-right{from{right:0}to{right:100%}}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes rotate-clockwise{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate-clockwise{from{transform:rotate(0)}to{transform:rotate(360deg)}}.animation-slide-burger-right{-webkit-animation:.2s 75ms forwards slide-burger-right;animation:.2s 75ms forwards slide-burger-right}.animation-slide-burger-left{-webkit-animation:.2s forwards slide-burger-left;animation:.2s forwards slide-burger-left}.animation-slide-in-nav-menu{-webkit-animation:.2s forwards animation-slide-in-nav-left;animation:.2s forwards animation-slide-in-nav-left}.animation-slide-out-nav-menu{-webkit-animation:.2s forwards animation-slide-out-nav-right;animation:.2s forwards animation-slide-out-nav-right}.link.desktop-link{margin:0 7px}.link.desktop-link.primary{text-decoration:none}.link.desktop-link.primary:hover{-webkit-filter:brightness(60%);filter:brightness(60%);text-decoration:underline}.link.desktop-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.link.mobile-link{margin:7px 0}.link.mobile-link.primary:active{-webkit-filter:brightness(60%);filter:brightness(60%)}.display-flex{display:flex}.mobile-navigation-burger-menu-button{position:fixed;z-index:1001;font-size:1.25rem;color:#fff;width:50px;height:50px;text-align:center;cursor:pointer;margin:18px 59px 0 0;right:68%}.mobile-navigation-burger-menu-button .mobile-navigation-burger-menu-button-inner{padding-top:27%}.mobile-navigation-burger-menu-button .mobile-navigation-burger-menu-button-inner .icon{font-weight:600!important;padding-top:14px}.mobile-navigation-burger-menu-button.circle-container{border-radius:50%;color:#fff;border:none}.mobile-navigation-menu{height:100%;z-index:1}@media only screen and (min-width:576px){.mobile-navigation-burger-menu-button,.mobile-navigation-menu{display:none}}.mobile-navigation-menu .mobile-navigation-menu-items{box-shadow:7px 4px 12px -8px rgba(0,0,0,.75);width:75%;height:100%;z-index:1;position:fixed;color:#fff}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-extras{padding:12px!important;height:50vh;display:flex!important;flex-direction:column!important}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-button-runner{padding-right:3rem;z-index:13;height:3px;width:60%;margin-top:41px}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-button-runner .runner-inner{border-radius:50%;height:inherit;margin-top:.25rem;width:100%}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-links{display:flex!important;flex-direction:column!important;height:50vh;margin-top:3rem!important;text-align:center}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-links .mobile-navigation-links-inner{display:flex!important;justify-content:center!important}.mobile-navigation-menu .mobile-navigation-menu-items .mobile-navigation-links .mobile-navigation-inner-icon{width:80px;height:80px;margin-bottom:12px;padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%}.mobile-navigation-menu .mobile-navigation-menu-items .sticky-bottom{height:400px}"]
}] }
];
/** @nocollapse */
MobileNavigationComponent.ctorParameters = function () { return [
{ type: Router },
{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: NavConfig }
]; };
return MobileNavigationComponent;
}());
export { MobileNavigationComponent };
if (false) {
/** @type {?} */
MobileNavigationComponent.prototype.navConfig;
/** @type {?} */
MobileNavigationComponent.prototype.faBars;
/** @type {?} */
MobileNavigationComponent.prototype.faTimes;
/** @type {?} */
MobileNavigationComponent.prototype.canActivateMobileNav;
/**
* @type {?}
* @private
*/
MobileNavigationComponent.prototype._document;
/**
* @type {?}
* @private
*/
MobileNavigationComponent.prototype._router;
/**
* @type {?}
* @private
*/
MobileNavigationComponent.prototype._subscriptions;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9iaWxlLW5hdmlnYXRpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctcmVzcG9uc2l2ZS1uYXYvIiwic291cmNlcyI6WyJhcHAvbW9iaWxlLW5hdmlnYXRpb24vbW9iaWxlLW5hdmlnYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQW9CLE1BQU0sZUFBZSxDQUFDO0FBQ25FLE9BQU8sRUFBQyxhQUFhLEVBQUUsTUFBTSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDdEQsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3pDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDbEMsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxNQUFNLEVBQUMsTUFBTSwwQ0FBMEMsQ0FBQztBQUNoRSxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFFMUQ7SUFpQkUsbUNBQVksTUFBYyxFQUFvQixRQUFrQixFQUFFLFNBQW9CO1FBUnRFLFdBQU0sR0FBRyxNQUFNLENBQUM7UUFDaEIsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUMzQix5QkFBb0IsR0FBWSxLQUFLLENBQUM7UUFJckMsbUJBQWMsR0FBaUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUd4RCxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUN0QixJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztRQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQztJQUM3QixDQUFDOzs7O0lBRU0sNENBQVE7OztJQUFmO1FBQ0UsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7UUFDL0MsSUFBSSxDQUFDLHVCQUF1QixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUM3QyxDQUFDOzs7O0lBRU0sK0NBQVc7OztJQUFsQjtRQUNFLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxLQUFLLENBQUM7UUFDbEMsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxjQUFjLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDcEMsQ0FBQzs7OztJQUVNLGlFQUE2Qjs7O0lBQXBDO1FBQ0UsSUFBSSxDQUFDLG9CQUFvQixHQUFHLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDO1FBQ3ZELElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDOzs7OztJQUVPLGlEQUFhOzs7O0lBQXJCO1FBQ0UsSUFBSSxDQUFDLG9CQUFvQjtZQUN2QixDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxRQUFRO1lBQ2hELENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztJQUNyRCxDQUFDOzs7Ozs7SUFFTywyREFBdUI7Ozs7O0lBQS9CLFVBQWdDLE1BQWM7UUFBOUMsaUJBUUM7UUFQQyxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FDckIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxTQUFTOzs7O1FBQUMsVUFBQyxLQUFLO1lBQzVCLElBQUksS0FBSyxZQUFZLGFBQWEsSUFBSSxLQUFJLENBQUMsb0JBQW9CLEVBQUU7Z0JBQy9ELEtBQUksQ0FBQyw2QkFBNkIsRUFBRSxDQUFDO2FBQ3RDO1FBQ0gsQ0FBQyxFQUFDLENBQ0gsQ0FBQztJQUNKLENBQUM7O2dCQXJERixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGlDQUFpQztvQkFDM0MsNDJFQUErQzs7aUJBRWhEOzs7O2dCQVhzQixNQUFNO2dCQXdCNkIsUUFBUSx1QkFBbkMsTUFBTSxTQUFDLFFBQVE7Z0JBckJ0QyxTQUFTOztJQTBEakIsZ0NBQUM7Q0FBQSxBQXRERCxJQXNEQztTQWhEWSx5QkFBeUI7OztJQUVwQyw4Q0FBcUM7O0lBQ3JDLDJDQUFnQzs7SUFDaEMsNENBQWtDOztJQUNsQyx5REFBNkM7Ozs7O0lBRTdDLDhDQUFxQzs7Ozs7SUFDckMsNENBQWlDOzs7OztJQUNqQyxtREFBMEQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5qZWN0LCBPbkRlc3Ryb3ksIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7TmF2aWdhdGlvbkVuZCwgUm91dGVyfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xyXG5pbXBvcnQge0RPQ1VNRU5UfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQge1N1YnNjcmlwdGlvbn0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7TmF2Q29uZmlnfSBmcm9tICcuLi9tb2RlbHMvbmF2LmNvbmZpZyc7XHJcbmltcG9ydCB7ZmFCYXJzfSBmcm9tICdAZm9ydGF3ZXNvbWUvZnJlZS1zb2xpZC1zdmctaWNvbnMvZmFCYXJzJztcclxuaW1wb3J0IHtmYVRpbWVzfSBmcm9tICdAZm9ydGF3ZXNvbWUvZnJlZS1zb2xpZC1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtbW9iaWxlLW5hdmlnYXRpb24tY29tcG9uZW50JyxcclxuICB0ZW1wbGF0ZVVybDogJ21vYmlsZS1uYXZpZ2F0aW9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnbW9iaWxlLW5hdmlnYXRpb24uY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIE1vYmlsZU5hdmlnYXRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcblxyXG4gIHB1YmxpYyByZWFkb25seSBuYXZDb25maWc6IE5hdkNvbmZpZztcclxuICBwdWJsaWMgcmVhZG9ubHkgZmFCYXJzID0gZmFCYXJzO1xyXG4gIHB1YmxpYyByZWFkb25seSBmYVRpbWVzID0gZmFUaW1lcztcclxuICBwdWJsaWMgY2FuQWN0aXZhdGVNb2JpbGVOYXY6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgcHJpdmF0ZSByZWFkb25seSBfZG9jdW1lbnQ6IERvY3VtZW50O1xyXG4gIHByaXZhdGUgcmVhZG9ubHkgX3JvdXRlcjogUm91dGVyO1xyXG4gIHByaXZhdGUgX3N1YnNjcmlwdGlvbnM6IFN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcclxuXHJcbiAgY29uc3RydWN0b3Iocm91dGVyOiBSb3V0ZXIsIEBJbmplY3QoRE9DVU1FTlQpIGRvY3VtZW50OiBEb2N1bWVudCwgbmF2Q29uZmlnOiBOYXZDb25maWcpIHtcclxuICAgIHRoaXMuX3JvdXRlciA9IHJvdXRlcjtcclxuICAgIHRoaXMuX2RvY3VtZW50ID0gZG9jdW1lbnQ7XHJcbiAgICB0aGlzLm5hdkNvbmZpZyA9IG5hdkNvbmZpZztcclxuICB9XHJcblxyXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuX2RvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3dZID0gJ3Njcm9sbCc7XHJcbiAgICB0aGlzLl93YXRjaE5hdmlnYXRpb25DaGFuZ2VzKHRoaXMuX3JvdXRlcik7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICB0aGlzLmNhbkFjdGl2YXRlTW9iaWxlTmF2ID0gZmFsc2U7XHJcbiAgICB0aGlzLl9zZXRPdmVyRmxvd1koKTtcclxuICAgIHRoaXMuX3N1YnNjcmlwdGlvbnMudW5zdWJzY3JpYmUoKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyB0b2dnbGVDYW5BY3RpdmF0ZU1vYmlsZU5hdkJhcigpOiB2b2lkIHtcclxuICAgIHRoaXMuY2FuQWN0aXZhdGVNb2JpbGVOYXYgPSAhdGhpcy5jYW5BY3RpdmF0ZU1vYmlsZU5hdjtcclxuICAgIHRoaXMuX3NldE92ZXJGbG93WSgpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBfc2V0T3ZlckZsb3dZKCk6IHZvaWQge1xyXG4gICAgdGhpcy5jYW5BY3RpdmF0ZU1vYmlsZU5hdlxyXG4gICAgICA/IHRoaXMuX2RvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3dZID0gJ2hpZGRlbidcclxuICAgICAgOiB0aGlzLl9kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93WSA9ICdzY3JvbGwnO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBfd2F0Y2hOYXZpZ2F0aW9uQ2hhbmdlcyhyb3V0ZXI6IFJvdXRlcik6IHZvaWQge1xyXG4gICAgdGhpcy5fc3Vic2NyaXB0aW9ucy5hZGQoXHJcbiAgICAgIHJvdXRlci5ldmVudHMuc3Vic2NyaWJlKChldmVudCkgPT4ge1xyXG4gICAgICAgIGlmIChldmVudCBpbnN0YW5jZW9mIE5hdmlnYXRpb25FbmQgJiYgdGhpcy5jYW5BY3RpdmF0ZU1vYmlsZU5hdikge1xyXG4gICAgICAgICAgdGhpcy50b2dnbGVDYW5BY3RpdmF0ZU1vYmlsZU5hdkJhcigpO1xyXG4gICAgICAgIH1cclxuICAgICAgfSlcclxuICAgICk7XHJcbiAgfVxyXG59XHJcbiJdfQ==