src/app/components/toolbar/toolbar.component.ts
Displays a toolbar on the top of each page
| selector | ccf-toolbar |
| styleUrls | ./toolbar.component.scss |
| templateUrl | ./toolbar.component.html |
Properties |
|
Inputs |
| navigationItems | |
Type : NavItems[]
|
|
Default value : NAVIGATION_ITEMS
|
|
|
Menu items to be displayed on the toolbar |
|
import { NavItems } from './nav-items';
import { Component, Input } from '@angular/core';
import { NAVIGATION_ITEMS } from '../../shared/navigation-items';
import { ConnectedPosition } from '@angular/cdk/overlay';
/** Displays a toolbar on the top of each page */
@Component({
selector: 'ccf-toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss'],
})
export class ToolbarComponent {
/** Menu items to be displayed on the toolbar */
@Input() navigationItems: NavItems[] = NAVIGATION_ITEMS;
/** Position of Menu item card on small screen size */
readonly MENU_TREE_POSITIONS: ConnectedPosition[] = [
{
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top',
offsetX: 16,
offsetY: 10,
},
];
}
<mat-toolbar class="mat-toolbar">
<a class="hubmap-header" [routerLink]="['/']">HuBMAP</a>
<a class="hra-header" [routerLink]="['/']">Human Reference Atlas</a>
<div style="flex-grow: 1"></div>
<ccf-navbar [items]="navigationItems"></ccf-navbar>
<menu-tree [treeItems]="navigationItems" [positions]="MENU_TREE_POSITIONS"></menu-tree>
</mat-toolbar>
./toolbar.component.scss
:host {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
.mat-toolbar {
max-width: 77rem;
padding: 0;
background: #444c65;
position: sticky;
top: 0;
z-index: 100;
height: 4rem;
}
.hubmap-header {
color: #ffffff;
font-family: 'Impact';
font-style: normal;
font-weight: 400;
font-size: 2rem;
line-height: 2.438rem;
text-decoration: none;
padding-right: 1rem;
}
.hra-header {
font-weight: 300;
font-size: 2rem;
color: #c2cae6;
letter-spacing: -0.025em;
line-height: 2.438rem;
text-decoration: none;
}
.nav-small {
display: none;
}
menu-tree {
display: none;
}
@media (max-width: 26.75rem) {
.mat-toolbar {
padding: 0rem 1rem;
}
.hubmap-header {
font-size: 1.5rem;
}
.hra-header {
font-size: 1.25rem;
}
ccf-navbar {
display: none;
}
menu-tree {
display: unset;
}
.hubmap-header {
display: none;
}
}
@media (max-width: 80rem) {
.hubmap-header {
display: none;
}
.mat-toolbar {
padding: 0rem 1rem;
}
}
@media (max-width: 62.5rem) {
ccf-navbar {
display: none;
}
menu-tree {
display: unset;
}
}
}
::ng-deep {
.mat-nested-tree-node,
.mat-tree-node {
display: block;
padding: 1rem 2rem 1rem 2rem;
}
.mat-nested-tree-node {
.mat-tree-node {
padding: 1rem;
position: relative;
}
.mat-divider {
// width: calc(100% + 40px);
position: absolute;
bottom: 0;
left: -2rem;
right: -2rem;
}
}
}