File
Implements
Methods
|
isActive
|
isActive(selectedItem)
|
|
|
Parameters :
| Name |
Optional |
| selectedItem |
No
|
|
|
navigate
|
navigate(pageName: string, event?)
|
|
|
Parameters :
| Name |
Type |
Optional |
| pageName |
string
|
No
|
| event |
|
Yes
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
showMenuButton
|
showMenuButton()
|
|
|
|
|
|
Public
activatedRoute
|
Type : ActivatedRoute
|
|
|
|
defaultPage
|
Type : string
|
Default value : 'categories'
|
|
|
|
menu
|
Type : Array<IMenuOptions>
|
Default value : []
|
|
|
|
paramsSubscription
|
Type : Subscription
|
|
|
|
Public
router
|
Type : Router
|
|
|
|
showSideMenu
|
Type : Boolean
|
Default value : true
|
|
|
import { NSDiscussData } from './../../models/discuss.model';
import { TelemetryUtilsService } from './../../telemetry-utils.service';
import { DiscussionService } from './../../services/discussion.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import * as CONSTANTS from './../../common/constants.json';
/* tslint:disable */
import * as _ from 'lodash'
import { first } from 'rxjs/operators';
import { ConfigService } from '../../services/config.service';
import { IdiscussionConfig, IMenuOptions } from '../../models/discussion-config.model';
/* tslint:enable */
@Component({
selector: 'lib-side-pannel',
templateUrl: './side-pannel.component.html',
styleUrls: ['./side-pannel.component.scss']
})
export class SidePannelComponent implements OnInit, OnDestroy {
paramsSubscription: Subscription;
userName: string;
defaultPage = 'categories';
data: IdiscussionConfig;
hideSidePanel: boolean;
menu: Array<IMenuOptions> = [];
selectedTab: string;
showSideMenu: Boolean = true;
landingPage: string
constructor(
public router: Router,
public discussService: DiscussionService,
public activatedRoute: ActivatedRoute,
private telemetryUtils: TelemetryUtilsService,
private configService: ConfigService
) { }
ngOnInit() {
// TODO: loader or spinner
this.telemetryUtils.setContext([]);
this.hideSidePanel = document.body.classList.contains('widget');
this.telemetryUtils.logImpression(NSDiscussData.IPageName.HOME);
this.data = this.configService.getConfig();
const menuArr = _.get(this.data, 'menuOptions') && _.get(this.data, 'menuOptions').length > 0
? this.data.menuOptions : CONSTANTS.MENUOPTIONS;
// })
for (let i = 0; i < menuArr.length; i++) {
if (menuArr[i].enable) {
this.menu.push(menuArr[i]);
}
}
}
isActive(selectedItem) {
this.landingPage = this.data.defaultLandingPage ? this.data.defaultLandingPage : 'categories'
if (this.router.url.indexOf(`/${selectedItem}`) > -1 || this.selectedTab === selectedItem) {
if (!this.selectedTab) {
this.selectedTab = selectedItem
}
return true
} else if (selectedItem === this.landingPage && !this.selectedTab) {
return true
}
return false
}
navigate(pageName: string, event?) {
this.selectedTab = pageName;
this.telemetryUtils.setContext([]);
if (event) {
this.telemetryUtils.logInteract(event, NSDiscussData.IPageName.HOME);
}
this.router.navigate([`${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.DISCUSSION}${pageName}`], { queryParamsHandling: "merge" });
this.closeNav();
}
ngOnDestroy() {
if (this.paramsSubscription) {
this.paramsSubscription.unsubscribe();
}
}
showMenuButton() {
this.showSideMenu = this.showSideMenu ? false : true;
}
closeNav() {
this.showSideMenu = this.showSideMenu ? false : true;
}
}
<ul class="sb-sidebar-menu pl-0" *ngIf="!hideSidePanel">
<!-- <li class="df-sidebar-menu-list" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li> -->
<li *ngFor='let d of menu' class="df-sidebar-menu-list" tabindex="0" role="link" [ngClass]="{'menu-active': isActive(d.route)}"
(click)="navigate(d.route, $event)" id="d.route"><a>{{d.label}}</a></li>
<!-- <li class="df-sidebar-menu-list" id="leader-board"><a>Leaderboard</a></li> -->
</ul>
<!-- for mobile-view -->
<button type="button" class="open-btn" (click)="showMenuButton()">☰</button>
<div class="overlay-sidebar" *ngIf="!showSideMenu">
<div class="overlay-sidebar__menu">
<a href="javascript:void(0)" class="close-btn" (click)="closeNav()">×</a>
<div class="overlay-sidebar__menu__content">
<ul class="sb-sidebar-menu-mob pl-0">
<li *ngFor='let d of menu' class="df-sidebar-menu-list" tabindex="0" role="link" [ngClass]="{'menu-active': isActive(d.route)}"
(click)="navigate(d.route, $event)" id="d.route"><a>{{d.label}}</a></li>
<!-- <li class="df-sidebar-menu-list" tabindex="0" role="link" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li>
<li class="df-sidebar-menu-list" tabindex="0" role="link" [ngClass]="{'menu-active': selectedTab === 'categories'}" (click)="navigate('categories', $event)" id="discussion-categories"><a>Categories</a></li>
<li class="df-sidebar-menu-list" tabindex="0" role="link"[ngClass]="{'menu-active': selectedTab === 'tags'}" (click)="navigate('tags', $event)" id="discussion-tags"><a>Tags</a></li>
<li class="df-sidebar-menu-list" tabindex="0" role="link" [ngClass]="{'menu-active': selectedTab === 'my-discussion'}" (click)="navigate('my-discussion', $event)" id="my-discussion"><a>My discussions</a></li> -->
</ul>
</div>
</div>
</div>
::ng-deep:root {
--df-sidebar-menu-text: var(--gray-600);
--df-sidebar-menu-active-text: var(--primary);
--df-sidebar-menu-bl:var(--primary);
--df-sidebar-menu-active-bg: var(--df-common-bg);
--open-btn-bg: var(--white);
--open-btn-color: var(--gray-800); // hamburger menu
--df-overlay-sidebar-bg:var(--black);
--df-overlay-sidebar-bg-menu:#f5f6fa;
}
.sb-sidebar-menu {
list-style-type: none;
margin-bottom: 0;
height: 100%;
display: inline;
}
.df-sidebar-menu-list {
margin-bottom: 0.5rem;
padding: 0.75rem 1rem;
font-size: 14px;
color: var(--df-sidebar-menu-text);
cursor: pointer;
border-left: 0.125rem solid transparent;
cursor: pointer;
&.menu-active,
&:hover {
background-color: var(--df-sidebar-menu-active-bg);
font-weight: 700;
border-left: 0.1875rem solid var(--df-sidebar-menu-bl);
color: var(--df-sidebar-menu-active-text);
border-bottom: 0px;
}
}
.sb-sidebar-menu-mob {
list-style-type: none;
margin-bottom: 0;
height: 100%;
display: inline;
}
.open-btn,
.overlay-sidebar {
display: none;
}
@media (max-width: 768px) {
.sb-sidebar-menu {
display: none;
}
.open-btn {
display: inline;
border: none;
cursor: pointer;
height: 2.5rem;
width: 2.5rem;
border-radius: 1rem;
font-size: 1.375rem;
background-color: var(--open-btn-bg);
box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.1);
color: var(--open-btn-color);
}
.overlay-sidebar {
height: 100vh;
width: 100%;
overflow: hidden;
background: rgba(0, 0, 0, .4);
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
display: inline;
z-index: 3;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-property: background-color, visibility;
&__menu {
position: relative;
top: 0;
height: 100%;
width: 15rem;
right: 0;
z-index: 100000;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--df-overlay-sidebar-bg-menu);
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 1);
.close-btn {
font-size: 2.5rem;
display: flex;
justify-content: flex-end;
padding-right: 1rem;
cursor: pointer;
}
&__content {
padding: 0 1rem;
height: 100%;
}
}
}
}
Legend
Html element with directive