Skip to content

Commit

Permalink
add angular perfect scrollbar
Browse files Browse the repository at this point in the history
  • Loading branch information
azouaoui-med committed Dec 15, 2018
1 parent aedc20f commit c18a776
Show file tree
Hide file tree
Showing 29 changed files with 3,611 additions and 65 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ Navigate to `http://localhost:4200/`. The app will automatically reload if you c

## Resources
* [Bootstrap](https://getbootstrap.com/)
* [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/)
* [ngx bootstrap](https://valor-software.com/ngx-bootstrap/)
* [Font awsome](http://fontawesome.io/)
* [Angular Perfect Scrollbar](https://github.com/zefoy/ngx-perfect-scrollbar)

## License
This code is released under the [MIT](https://github.com/azouaoui-med/angular-pro-sidebar/blob/master/LICENSE) license.
16 changes: 3 additions & 13 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,7 @@
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@fortawesome/fontawesome-free/webfonts/",
"output": "./assets/webfonts/"
}
"src/assets"
],
"styles": [
"src/styles.scss"
Expand Down Expand Up @@ -89,12 +84,7 @@
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@fortawesome/fontawesome-free/webfonts/",
"output": "./assets/webfonts/"
}
"src/assets"
]
}
},
Expand Down Expand Up @@ -142,4 +132,4 @@
}
},
"defaultProject": "angular-pro-sidebar"
}
}
384 changes: 384 additions & 0 deletions demo/3rdpartylicenses.txt

Large diffs are not rendered by default.

Binary file added demo/assets/img/angular.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/assets/img/bg1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/assets/img/user.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/fa-regular-400.0b5e3a5451fc62d9023c.woff
Binary file not shown.
467 changes: 467 additions & 0 deletions demo/fa-regular-400.0c41971339b9fc5b1cef.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/fa-regular-400.6493321d567eb0f22bd5.eot
Binary file not shown.
Binary file added demo/fa-regular-400.b48c48ea8457846a5695.ttf
Binary file not shown.
Binary file added demo/fa-regular-400.bdadb6ce95c5a2e7b673.woff2
Binary file not shown.
2,618 changes: 2,618 additions & 0 deletions demo/fa-solid-900.4478b4d7022cad174e4c.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/fa-solid-900.48f54f63d7711d0912a9.ttf
Binary file not shown.
Binary file added demo/fa-solid-900.bcb927a742a8370b7664.woff
Binary file not shown.
Binary file added demo/fa-solid-900.f29ad0031ad2c1c14b77.eot
Binary file not shown.
Binary file added demo/fa-solid-900.fb493903265cad425ccd.woff2
Binary file not shown.
Binary file added demo/favicon.ico
Binary file not shown.
14 changes: 14 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Pro Sidebar</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.499a5f87b1c01610d207.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.ec2944dd8b20ec099bf3.js"></script><script type="text/javascript" src="polyfills.20ab2d163684112c2aba.js"></script><script type="text/javascript" src="main.2a051f303a994f842e7d.js"></script></body>
</html>
1 change: 1 addition & 0 deletions demo/main.2a051f303a994f842e7d.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions demo/polyfills.20ab2d163684112c2aba.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions demo/runtime.ec2944dd8b20ec099bf3.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions demo/styles.499a5f87b1c01610d207.css

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"ngx-bootstrap": "^3.1.2",
"ngx-perfect-scrollbar": "^7.1.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
Expand Down
2 changes: 1 addition & 1 deletion src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}

.attribution{
position: absolute;
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
Expand Down
14 changes: 12 additions & 2 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,13 @@ import { BsDropdownModule } from 'ngx-bootstrap';
import { AppComponent } from './app.component';
import { SidebarComponent } from './sidebar/sidebar.component';

import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};

@NgModule({
declarations: [
Expand All @@ -19,9 +25,13 @@ import { SidebarComponent } from './sidebar/sidebar.component';
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
BsDropdownModule.forRoot()
BsDropdownModule.forRoot(),
PerfectScrollbarModule
],
providers: [],
providers: [ {
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
}],
bootstrap: [AppComponent]
})
export class AppModule { }
96 changes: 49 additions & 47 deletions src/app/sidebar/sidebar.component.html
Original file line number Diff line number Diff line change
@@ -1,57 +1,59 @@
<nav id="sidebar" class="sidebar" [ngClass]="{'sidebar-bg' : hasBackgroundImage()}">
<div class="sidebar-content">
<div class="sidebar-header">
<a href="#">Pro Sidebar</a>
</div>

<div class="sidebar-profile">
<div class="user-pic">
<img class="img-responsive img-rounded" src="assets/img/user.jpg" alt="User picture">
<perfect-scrollbar>
<div class="sidebar-header">
<a href="#">Pro Sidebar</a>
</div>
<div class="user-info">
<span class="user-name">Jhon
<strong>Smith</strong>
</span>
<span class="user-role">Administrator</span>
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>

<div class="sidebar-profile">
<div class="user-pic">
<img class="img-responsive img-rounded" src="assets/img/user.jpg" alt="User picture">
</div>
<div class="user-info">
<span class="user-name">Jhon
<strong>Smith</strong>
</span>
<span class="user-role">Administrator</span>
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>
</div>
</div>
</div>
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search...">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search...">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul>
<li *ngFor="let menu of menus" [ngClass]="{'active': menu.active , 'sidebar-dropdown':menu.type === 'dropdown' , 'header-menu':menu.type === 'header'}">
<span *ngIf="menu.type === 'header'">{{menu.title}}</span>
<a *ngIf="menu.type !== 'header'" href="#" (click)='toggle(menu)'>
<i class="{{menu.icon}}"></i>
<span>{{menu.title}}</span>
<span *ngIf="menu.badge" class="badge badge-pill" [ngClass]="menu.badge.class">{{menu.badge.text}}</span>
</a>
<div *ngIf="menu.type === 'dropdown'" class="sidebar-submenu" [@slide]="getState(menu)">
<ul>
<li *ngFor="let submenu of menu.submenus">
<a href="#"> {{submenu.title}}
<span *ngIf="submenu.badge" class="badge badge-pill" [ngClass]="submenu.badge.class">{{submenu.badge.text}}</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="sidebar-menu">
<ul>
<li *ngFor="let menu of menus" [ngClass]="{'active': menu.active , 'sidebar-dropdown':menu.type === 'dropdown' , 'header-menu':menu.type === 'header'}">
<span *ngIf="menu.type === 'header'">{{menu.title}}</span>
<a *ngIf="menu.type !== 'header'" href="#" (click)='toggle(menu)'>
<i class="{{menu.icon}}"></i>
<span>{{menu.title}}</span>
<span *ngIf="menu.badge" class="badge badge-pill" [ngClass]="menu.badge.class">{{menu.badge.text}}</span>
</a>
<div *ngIf="menu.type === 'dropdown'" class="sidebar-submenu" [@slide]="getState(menu)">
<ul>
<li *ngFor="let submenu of menu.submenus">
<a href="#"> {{submenu.title}}
<span *ngIf="submenu.badge" class="badge badge-pill" [ngClass]="submenu.badge.class">{{submenu.badge.text}}</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</perfect-scrollbar>
</div>
<div class="sidebar-footer">
<div class="dropdown" dropdown>
Expand Down
2 changes: 1 addition & 1 deletion src/app/sidebar/sidebar.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export class SidebarService {
active: false,
type: 'simple',
badge: {
text: 'Alpha',
text: 'Beta',
class: 'badge-primary'
},
},
Expand Down
22 changes: 22 additions & 0 deletions src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~perfect-scrollbar/css/perfect-scrollbar.css';


body {
Expand All @@ -15,6 +16,27 @@ body {
left: -300px;
}

// angular perfect scrollbar style
.sidebar .ps.ps--scrolling-y>.ps__rail-y,
.sidebar>.ps.ps--scrolling-x>.ps__rail-x,
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: transparent !important;
}

.sidebar .ps.ps--active-y>.ps__rail-y:hover,
.sidebar>.ps.ps--active-y>.ps__rail-y.ps--clicking {
width: 10px !important;
}

.ps__thumb-y {
background-color: #fff !important;
width: 6px!important;
border-radius: 0px!important;
opacity: .5;

}

0 comments on commit c18a776

Please sign in to comment.