initial commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

angular.json

@@ -0,0 +1,100 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "sidenav": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/sidenav",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "sidenav:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "sidenav:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "sidenav:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "styles.scss"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "sidenav"
+}

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "sidnav",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@angular/common": "8.2.1",
+    "@angular/compiler": "8.2.1",
+    "@angular/core": "8.2.1",
+    "@angular/forms": "8.2.1",
+    "@angular/platform-browser": "8.2.1",
+    "@angular/platform-browser-dynamic": "8.2.1",
+    "@angular/router": "8.2.1",
+    "core-js": "3.2.0",
+    "rxjs": "6.5.2",
+    "zone.js": "0.10.1"
+  },
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^0.802.1",
+    "@angular/cli": "~8.2.1",
+    "@angular/compiler-cli": "~8.2.1",
+    "@angular/language-service": "~8.2.1",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~3.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.11.0",
+    "typescript": "~3.5.3"
+  }
+}

src/app/app.component.html

@@ -0,0 +1,16 @@
+<sidenav-container
+dir="left" 
+mode="hover"
+>
+<sidenav-drawer urlBackground="assets/sidebar-1.jpg" >
+    <sidenav-drawer-item route="/" [check]="'(\\s*)'" itemTitle="Accueil">
+			<i class="fas fa-home"></i>
+		</sidenav-drawer-item>
+    <sidenav-drawer-item route="/home" [check]="'(\/home)'" itemTitle="Accueil">
+			<i class="fas fa-home"></i>
+		</sidenav-drawer-item>
+  </sidenav-drawer>
+  <sidenav-content>
+    <router-outlet></router-outlet>
+  </sidenav-content>
+</sidenav-container>

src/app/app.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { SidenavService } from './sidenav/sidenav.service';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.scss' ]
+})
+export class AppComponent  {
+	name = 'Angular';
+	
+	constructor(
+		public _menu: SidenavService
+	){}
+  
+}

src/app/app.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { HelloComponent } from './hello.component';
+
+import { SideNavModule } from './sidenav/sidenav.module'
+import { AppRoutingModule } from './routing.module';
+
+@NgModule({
+  imports:      [ BrowserModule, FormsModule, SideNavModule, AppRoutingModule ],
+  declarations: [ AppComponent, HelloComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

src/app/hello.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'hello',
+  template: `<h1>Hello {{name}}!</h1>`,
+  styles: [`h1 { font-family: Lato; }`]
+})
+export class HelloComponent  {
+	name: string = "couillu";
+}

src/app/routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { HelloComponent } from "./hello.component";
+
+const routes : Routes = [
+	{ path: "", component: HelloComponent},
+	{ path: "home", component: HelloComponent}
+]
+
+@NgModule({
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/sidenav/sidenav-container/sidenav-container.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'sidenav-container',
+  template: '<ng-content></ng-content>'
+})
+export class SidenavContainerComponent {
+  @HostBinding('class')
+  private get className() {
+    return ['sidenav-container', this.dir, this.mode].join(' ');
+  }
+  
+  @Input()
+  public dir : string = 'left'
+
+  @Input()
+  public mode : string = 'hover';
+}

src/app/sidenav/sidenav-content/sidenav-content.component.ts

@@ -0,0 +1,10 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'sidenav-content',
+  template: '<ng-content></ng-content>',
+  host:{
+    'class': 'sidenav-content'
+  }
+})
+export class SidenavContentComponent {}

src/app/sidenav/sidenav-drawer-item/sidenav-drawer-item.component.html

@@ -0,0 +1,6 @@
+<li #button (click)="_menu.clickItem($event, route)">
+	<a matRipple matRippleColor="#ffffff66" [routerLink]="route">
+		<ng-content></ng-content>
+		<span > {{ title }} </span>
+	</a>
+</li>

