ng-responsive-nav
Version:
A mobile friendly navigation solution
114 lines • 15.2 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';
export class MobileNavigationComponent {
/**
* @param {?} router
* @param {?} document
* @param {?} navConfig
*/
constructor(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 {?}
*/
ngOnInit() {
this._document.body.style.overflowY = 'scroll';
this._watchNavigationChanges(this._router);
}
/**
* @return {?}
*/
ngOnDestroy() {
this.canActivateMobileNav = false;
this._setOverFlowY();
this._subscriptions.unsubscribe();
}
/**
* @return {?}
*/
toggleCanActivateMobileNavBar() {
this.canActivateMobileNav = !this.canActivateMobileNav;
this._setOverFlowY();
}
/**
* @private
* @return {?}
*/
_setOverFlowY() {
this.canActivateMobileNav
? this._document.body.style.overflowY = 'hidden'
: this._document.body.style.overflowY = 'scroll';
}
/**
* @private
* @param {?} router
* @return {?}
*/
_watchNavigationChanges(router) {
this._subscriptions.add(router.events.subscribe((/**
* @param {?} event
* @return {?}
*/
(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 = () => [
{ type: Router },
{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: NavConfig }
];
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9iaWxlLW5hdmlnYXRpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctcmVzcG9uc2l2ZS1uYXYvIiwic291cmNlcyI6WyJhcHAvbW9iaWxlLW5hdmlnYXRpb24vbW9iaWxlLW5hdmlnYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxNQUFNLEVBQW9CLE1BQU0sZUFBZSxDQUFDO0FBQ25FLE9BQU8sRUFBQyxhQUFhLEVBQUUsTUFBTSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDdEQsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3pDLE9BQU8sRUFBQyxZQUFZLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDbEMsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxNQUFNLEVBQUMsTUFBTSwwQ0FBMEMsQ0FBQztBQUNoRSxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFRMUQsTUFBTSxPQUFPLHlCQUF5Qjs7Ozs7O0lBV3BDLFlBQVksTUFBYyxFQUFvQixRQUFrQixFQUFFLFNBQW9CO1FBUnRFLFdBQU0sR0FBRyxNQUFNLENBQUM7UUFDaEIsWUFBTyxHQUFHLE9BQU8sQ0FBQztRQUMzQix5QkFBb0IsR0FBWSxLQUFLLENBQUM7UUFJckMsbUJBQWMsR0FBaUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUd4RCxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUN0QixJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztRQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQztJQUM3QixDQUFDOzs7O0lBRU0sUUFBUTtRQUNiLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsUUFBUSxDQUFDO1FBQy9DLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDN0MsQ0FBQzs7OztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLG9CQUFvQixHQUFHLEtBQUssQ0FBQztRQUNsQyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNwQyxDQUFDOzs7O0lBRU0sNkJBQTZCO1FBQ2xDLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxDQUFDLElBQUksQ0FBQyxvQkFBb0IsQ0FBQztRQUN2RCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDdkIsQ0FBQzs7Ozs7SUFFTyxhQUFhO1FBQ25CLElBQUksQ0FBQyxvQkFBb0I7WUFDdkIsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsUUFBUTtZQUNoRCxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7SUFDckQsQ0FBQzs7Ozs7O0lBRU8sdUJBQXVCLENBQUMsTUFBYztRQUM1QyxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FDckIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxTQUFTOzs7O1FBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNoQyxJQUFJLEtBQUssWUFBWSxhQUFhLElBQUksSUFBSSxDQUFDLG9CQUFvQixFQUFFO2dCQUMvRCxJQUFJLENBQUMsNkJBQTZCLEVBQUUsQ0FBQzthQUN0QztRQUNILENBQUMsRUFBQyxDQUNILENBQUM7SUFDSixDQUFDOzs7WUFyREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxpQ0FBaUM7Z0JBQzNDLDQyRUFBK0M7O2FBRWhEOzs7O1lBWHNCLE1BQU07WUF3QjZCLFFBQVEsdUJBQW5DLE1BQU0sU0FBQyxRQUFRO1lBckJ0QyxTQUFTOzs7O0lBWWYsOENBQXFDOztJQUNyQywyQ0FBZ0M7O0lBQ2hDLDRDQUFrQzs7SUFDbEMseURBQTZDOzs7OztJQUU3Qyw4Q0FBcUM7Ozs7O0lBQ3JDLDRDQUFpQzs7Ozs7SUFDakMsbURBQTBEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEluamVjdCwgT25EZXN0cm95LCBPbkluaXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge05hdmlnYXRpb25FbmQsIFJvdXRlcn0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcclxuaW1wb3J0IHtET0NVTUVOVH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHtTdWJzY3JpcHRpb259IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQge05hdkNvbmZpZ30gZnJvbSAnLi4vbW9kZWxzL25hdi5jb25maWcnO1xyXG5pbXBvcnQge2ZhQmFyc30gZnJvbSAnQGZvcnRhd2Vzb21lL2ZyZWUtc29saWQtc3ZnLWljb25zL2ZhQmFycyc7XHJcbmltcG9ydCB7ZmFUaW1lc30gZnJvbSAnQGZvcnRhd2Vzb21lL2ZyZWUtc29saWQtc3ZnLWljb25zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLW1vYmlsZS1uYXZpZ2F0aW9uLWNvbXBvbmVudCcsXHJcbiAgdGVtcGxhdGVVcmw6ICdtb2JpbGUtbmF2aWdhdGlvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJ21vYmlsZS1uYXZpZ2F0aW9uLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBNb2JpbGVOYXZpZ2F0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG5cclxuICBwdWJsaWMgcmVhZG9ubHkgbmF2Q29uZmlnOiBOYXZDb25maWc7XHJcbiAgcHVibGljIHJlYWRvbmx5IGZhQmFycyA9IGZhQmFycztcclxuICBwdWJsaWMgcmVhZG9ubHkgZmFUaW1lcyA9IGZhVGltZXM7XHJcbiAgcHVibGljIGNhbkFjdGl2YXRlTW9iaWxlTmF2OiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIHByaXZhdGUgcmVhZG9ubHkgX2RvY3VtZW50OiBEb2N1bWVudDtcclxuICBwcml2YXRlIHJlYWRvbmx5IF9yb3V0ZXI6IFJvdXRlcjtcclxuICBwcml2YXRlIF9zdWJzY3JpcHRpb25zOiBTdWJzY3JpcHRpb24gPSBuZXcgU3Vic2NyaXB0aW9uKCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHJvdXRlcjogUm91dGVyLCBASW5qZWN0KERPQ1VNRU5UKSBkb2N1bWVudDogRG9jdW1lbnQsIG5hdkNvbmZpZzogTmF2Q29uZmlnKSB7XHJcbiAgICB0aGlzLl9yb3V0ZXIgPSByb3V0ZXI7XHJcbiAgICB0aGlzLl9kb2N1bWVudCA9IGRvY3VtZW50O1xyXG4gICAgdGhpcy5uYXZDb25maWcgPSBuYXZDb25maWc7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93WSA9ICdzY3JvbGwnO1xyXG4gICAgdGhpcy5fd2F0Y2hOYXZpZ2F0aW9uQ2hhbmdlcyh0aGlzLl9yb3V0ZXIpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgdGhpcy5jYW5BY3RpdmF0ZU1vYmlsZU5hdiA9IGZhbHNlO1xyXG4gICAgdGhpcy5fc2V0T3ZlckZsb3dZKCk7XHJcbiAgICB0aGlzLl9zdWJzY3JpcHRpb25zLnVuc3Vic2NyaWJlKCk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgdG9nZ2xlQ2FuQWN0aXZhdGVNb2JpbGVOYXZCYXIoKTogdm9pZCB7XHJcbiAgICB0aGlzLmNhbkFjdGl2YXRlTW9iaWxlTmF2ID0gIXRoaXMuY2FuQWN0aXZhdGVNb2JpbGVOYXY7XHJcbiAgICB0aGlzLl9zZXRPdmVyRmxvd1koKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgX3NldE92ZXJGbG93WSgpOiB2b2lkIHtcclxuICAgIHRoaXMuY2FuQWN0aXZhdGVNb2JpbGVOYXZcclxuICAgICAgPyB0aGlzLl9kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93WSA9ICdoaWRkZW4nXHJcbiAgICAgIDogdGhpcy5fZG9jdW1lbnQuYm9keS5zdHlsZS5vdmVyZmxvd1kgPSAnc2Nyb2xsJztcclxuICB9XHJcblxyXG4gIHByaXZhdGUgX3dhdGNoTmF2aWdhdGlvbkNoYW5nZXMocm91dGVyOiBSb3V0ZXIpOiB2b2lkIHtcclxuICAgIHRoaXMuX3N1YnNjcmlwdGlvbnMuYWRkKFxyXG4gICAgICByb3V0ZXIuZXZlbnRzLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcclxuICAgICAgICBpZiAoZXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kICYmIHRoaXMuY2FuQWN0aXZhdGVNb2JpbGVOYXYpIHtcclxuICAgICAgICAgIHRoaXMudG9nZ2xlQ2FuQWN0aXZhdGVNb2JpbGVOYXZCYXIoKTtcclxuICAgICAgICB9XHJcbiAgICAgIH0pXHJcbiAgICApO1xyXG4gIH1cclxufVxyXG4iXX0=