desgin prototype v1
Anis Vicious
6 years ago
parent
eb4a5e2e5b
commit
5b4595a032
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
@ -0,0 +1,144 @@
|
||||
<body class="grey-skin">
|
||||
|
||||
|
||||
<!--Double navigation-->
|
||||
<header>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<mdb-sidenav #sidenav class="sn-bg-1 fixed" [fixed]="true">
|
||||
|
||||
<logo>
|
||||
<!-- Logo -->
|
||||
<li>
|
||||
<div class="logo-wrapper waves-light">
|
||||
<a href="#"><img style="height: 90px; margin-left: 13%;"src="https://openclipart.org/image/2400px/svg_to_png/190248/slogonormal.png" class="img-fluid flex-center"></a>
|
||||
</div>
|
||||
</li>
|
||||
<!--/. Logo -->
|
||||
</logo>
|
||||
|
||||
<links>
|
||||
<!--Social-->
|
||||
<li>
|
||||
<ul class="social">
|
||||
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
|
||||
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
|
||||
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
|
||||
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!--/Social-->
|
||||
<!--Search Form-->
|
||||
<li>
|
||||
<form class="search-form" role="search">
|
||||
<div class="form-group md-form mt-0 pt-1 waves-light" mdbWavesEffect>
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<!--/.Search Form-->
|
||||
<!-- Side navigation links -->
|
||||
<li>
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<mdb-squeezebox [multiple]="false" aria-multiselectable="false">
|
||||
|
||||
<!-- Collapsible link -->
|
||||
<mdb-item>
|
||||
<mdb-item-head mdbWavesEffect><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-item-head>
|
||||
<mdb-item-body>
|
||||
<ul>
|
||||
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 1</a></li>
|
||||
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 2</a></li>
|
||||
</ul>
|
||||
</mdb-item-body>
|
||||
</mdb-item>
|
||||
|
||||
<!-- Simple link -->
|
||||
<mdb-item class="no-collase">
|
||||
<mdb-item-head mdbWavesEffect><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-item-head>
|
||||
<mdb-item-body></mdb-item-body>
|
||||
</mdb-item>
|
||||
|
||||
<!-- Collapsible link -->
|
||||
<mdb-item>
|
||||
<mdb-item-head mdbWavesEffect><i class="fa fa-eye"></i> Collapsible menu 2</mdb-item-head>
|
||||
<mdb-item-body>
|
||||
<ul>
|
||||
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 1</a></li>
|
||||
<li><a href="#" class="waves-effect" mdbWavesEffect>Link 2</a></li>
|
||||
</ul>
|
||||
</mdb-item-body>
|
||||
</mdb-item>
|
||||
|
||||
<!-- Simple link -->
|
||||
<mdb-item class="no-collase">
|
||||
<mdb-item-head mdbWavesEffect><i class="fa fa-diamond"></i> Simple link 2</mdb-item-head>
|
||||
<mdb-item-body></mdb-item-body>
|
||||
</mdb-item>
|
||||
|
||||
</mdb-squeezebox>
|
||||
</ul>
|
||||
</li>
|
||||
<!--/. Side navigation links -->
|
||||
</links>
|
||||
<div class="sidenav-bg mask-strong"></div>
|
||||
</mdb-sidenav>
|
||||
<!--/. Sidebar navigation -->
|
||||
|
||||
<!-- Navbar -->
|
||||
<mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav" [containerInside]="false">
|
||||
|
||||
<navlinks class="navbar-container">
|
||||
<!-- SideNav slide-out button -->
|
||||
<div class="float-left">
|
||||
<a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a>
|
||||
</div>
|
||||
<!--/. SideNav slide-out button -->
|
||||
</navlinks>
|
||||
|
||||
<logo>
|
||||
<!-- Breadcrumb-->
|
||||
<div class="breadcrumbs breadcrumb-dn mr-auto">
|
||||
<p>Welcome</p>
|
||||
</div>
|
||||
<!--/. Breadcrumb-->
|
||||
</logo>
|
||||
|
||||
<navlinks>
|
||||
<ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light" mdbWavesEffect><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link waves-light" mdbWavesEffect><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
|
||||
</li>
|
||||
<li class="nav-item" (click)="logout()">
|
||||
<a class="nav-link waves-light" mdbWavesEffect><i class="fa fa-sign-out mr-1"></i> <span class="clearfix d-none d-sm-inline-block">Log out</span></a>
|
||||
</li>
|
||||
<!--<li class="nav-item dropdown btn-group" dropdown>-->
|
||||
<!--<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>-->
|
||||
<!--Dropdown-->
|
||||
<!--</a>-->
|
||||
<!--<div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">-->
|
||||
<!--<a class="dropdown-item" href="#">Action</a>-->
|
||||
<!--<a class="dropdown-item" href="#">Another action</a>-->
|
||||
<!--<a class="dropdown-item" href="#">Something else here</a>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
</ul>
|
||||
</navlinks>
|
||||
</mdb-navbar>
|
||||
<!--/. Navbar -->
|
||||
|
||||
</header>
|
||||
<!--/.Double navigation-->
|
||||
|
||||
<!--Main Layout-->
|
||||
<main style="margin-left: 0%; margin-right: 0%;">
|
||||
<div class="container-fluid" style="margin:0%; padding: 0%">
|
||||
<app-book></app-book>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
<!--/Main layout-->
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MainComponent } from './main.component';
|
||||
|
||||
describe('MainComponent', () => {
|
||||
let component: MainComponent;
|
||||
let fixture: ComponentFixture<MainComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MainComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main',
|
||||
templateUrl: './main.component.html',
|
||||
styleUrls: ['./main.component.scss']
|
||||
})
|
||||
export class MainComponent implements OnInit {
|
||||
|
||||
constructor(private router: Router, private route: ActivatedRoute) { }
|
||||
|
||||
logout() {
|
||||
localStorage.removeItem('jwtToken');
|
||||
this.router.navigate(['login']);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue