fix(aio): reimplement the top menu dropping into the side bar
I couldn't find the CSS for the `.small` class to make it look nice.
This commit is contained in:
Peter Bacon Darwin
Igor Minar
parent
55189b1b85
commit
ebd446397a
|
|
@ -0,0 +1,26 @@
|
||||||
|
<md-toolbar color="primary" class="app-toolbar">
|
||||||
|
<button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
|
||||||
|
<aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
|
||||||
|
<md-input-container >
|
||||||
|
<input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
|
||||||
|
</md-input-container>
|
||||||
|
<span class="fill-remaining-space"></span>
|
||||||
|
</md-toolbar>
|
||||||
|
|
||||||
|
<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
|
||||||
|
|
||||||
|
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
|
||||||
|
<aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
|
||||||
|
<aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
|
||||||
|
</md-sidenav>
|
||||||
|
|
||||||
|
<section class="sidenav-content">
|
||||||
|
<div class="search-results">
|
||||||
|
<div *ngFor="let result of (searchResults | async)?.results">
|
||||||
|
<a href="{{ result.path }}">{{ result.title }}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<aio-doc-viewer [doc]="currentDocument | async"></aio-doc-viewer>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</md-sidenav-container>
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
.fill-remaining-space {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-input-container {
|
||||||
|
margin-left: 10px;
|
||||||
|
input {
|
||||||
|
min-width:200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.md-input-element {
|
||||||
|
font-size: 70%;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
aio-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-content {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav-content button {
|
||||||
|
min-width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// md-toolbar {
|
||||||
|
// display: none;
|
||||||
|
// padding-left: 10px !important;
|
||||||
|
// }
|
||||||
|
// md-toolbar.active {
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
|
@ -6,84 +6,8 @@ import { SearchService, QueryResults } from 'app/search/search.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'aio-shell',
|
selector: 'aio-shell',
|
||||||
template: `
|
templateUrl: './app.component.html',
|
||||||
<md-toolbar color="primary" class="app-toolbar">
|
styleUrls: ['./app.component.scss'],
|
||||||
<button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
|
|
||||||
<aio-top-menu [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
|
|
||||||
<md-input-container >
|
|
||||||
<input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
|
|
||||||
</md-input-container>
|
|
||||||
<span class="fill-remaining-space"></span>
|
|
||||||
</md-toolbar>
|
|
||||||
|
|
||||||
<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
|
|
||||||
|
|
||||||
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "this.isSideBySide ? 'side' : 'over'">
|
|
||||||
<aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
|
|
||||||
</md-sidenav>
|
|
||||||
|
|
||||||
<section class="sidenav-content">
|
|
||||||
<div class="search-results">
|
|
||||||
<div *ngFor="let result of (searchResults | async)?.results">
|
|
||||||
<a href="{{ result.path }}">{{ result.title }}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<aio-doc-viewer [doc]="currentDocument | async"></aio-doc-viewer>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</md-sidenav-container>`,
|
|
||||||
styles: [
|
|
||||||
`.fill-remaining-space {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
md-input-container {
|
|
||||||
margin-left: 10px;
|
|
||||||
input {
|
|
||||||
min-width:200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.md-input-element {
|
|
||||||
font-size: 70%;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
aio-menu {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-content {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav-content button {
|
|
||||||
min-width: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// md-toolbar {
|
|
||||||
// display: none;
|
|
||||||
// padding-left: 10px !important;
|
|
||||||
// }
|
|
||||||
// md-toolbar.active {
|
|
||||||
// display: block;
|
|
||||||
// }`
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
readonly sideBySideWidth = 600;
|
readonly sideBySideWidth = 600;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue