Skip to content

Commit df0f98c

Browse files
Klath123Klath123
committed
fix navbar and sidenav layout
1 parent 120e8b6 commit df0f98c

4 files changed

Lines changed: 132 additions & 69 deletions

File tree

‎src/app/app.component.css‎

Lines changed: 86 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +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 16px;
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
}
10-
1138
.tag-title {
12-
font-size: 0.9em;
39+
font-size: 0.85em;
40+
font-weight: 500;
41+
line-height: 1;
42+
letter-spacing: 0.04em;
1343
}
14-
1544
.tag-subtitle {
16-
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;
1752
}
18-
19-
/* --- experimental branch end --- */
20-
21-
.main-container {
22-
width: 100%;
23-
height: 100vh;
53+
.menu-btn {
54+
margin-right: 4px;
55+
transition: all 0.2s ease;
2456
}
25-
26-
.sidenav-content {
27-
display: flex;
28-
padding: 10px;
29-
justify-content: space-between;
30-
width: 100%;
31-
min-height: 60px;
32-
box-sizing: border-box;
33-
}
34-
35-
.sidenav-menu {
36-
padding: 20px;
37-
}
38-
39-
.menu-close {
40-
position: absolute;
41-
right: 0;
42-
top: 2px;
43-
background: transparent;
44-
border: 0;
45-
color: #ddd;
46-
cursor: pointer;
47-
}
48-
49-
.github-fork-ribbon:before {
50-
background-color: #333;
57+
.menu-btn:hover {
58+
background: rgba(0,0,0,0.04);
59+
transform: scale(1.05);
60+
}
61+
.spacer {
62+
flex: 1 1 auto;
63+
}
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+
}
5177
}
52-
53-
@media only screen and (max-width: 750px) {
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+
}
5488
.github-fork-ribbon {
55-
display: none;
89+
display: none;
90+
}
91+
.logo,
92+
.logo-icon {
93+
opacity: 0;
94+
visibility: hidden;
95+
width: 0;
96+
margin: 0;
97+
overflow: hidden;
5698
}
57-
5899
}

‎src/app/app.component.html‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,41 @@
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 *ngIf="!menuIsOpen" type="button" mat-button (click)="toggleMenu()" color="primary">
12-
<mat-icon>menu</mat-icon>
13-
</button>
14-
<div class="tag-line">
15-
<div class="tag-title">{{ title || defaultTitle }}</div>
16-
<div class="tag-subtitle">{{ subtitle }}</div>
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">
9+
<div class="tag-line">
10+
<div class="tag-title">
11+
{{ title || defaultTitle }}
12+
</div>
13+
<div class="tag-subtitle" *ngIf="subtitle">
14+
{{ subtitle }}
1715
</div>
18-
<div class="dummy"></div>
19-
<a
16+
</div>
17+
</div>
18+
<span class="spacer"></span>
19+
<a
2020
target="_blank"
2121
class="github-fork-ribbon"
2222
href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
2323
data-ribbon="Fork me on GitHub"
2424
title="Fork me on GitHub">
2525
Fork me on GitHub
2626
</a>
27-
</div>
28-
<mat-divider></mat-divider>
29-
<router-outlet></router-outlet>
30-
</mat-drawer-container>
27+
</mat-toolbar>
28+
<mat-sidenav-container class="sidenav-container">
29+
<mat-sidenav
30+
mode="side"
31+
opened
32+
class="sidenav"
33+
[style.width]="sidenavWidth">
34+
<app-sidenav-buttons></app-sidenav-buttons>
35+
</mat-sidenav>
36+
<mat-sidenav-content
37+
class="content"
38+
[style.margin-left]="sidenavWidth">
39+
<router-outlet></router-outlet>
40+
</mat-sidenav-content>
41+
</mat-sidenav-container>

‎src/app/app.component.ts‎

Lines changed: 8 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,8 +26,13 @@ export class AppComponent implements OnInit, OnDestroy {
2526
if (menuState === 'false') {
2627
setTimeout(() => {
2728
this.menuIsOpen = false;
29+
this.sidenavWidth = '0px';
2830
}, 600);
2931
}
32+
else {
33+
this.sidenavWidth = '250px';
34+
}
35+
3036

3137
// Subscribe to title changes
3238
this.titleService.titleInfo$.pipe(takeUntil(this.destroy$)).subscribe(titleInfo => {
@@ -42,6 +48,8 @@ export class AppComponent implements OnInit, OnDestroy {
4248

4349
toggleMenu(): void {
4450
this.menuIsOpen = !this.menuIsOpen;
51+
this.sidenavWidth = this.menuIsOpen ? '250px' : '0px';
4552
localStorage.setItem('state.menuIsOpen', this.menuIsOpen.toString());
4653
}
54+
4755
}

‎src/app/app.module.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
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';
78
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
8-
import { MaterialModule } from './material/material.module';
9+
import { MaterialModule } from
10+
'./material/material.module';
911
import { CircularHeatmapComponent } from './pages/circular-heatmap/circular-heatmap.component';
1012
import { MatrixComponent } from './pages/matrix/matrix.component';
1113
import { MappingComponent } from './pages/mapping/mapping.component';
@@ -62,6 +64,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
6264
MaterialModule,
6365
MatDialogModule,
6466
ReactiveFormsModule,
67+
MatToolbarModule,
6568
FormsModule,
6669
HttpClientModule,
6770
TeamsGroupsEditorModule,
@@ -74,4 +77,4 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
7477
],
7578
bootstrap: [AppComponent],
7679
})
77-
export class AppModule {}
80+
export class AppModule {}

0 commit comments

Comments
 (0)