Skip to content

Commit 6ffca53

Browse files
wurstbrotwurstbrot
authored
Merge pull request #482 from Klath123/feature-sidebar-toggle
Fix sidebar toggle behavior
2 parents d058f99 + d095ce3 commit 6ffca53

File tree

5 files changed

+159
-71
lines changed

5 files changed

+159
-71
lines changed

‎src/app/app.component.css‎

Lines changed: 85 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,99 @@
1-
/* --- experimental branch --- */
2-
/* .mat-drawer-container {
3-
background-color: #fffff4;
4-
} */
5-
.tag-line {
1+
.navbar {
2+
position: sticky;
3+
top: 0;
4+
z-index: 5;
5+
padding: 0 10px;
6+
display: flex;
7+
align-items: center;
8+
height: 64px;
9+
transition: all 0.25s ease;
10+
}
11+
.logo {
12+
display: flex;
13+
align-items: center;
14+
justify-content: flex-start;
15+
text-decoration: none;
16+
margin-left: -4px;
17+
height: 100%;
18+
}
19+
.logo-icon {
20+
transform: scale(0.95);
21+
transform-origin: left center;
22+
width: auto;
23+
display: block;
24+
margin: auto 0;
25+
}
26+
.title-container {
27+
position: absolute;
28+
left: 50%;
29+
transform: translateX(-50%);
630
display: flex;
731
flex-direction: column;
832
align-items: center;
33+
text-align: center;
34+
animation: fadeSlide 0.4s ease;
35+
margin-top: 4px;
36+
gap: 3px;
937
}
1038
.tag-title {
11-
font-size: 0.9em;
39+
font-size: 0.85em;
40+
font-weight: 500;
41+
line-height: 1;
42+
letter-spacing: 0.04em;
1243
}
1344
.tag-subtitle {
14-
font-size: 0.7em;
45+
font-size: 0.65em;
46+
margin-top: 0;
47+
letter-spacing: 0.08em;
48+
opacity: 0.6;
49+
}
50+
.github-fork-ribbon::before {
51+
background-color: #333;
1552
}
16-
17-
/* --- experimental branch end --- */
18-
19-
.main-container {
20-
width: 100%;
21-
height: 100%;
53+
.menu-btn {
54+
margin-right: 4px;
55+
transition: all 0.2s ease;
2256
}
23-
24-
.sidenav-content {
25-
display: flex;
26-
padding: 10px;
27-
justify-content: space-between;
57+
.menu-btn:hover {
58+
background: rgba(0,0,0,0.04);
59+
transform: scale(1.05);
2860
}
29-
30-
.sidenav-menu {
31-
padding: 20px;
61+
.spacer {
62+
flex: 1 1 auto;
3263
}
33-
34-
.menu-close {
35-
position: absolute;
36-
right: 0;
37-
top: 2px;
38-
background: transparent;
39-
border: 0;
40-
color: #ddd;
41-
}
42-
43-
.github-fork-ribbon:before {
44-
background-color: #333;
64+
.content {
65+
padding: 24px;
66+
animation: fadeSlide 1s ease;
67+
}
68+
@keyframes fadeSlide {
69+
from {
70+
opacity: 0;
71+
transform: translateY(-5px);
72+
}
73+
to {
74+
opacity: 1;
75+
transform: translateY(0);
76+
}
4577
}
46-
47-
@media only screen and (max-width: 750px) {
48-
.github-fork-ribbon {
78+
@media (max-width: 768px) {
79+
.title-container {
80+
font-size: 14px;
81+
}
82+
.tag-title {
83+
font-size: 14px;
84+
}
85+
.tag-subtitle {
86+
font-size: 11px;
87+
}
88+
.github-fork-ribbon {
4989
display: none;
5090
}
51-
52-
}
91+
.logo,
92+
.logo-icon {
93+
opacity: 0;
94+
visibility: hidden;
95+
width: 0;
96+
margin: 0;
97+
overflow: hidden;
98+
}
99+
}

‎src/app/app.component.html‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
1-
<mat-drawer-container class="main-container" autosize>
2-
<mat-drawer #drawer class="sidenav-menu" mode="side" opened="{{ menuIsOpen }}">
3-
<button class="menu-close" (click)="toggleMenu()">
4-
<mat-icon class="white-icon">close</mat-icon>
5-
</button>
6-
<a routerLink="/"><app-logo></app-logo></a>
7-
<app-sidenav-buttons></app-sidenav-buttons>
8-
</mat-drawer>
9-
10-
<div class="sidenav-content">
11-
<button type="button" mat-button (click)="toggleMenu()" color="primary">
12-
<mat-icon>menu</mat-icon>
13-
</button>
1+
<mat-toolbar class="mat-elevation-z2 navbar">
2+
<button mat-icon-button (click)="toggleMenu()" class="menu-btn">
3+
<mat-icon>menu</mat-icon>
4+
</button>
5+
<a routerLink="/" class="logo">
6+
<app-logo class="logo-icon"></app-logo>
7+
</a>
8+
<div class="title-container">
149
<div class="tag-line">
15-
<div class="tag-title">{{ title || defaultTitle }}</div>
16-
<div class="tag-subtitle">{{ subtitle }}</div>
10+
<div class="tag-title">
11+
{{ title || defaultTitle }}
12+
</div>
13+
<div class="tag-subtitle" *ngIf="subtitle">
14+
{{ subtitle }}
15+
</div>
1716
</div>
18-
<div class="dummy"></div>
19-
<a
20-
target="_blank"
21-
class="github-fork-ribbon"
22-
href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
23-
data-ribbon="Fork me on GitHub"
24-
title="Fork me on GitHub"
25-
>Fork me on GitHub</a
26-
>
2717
</div>
28-
<mat-divider></mat-divider>
29-
<router-outlet></router-outlet>
30-
</mat-drawer-container>
18+
<span class="spacer"></span>
19+
<a
20+
target="_blank"
21+
class="github-fork-ribbon"
22+
href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
23+
data-ribbon="Fork me on GitHub"
24+
title="Fork me on GitHub">
25+
Fork me on GitHub
26+
</a>
27+
</mat-toolbar>
28+
<mat-sidenav-container class="sidenav-container">
29+
<mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">
30+
<app-sidenav-buttons></app-sidenav-buttons>
31+
</mat-sidenav>
32+
<mat-sidenav-content class="content" [style.margin-left]="sidenavWidth">
33+
<router-outlet></router-outlet>
34+
</mat-sidenav-content>
35+
</mat-sidenav-container>

‎src/app/app.component.spec.ts‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,45 @@
11
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
23
import { RouterTestingModule } from '@angular/router/testing';
34
import { AppComponent } from './app.component';
5+
import { MatToolbarModule } from '@angular/material/toolbar';
6+
import { MatIconModule } from '@angular/material/icon';
7+
import { MatSidenavModule } from '@angular/material/sidenav';
8+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
9+
import { of } from 'rxjs';
10+
import { ThemeService } from './service/theme.service';
11+
import { TitleService } from './service/title.service';
12+
13+
class MockThemeService {
14+
initTheme() {}
15+
}
16+
17+
class MockTitleService {
18+
titleInfo$ = of({
19+
dimension: 'Test Title',
20+
level: '1',
21+
});
22+
}
423

524
describe('AppComponent', () => {
625
let app: AppComponent;
726
let fixture: ComponentFixture<AppComponent>;
827

928
beforeEach(async () => {
1029
await TestBed.configureTestingModule({
11-
imports: [RouterTestingModule],
1230
declarations: [AppComponent],
31+
imports: [
32+
RouterTestingModule,
33+
MatToolbarModule,
34+
MatIconModule,
35+
MatSidenavModule,
36+
BrowserAnimationsModule,
37+
],
38+
providers: [
39+
{ provide: ThemeService, useClass: MockThemeService },
40+
{ provide: TitleService, useClass: MockTitleService },
41+
],
42+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1343
}).compileComponents();
1444
});
1545

@@ -24,10 +54,9 @@ describe('AppComponent', () => {
2454
});
2555

2656
it('check for fork me on github ribbon generation', () => {
27-
const fixture = TestBed.createComponent(AppComponent);
28-
const HTMLElement: HTMLElement = fixture.nativeElement;
29-
var divTag = HTMLElement.querySelector('div')!;
30-
var aTag = divTag.querySelector('a')!;
31-
expect(aTag.textContent).toContain('GitHub');
57+
const compiled = fixture.nativeElement as HTMLElement;
58+
const githubLink = compiled.querySelector('.github-fork-ribbon');
59+
expect(githubLink).not.toBeNull();
60+
expect(githubLink?.textContent?.trim()).toBe('Fork me on GitHub');
3261
});
3362
});

‎src/app/app.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export class AppComponent implements OnInit, OnDestroy {
1313
defaultTitle = '';
1414
subtitle = '';
1515
menuIsOpen: boolean = true;
16+
sidenavWidth: string = '250px';
1617

1718
private destroy$ = new Subject<void>();
1819

@@ -25,7 +26,10 @@ export class AppComponent implements OnInit, OnDestroy {
2526
if (menuState === 'false') {
2627
setTimeout(() => {
2728
this.menuIsOpen = false;
29+
this.sidenavWidth = '0px';
2830
}, 600);
31+
} else {
32+
this.sidenavWidth = '250px';
2933
}
3034

3135
// Subscribe to title changes
@@ -42,6 +46,7 @@ export class AppComponent implements OnInit, OnDestroy {
4246

4347
toggleMenu(): void {
4448
this.menuIsOpen = !this.menuIsOpen;
49+
this.sidenavWidth = this.menuIsOpen ? '250px' : '0px';
4550
localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString());
4651
}
4752
}

‎src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
4+
import { MatToolbarModule } from '@angular/material/toolbar';
45

56
import { AppRoutingModule } from './app-routing.module';
67
import { AppComponent } from './app.component';
@@ -62,6 +63,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
6263
MaterialModule,
6364
MatDialogModule,
6465
ReactiveFormsModule,
66+
MatToolbarModule,
6567
FormsModule,
6668
HttpClientModule,
6769
TeamsGroupsEditorModule,

0 commit comments

Comments
 (0)