Add sidebar component

This commit is contained in:
Pablo Bonilla 2021-07-03 19:15:33 -06:00
parent 8aae50e5f7
commit 2bdb6fbef1
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
7 changed files with 242 additions and 2 deletions

View File

@ -28,6 +28,7 @@ import { FooterComponent } from './layouts/footer/footer.component';
import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component';
import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive';
import { ErrorComponent } from './layouts/error/error.component';
import { SidebarComponent } from './layouts/sidebar/sidebar.component';
@NgModule({
imports: [
@ -59,7 +60,15 @@ import { ErrorComponent } from './layouts/error/error.component';
{ provide: NgbDateAdapter, useClass: NgbDateDayjsAdapter },
httpInterceptorProviders,
],
declarations: [MainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent],
declarations: [
MainComponent,
NavbarComponent,
ErrorComponent,
PageRibbonComponent,
ActiveMenuDirective,
FooterComponent,
SidebarComponent,
],
bootstrap: [MainComponent],
})
export class AppModule {

View File

@ -0,0 +1 @@
<p>sidebar works!</p>

View File

@ -0,0 +1,24 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SidebarComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'jhi-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
})
export class SidebarComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

View File

@ -0,0 +1,194 @@
/*!
=========================================================
* Paper Dashboard Pro Angular - v1.3.0
=========================================================
* Product Page: https://www.creative-tim.com/product/paper-dashboard-pro-angular
* Copyright 2018 Creative Tim (http://www.creative-tim.com)
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
.tim-row {
margin-bottom: 20px;
}
.tim-white-buttons {
background-color: #777777;
}
.typography-line {
padding-left: 25%;
margin-bottom: 35px;
position: relative;
display: block;
width: 100%;
}
.typography-line span {
bottom: 10px;
color: #c0c1c2;
display: block;
font-weight: 400;
font-size: 13px;
line-height: 13px;
left: 0;
position: absolute;
width: 260px;
text-transform: none;
}
.tim-row {
padding-top: 60px;
}
.tim-row h3 {
margin-top: 0;
}
.offline-doc .page-header {
display: flex;
align-items: center;
}
.offline-doc .footer {
position: absolute;
width: 100%;
background: transparent;
bottom: 0;
color: #fff;
z-index: 1;
}
#map {
position: relative;
width: 100%;
height: 100vh;
}
.demo-iconshtml {
font-size: 62.5%;
}
.demo-icons body {
font-size: 1.6rem;
font-family: sans-serif;
color: #333333;
background: white;
}
.demo-icons a {
color: #608cee;
text-decoration: none;
}
.demo-icons header {
text-align: center;
padding: 100px 0 0;
}
.demo-icons header h1 {
font-size: 2.8rem;
}
.demo-icons header p {
font-size: 1.4rem;
margin-top: 1em;
}
.demo-icons header a:hover {
text-decoration: underline;
}
.demo-icons .nc-icon {
font-size: 34px;
}
.demo-icons section h2 {
border-bottom: 1px solid #e2e2e2;
padding: 0 0 1em 0.2em;
margin-bottom: 1em;
}
.demo-icons ul {
padding-left: 0;
}
.demo-icons ul::after {
clear: both;
content: '';
display: table;
}
.demo-icons ul li {
width: 20%;
float: left;
padding: 16px 0;
text-align: center;
border-radius: 0.25em;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
transition: background 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
.demo-icons ul li:hover {
background: #f4f4f4;
}
.demo-icons ul p,
.demo-icons ul em,
.demo-icons ul input {
display: inline-block;
font-size: 1rem;
color: #999999;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.demo-icons ul p {
padding: 20px 0 0;
font-size: 12px;
margin: 0;
}
.demo-icons ul p::selection,
.demo-icons ul em::selection {
background: #608cee;
color: #efefef;
}
.demo-icons ul em {
font-size: 12px;
}
.demo-icons ul em::before {
content: '[';
}
.demo-icons ul em::after {
content: ']';
}
.demo-icons ul input {
text-align: center;
background: transparent;
border: none;
box-shadow: none;
outline: none;
display: none;
}

View File

@ -27,7 +27,7 @@
@import 'paper-dashboard/plugins/plugin-datetimepicker';
@import 'paper-dashboard/plugins/plugin-bootstrap-select';
@import 'paper-dashboard/plugins/plugin-jasny-fileupload';
// @import 'paper-dashboard/plugins/plugin-tagsinput';
@import 'paper-dashboard/plugins/plugin-tagsinput';
@import 'paper-dashboard/plugins/plugin-datatables.net';
@import 'paper-dashboard/plugins/plugin-jquery.jvectormap';
@import 'paper-dashboard/plugins/plugin-fullcalendar';