diff options
Diffstat (limited to 'src/app/components/layout/sidemenu')
4 files changed, 254 insertions, 0 deletions
diff --git a/src/app/components/layout/sidemenu/sidemenu.component.css b/src/app/components/layout/sidemenu/sidemenu.component.css new file mode 100644 index 0000000..23831b7 --- /dev/null +++ b/src/app/components/layout/sidemenu/sidemenu.component.css @@ -0,0 +1,113 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + +/* Sidebar container with nav menu */ +#sidebar-container { + margin-right: -1px; + flex: 0 0 230px; + border-right-style: solid; + border-right-width: 1px; + border-right-color: #b2b2b2; +} + +/* Menu item*/ +.nav a { + height: 50px; + color: black; +} + +/* Li elements from sidemenu. Thanks to padding is :focus pseudo-class visible for keyboard users*/ +.nav li { + padding: 2px; +} + +/* Separators */ +.sidebar-separator-title { + height: 2em; +} + +/* Sidebar sizes when collapsed*/ +.sidebar-collapsed { + min-width: 60px !important; + max-width: 63px !important; + height: auto; +} + +/* Sidebar sizes when expanded*/ +.sidebar-expanded { + min-width: 250px; + max-width: 250px; + height: 100%; + display: block; + border-right-style: solid; + border-right-width: 1px; + border-right-color: #c5c5c5; +} + +/* Hide list item and grouping item title if container sidebar is collapsed */ +.sidebar-collapsed a.nav-link span, +.sidebar-collapsed li.sidebar-separator-title small { + display: none !important; +} + +/* Hide grouping item icon if container sidebar is collapsed */ +.sidebar-expanded ul li.sidebar-separator-title i, +.sidebar-expanded ul li.sidebar-separator-title img { + display: none !important; +} + +/* Show grouping item icon if container sidebar is collapsed */ +.sidebar-collapsed ul li.sidebar-separator-title i, +.sidebar-collapsed ul li.sidebar-separator-title img { + display: inline-block; +} + +/* All list items */ +.nav-link { + border-style: none; + display: block !important; + padding: 0.75rem 1rem; +} + +ul { + list-style-type: none; +} + +.active-menu-item { + background-color: var(--active-gray); + color: black; + border-top-left-radius: 0.25rem !important; + border-bottom-left-radius: 0.25rem !important; + border-left: 2px solid var(--primary) !important; +} + +.nav.inner li { + border: none; +} + +.portal-version-title, +.portal-version-number { + font-size: 13px; +} + +img { + width: 18px; + height: 19px; + vertical-align: -0.125em; +} diff --git a/src/app/components/layout/sidemenu/sidemenu.component.html b/src/app/components/layout/sidemenu/sidemenu.component.html new file mode 100644 index 0000000..fd97c50 --- /dev/null +++ b/src/app/components/layout/sidemenu/sidemenu.component.html @@ -0,0 +1,51 @@ +<!-- + ~ Copyright (c) 2022. Deutsche Telekom AG + ~ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + --> + + +<nav + [class.sidebar-collapsed]="isSidebarCollapsed" + id="sidebar-container" + class="sidebar-expanded overflow-auto d-flex flex-column justify-content-between" + [attr.aria-label]="'layout.menu.mainMenu' | translate" +> + <ul class="nav flex-column flex-nowrap" [attr.aria-label]="'layout.menu.menuItems' | translate"> + <li class="nav-item"> + <a #test [attr.accesskey]='ACCESS_KEY.SHORTCUT_6' class="nav-link" routerLinkActive="active-menu-item" [routerLink]="['/dashboard']"> + <i class="bi bi-house-door mr-4" aria-hidden="true"></i> + <span class="d-sm-inline qa_menu_home">{{ 'layout.menu.items.dashboard' | translate }}</span></a + > + </li> + <li class="nav-item"> + <a class="nav-link" routerLinkActive="active-menu-item" [routerLink]="['/app-starter']"> + <i class="bi bi-grid mr-4" aria-hidden="true"></i> + <span class="d-sm-inline qa_menu_app_starter">{{ 'layout.menu.items.appStarter' | translate }}</span></a + > + </li> + + <li class="nav-item" [appHasPermissions]="'users.administration.list'"> + <a class="nav-link" routerLinkActive="active-menu-item" routerLink="/user-administration"> + <i class="bi bi-people mr-4" aria-hidden="true"></i> + <span class="d-sm-inline qa_menu_users">{{ 'layout.menu.items.users' | translate }}</span></a + > + </li> + </ul> + <div [ngClass]="isSidebarCollapsed ? 'flex-column' : 'flex-row'" class="d-flex justify-content-center text-center"> + <h5 class="portal-version-title mr-1" id="portal-version">Portal Version:</h5> + <span class="portal-version-number" aria-labelledby="portal-version" (click)='test.blur()'>{{versionNumber}}</span> + </div> +</nav> diff --git a/src/app/components/layout/sidemenu/sidemenu.component.spec.ts b/src/app/components/layout/sidemenu/sidemenu.component.spec.ts new file mode 100644 index 0000000..1067c49 --- /dev/null +++ b/src/app/components/layout/sidemenu/sidemenu.component.spec.ts @@ -0,0 +1,43 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidemenuComponent } from './sidemenu.component'; + +describe('SidemenuComponent', () => { + let component: SidemenuComponent; + let fixture: ComponentFixture<SidemenuComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [SidemenuComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidemenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/layout/sidemenu/sidemenu.component.ts b/src/app/components/layout/sidemenu/sidemenu.component.ts new file mode 100644 index 0000000..1f5c123 --- /dev/null +++ b/src/app/components/layout/sidemenu/sidemenu.component.ts @@ -0,0 +1,47 @@ +/* + * Copyright (c) 2022. Deutsche Telekom AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Component, Injectable, Input } from '@angular/core'; +import { environment } from 'src/environments/environment'; +import VersionJson from 'src/assets/version.json'; +import { KeyboardShortcuts } from '../../../services/shortcut.service'; + +@Injectable({ + providedIn: 'root', +}) +@Component({ + selector: 'app-sidemenu', + templateUrl: './sidemenu.component.html', + styleUrls: ['./sidemenu.component.css'], +}) +export class SidemenuComponent { + versionNumber: string; + + @Input() isSidebarCollapsed = false; + + public ACCESS_KEY = KeyboardShortcuts; + public keycloakEditProfile = environment.keycloakEditProfile; + public isKpiDashboardSubMenuCollapsed = false; + + constructor() { + this.versionNumber = VersionJson.number; + } + collapsed() { + this.isKpiDashboardSubMenuCollapsed = !this.isKpiDashboardSubMenuCollapsed; + } +} |