src/app/sidenav/sidenav-drawer-item/sidenav-drawer-item.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { SidenavService } from '../sidenav.service';
+import { startWith, map } from "rxjs/operators";
+
+@Component({
+  selector: 'sidenav-drawer-item',
+  templateUrl: './sidenav-drawer-item.component.html',
+  styleUrls: ['./sidenav-drawer-item.component.css']
+})
+export class SidenavDrawerItemComponent implements OnInit {
+  @Input('route') route;
+	@Input('itemTitle') title;
+	@Input('check') check?;
+
+	@ViewChild('button', { static: true }) element;
+
+	constructor(
+		public _menu: SidenavService 
+	){ }
+	
+	ngOnInit(){
+		if(this.check)
+			this._menu.currentRouteChange.pipe(
+				startWith(this._menu.currentRoute),
+				map(url => url)
+			).subscribe((url) => {
+				const _regex = new RegExp(this.check)
+				if(_regex.exec(url)) this._menu.setSelectedItem(this.element.nativeElement)
+			})
+	}
+}

src/app/sidenav/sidenav-drawer/sidenav-drawer.component.html

@@ -0,0 +1,6 @@
+<div class="sidenav-drawer">
+  <ul>
+    <ng-content></ng-content>
+	</ul>
+	<div *ngIf="urlBackground" class="sidenav-background" [style.background-image]="'url(' + urlBackground + ')'"></div>
+</div>

src/app/sidenav/sidenav-drawer/sidenav-drawer.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'sidenav-drawer',
+  templateUrl: './sidenav-drawer.component.html',
+  styleUrls: ['./sidenav-drawer.component.css'],
+  host:{
+    'class': 'sidenav-drawer-container'
+  }
+})
+export class SidenavDrawerComponent {
+
+  @Input()
+  public urlBackground : string;
+
+}

src/app/sidenav/sidenav.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidenavContainerComponent } from './sidenav-container/sidenav-container.component';
+import { SidenavContentComponent } from './sidenav-content/sidenav-content.component';
+import { SidenavDrawerComponent } from './sidenav-drawer/sidenav-drawer.component';
+import { SidenavDrawerItemComponent } from './sidenav-drawer-item/sidenav-drawer-item.component';
+import { SidenavService } from './sidenav.service';
+import { AppRoutingModule } from '../routing.module';
+
+@NgModule({
+	imports: [
+		CommonModule,
+		AppRoutingModule
+	],
+	declarations: [
+		SidenavContainerComponent,
+		SidenavContentComponent,
+		SidenavDrawerComponent,
+		SidenavDrawerItemComponent
+	],
+	exports: [
+		SidenavContainerComponent,
+		SidenavContentComponent,
+		SidenavDrawerComponent,
+		SidenavDrawerItemComponent
+	], 
+	providers: [SidenavService]
+})
+export class SideNavModule { }

src/app/sidenav/sidenav.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from "@angular/core";
+import { Router } from "@angular/router";
+import { Observable } from "rxjs";
+import { map, filter } from "rxjs/operators";
+
+@Injectable()
+export class SidenavService {
+	selectedElement;
+	currentRouteChange: Observable<string>;
+	currentRoute: string;
+
+	constructor(
+		private _router: Router
+	){
+		this.currentRoute = this._router.routerState.snapshot.url;
+		this.currentRouteChange = this._router.events.pipe(
+			filter((status : any) => status.urlAfterRedirects !== undefined && status.state === undefined),
+			map((status : any) => {
+				this.currentRoute = status.urlAfterRedirects;
+				return status.urlAfterRedirects;
+			})
+		)
+	}
+
+	clickItem(event: any, route: string) {
+		if(this.selectedElement !== event.target.parentElement.parentElement && event.target.parentElement.parentElement.tagName === 'LI') 
+			this.setSelectedItem(event.target.parentElement.parentElement)
+	}
+
+	setSelectedItem(element: Element) {
+		if(this.selectedElement) this.selectedElement.classList.remove('active-item')
+		this.selectedElement = element;
+		this.selectedElement.classList.add('active-item')
+	}
+}

src/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>SideNav</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <link rel="icon" type="image/x-icon" href="assets/icone.png">
+  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
+</head>
+
+<body>
+  <my-app>
+		Chargement...
+  </my-app>
+</body>
+</html>

src/karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

src/main.ts

