<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>ng-sidebarjs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app-root>loading...</app-root>
</body>
</html>
// Code goes here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
position: relative;
font: 300 14px Arial, sans-serif;
color: #333;
}
a {
color: inherit;
text-decoration: none;
}
[sidebarjs] .img {
display: block;
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
margin-right: 16px;
opacity: .8;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.img.github {
background-image: url('https://raw.githubusercontent.com/SidebarJS/sidebarjs/master/demo/img/github.png');
}
.img.npm {
background-image: url('https://raw.githubusercontent.com/SidebarJS/sidebarjs/master/demo/img/npm.png');
}
.img.author {
background-image: url('https://raw.githubusercontent.com/SidebarJS/sidebarjs/master/demo/img/code.png');
}
.img.wiki {
background-image: url('https://raw.githubusercontent.com/SidebarJS/sidebarjs/master/demo/img/wiki.png');
}
.img.bugs {
background-image: url('https://raw.githubusercontent.com/SidebarJS/sidebarjs/master/demo/img/bugs.png');
}
[sidebarjs] * {
font: 300 16px/100% 'Arial', sans-serif;
}
[sidebarjs] h3 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
min-height: 180px;
padding: 16px;
background: #2196F3;
color: #FFF;
font-size: 40px;
}
[sidebarjs] nav {
overflow-x: hidden;
overflow-y: auto;
}
[sidebarjs] nav > div {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
border-top: 1px solid rgba(0,0,0, .1);
}
[sidebarjs] nav > div:first-child {
border-top: none;
}
[sidebarjs] nav a {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
align-items: center;
color: rgba(0,0,0, .64);
padding: 16px;
transition: background 0.3s ease;
}
[sidebarjs] nav a:active {
color: inherit;
background: rgba(0,0,0, .1);
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'ng-sidebarjs': 'npm:ng-sidebarjs/bundles/ng-sidebarjs.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component';
import { SidebarJSModule } from 'ng-sidebarjs';
@NgModule({
imports: [
BrowserModule,
SidebarJSModule.forRoot(),
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule {}
import { Component, OnInit, VERSION } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'src/app/app.component.html',
styleUrls: ['src/app/app.component.css']
})
export class AppComponent implements OnInit {
public sidebar: string;
public angular: string;
constructor() {
}
public ngOnInit(): void {
this.sidebar = 'ng-sidebarjs v2.0.0';
this.angular = `angular v${VERSION.full}`;
}
}
:host {
display: block;
min-height: 100vh;
padding: 24px;
}
:host button {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: none;
cursor: pointer;
outline: none;
display: inline-block;
background-color: #00a0de;
color: #FFF;
font-size: 14px;
font-weight: bold;
padding: 12px;
border-radius: 2px;
margin: 12px 0;
}
<h2>
<div>{{sidebar}}</div>
<div>{{angular}}</div>
</h2>
<button sidebarjsToggle>Toggle SidebarJS</button>
<sidebar-js>
<h3>ng-sidebarjs</h3>
<nav>
<div>
<a href="https://github.com/SidebarJS/ng-sidebarjs" (click)="handleElement($event)"><div class="img github"></div>Github</a>
<a href="https://www.npmjs.com/package/ng-sidebarjs" (click)="handleElement($event)"><div class="img npm"></div>npm</a>
<a href="https://github.com/lorenzodianni" (click)="handleElement($event)"><div class="img author"></div>Author</a>
</div>
</nav>
</sidebar-js>