@@ -0,0 +1,16 @@
+import './polyfills';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+  // Ensure Angular destroys itself on hot reloads.
+  if (window['ngRef']) {
+    window['ngRef'].destroy();
+  }
+  window['ngRef'] = ref;
+
+  // Otherwise, log the boot error
+}).catch(err => console.error(err));

src/polyfills.ts

@@ -0,0 +1,67 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+// import 'core-js/es6/reflect';
+import 'core-js/es/reflect';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.

src/styles.scss

@@ -0,0 +1,178 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  .sidenav-container{
+    margin: 0;
+    padding:0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: block;
+    position: absolute;
+    overflow: hidden;
+    
+    &.left{
+      &.fixed{
+        .sidenav-drawer-container {
+          transition: left 0.3s;
+          left: 0;
+        }
+        .sidenav-content {
+          margin-left: 240px;
+        }
+      } 
+
+      &.hover {
+        .sidenav-drawer-container{
+          transition: left 0.3s;
+          left: -180px;
+          &:hover {
+            left: 0;
+          }
+        }
+        .sidenav-content {
+          margin-left: 60px;
+        }
+      }
+      .sidenav-drawer>ul li>a>i {
+        float: right;
+        right: 10px;
+      }
+
+    }
+
+    &.right{
+      &.fixed {
+        .sidenav-drawer-container{
+          transition: right 0.3s;
+          right: 0;        
+        }
+        .sidenav-content {
+          margin-right: 240px;
+        }
+      }
+      
+      
+      &.hover{
+        .sidenav-drawer-container{
+          transition: right 0.3s;
+          right: -180px;
+          &:hover {
+            right: 0;
+          }
+        }
+        .sidenav-content {
+          margin-right: 60px;
+        }
+
+      } 
+
+      .sidenav-drawer>ul li>a{
+        >i {
+          float: left;
+          left: 10px;
+        }
+        >span {
+          margin-left:40px;
+        }
+      }
+    }
+
+    .sidenav-drawer-container{
+      z-index: 99999;
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width:240px;
+      box-sizing: border-box;
+      box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
+      background-color: rgba(255, 0, 0, 1);
+      
+			.sidenav-drawer{
+				.sidenav-background{
+					position: absolute;
+					z-index: 1;
+					height: 100%;
+					width: 100%;
+					display: block;
+					top: 0;
+					left: 0;
+					background-size: cover;
+					background-position: center center;
+	
+					&:after {
+						position: absolute;
+						z-index: 3;
+						width: 100%;
+						height: 100%;
+						content: "";
+						display: block;
+						background: #fff;
+						opacity: .93;
+						background-color: rgba(255, 0, 0, 1);
+						opacity: .6;
+					}
+				}
+				>ul{
+					position: relative;
+					z-index: 4;
+					padding: 0;
+					padding-bottom: 120px;
+					list-style-type: none;
+					margin: 10px 0 0 0;
+					width: 258px;
+					box-sizing: border-box;
+
+					sidenav-drawer-item>li {
+						padding: 4px 30px 4px 10px;
+						width: 100%;
+						box-sizing: border-box;
+						> a {
+							border-radius: 6px;
+							color: #ffffff;
+							display: block;
+							padding: 10px 10px 10px 10px;
+							position: relative;
+							box-sizing: border-box;
+							transition: all 0.3s;
+							text-decoration: none;
+							overflow: hidden;
+							z-index: 0;
+							&:hover {
+								background-color: rgba(255, 255, 255, 0.3);
+							}
+							i {
+								width: 20px;
+								height: 20px;
+								font-size: 20px;
+								position: absolute;
+								top: 50%;
+								margin-top: -10px;
+							}
+							span {
+								display: inline-block;
+								max-width: 145px;
+							}
+						}
+						&.active-item > a {
+							// background-color: rgba(255, 255, 255, 0.5);
+							background-color: #f90;
+							color: #ffffff;
+						}
+					}
+				} 
+			}
+    }
+
+    .sidenav-content{    
+      position: relative;
+      z-index: 1;
+      display: block;
+      height: 100%;
+      overflow: auto;
+		}
+  }
+}

src/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

src/tsconfig.spec.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  }
+  }