Merge branch 'dev'

2018-11-14 11:48:01 +01:00 · 2018-11-14 11:48:01 +01:00 · d870d7506a
parent a86049cb3b 68c6cd6c88
commit d870d7506a
126 changed files with 9201 additions and 4587 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["last 1 years"]
+        }
+      }
+    ]
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -1,15 +1,11 @@
-# Folders
-.git
-node_modules
-bower_components
-dist/css/*
-!dist/css/.gitkeep
-dist/html/*
-!dist/html/.gitkeep
-
-
-# Files
-index.html
-config.pug
-issues.md
-oidc-client-preprod-config.json
+/node_modules
+/src/config.pug
+/www/index.html
+/www/styles/
+/www/scripts/
+/www/lib/
+/www/oidc-client-config.json
+!/www/lib/sib-core
+!/www/lib/sib-router
+!/www/lib/sib-chat
+!/www/lib/sib-oidc
--- a/.gitmodules
+++ b/.gitmodules
@ -1,12 +1,12 @@
-[submodule "dist/lib/webcomponentsjs"]
-	path = dist/lib/webcomponentsjs
-	url = https://github.com/webcomponents/webcomponentsjs
-[submodule "dist/lib/sib-core"]
-	path = dist/lib/sib-core
+[submodule "www/lib/sib-core"]
+	path = www/lib/sib-core
 	url = git@git.happy-dev.fr:startinblox/sib-core.git
-[submodule "dist/lib/sib-router"]
-	path = dist/lib/sib-router
+[submodule "www/lib/sib-router"]
+	path = www/lib/sib-router
 	url = git@git.happy-dev.fr:startinblox/sib-router.git
-[submodule "dist/lib/sib-chat"]
-	path = dist/lib/sib-chat
+[submodule "www/lib/sib-chat"]
+	path = www/lib/sib-chat
 	url = git@git.happy-dev.fr:startinblox/sib-chat.git
+[submodule "www/lib/sib-oidc"]
+	path = www/lib/sib-oidc
+	url = git@git.happy-dev.fr:startinblox/sib-oidc.git
--- a/88
+++ b/88
@ -1,49 +1,73 @@
+DIST_DIR := www
+
+SCRIPT_SRC := $(wildcard src/scripts/*.js)
+
+SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
+
 default: build

-config.pug:
-	@cp -n config-sample.pug config.pug
+clean:
+	git clean -fXd -e !src/config.pug

-node_modules:
-	npm install

-install: node_modules
-	git submodule update --init --recursive
+install: node_modules copy_lib copy_samples submodules

-update:
-	cd dist/lib/sib-chat; \
-	git pull origin master
-	cd dist/lib/sib-core; \
-	git pull origin master
-	cd dist/lib/sib-router; \
-	git pull origin master
+submodules:
+	git submodule init
+	git submodule update

-dist/css/hd-app.css: $(wildcard src/scss/*.scss)
-	npx node-sass src/scss/main.scss dist/css/hd-app.css --source-map true || touch dist/css/hd-app.css
-
-index.html: config.pug index.pug $(wildcard src/pug/*.pug)
-	npx pug --pretty index.pug || touch index.html
-
-build: index.html dist/css/hd-app.css
-
-prod:
-	npx pug index.pug
-	npx node-sass src/scss/main.scss dist/css/hd-app.css --output-style compressed
+build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST)

 watch:
 	@echo 'watching for change'
-	@echo 'press ctrl+C to stop'
+	@echo 'press Ctrl+C to stop'
 	@while true; do \
-		$(MAKE) build --silent; \
+		$(MAKE) --silent build; \
 		sleep 0.5; \
 	done

-serve: dist/css/hd-app.css
-	php -S 127.0.0.1:8080 router.php
+serve:
+	node server

-dev-mt: watch serve
+# npm
+node_modules:
+	npm install

-dev:
-	@$(MAKE) dev-mt -j --no-print-directory
+# vendor lib
+copy_lib:
+	@node copy_lib.js

+# samples
+copy_samples:
+	@cp -n src/config.sample.pug src/config.pug

-.PHONY: default install build build-prod watch serve
+# pug
+$(DIST_DIR)/index.html: src/index.pug $(wildcard src/*.pug src/*/*.pug)
+	@echo pug: $< ➜ $@
+	@node_modules/.bin/pug --pretty $< --out $(dir $@) || touch $@
+
+# sass
+$(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
+	@echo sass: $< ➜ $@
+	@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@ 
+
+# babel
+$(DIST_DIR)/%.js: src/%.js .babelrc
+	@echo babel: $< ➜ $@
+	@mkdir -p $(dir $@)
+	@node_modules/.bin/babel $< --out-file $@ --source-maps || touch $@
+
+buildprod: build
+	export SDN="https://test-paris.happy-dev.fr"; \
+	$(MAKE) $(DIST_DIR)/index.html -B
+
+deploy: pull install bluid
+
+pull:
+	git pull
+
+sync:
+	rsync -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ --exclude=www/oidc-client-config.json
+	rsync -v www/.htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
+
+.PHONY: default install submodules copy_lib copy_samples build watch serve clean sync buildprod pull deploy
--- a/README.md
+++ b/README.md
@ -1,6 +1,11 @@
 # HD app
+
 HD app is the magic tool that allows the Happy Dev network to thrive in a decentralized way.

+## Requirements
+
+You need to have both NodeJS and NPM installed and working
+
 ## Install

 clone then:
@ -9,16 +14,12 @@ clone then:

 ## Build

-Compile html & css:
-
 * `make build`

-or compile html & css on change:
+or

 * `make watch`

 ## Run server

-require PHP
-
 * `make serve`
--- a/config-sample.pug
+++ b/config-sample.pug
@ -1,4 +0,0 @@
- var dn   = process.env.DN  || 'http://127.0.0.1:8080'
- var sdn  = process.env.SDN || 'http://127.0.0.1:8000'
- var cdn  = process.env.CDN || 'http://127.0.0.1:8080'
- var v = Date.now()
--- a/copy_lib.js
+++ b/copy_lib.js
@ -0,0 +1,20 @@
+const { basename, join, resolve } = require('path');
+const { readFileSync, lstatSync } = require('fs');
+const { exec } = require('child_process');
+
+const distDir = 'www/lib';
+
+const filelist = readFileSync('lib_list.txt', 'utf-8').split(/\r?\n/);
+
+exec(`mkdir -p ${distDir}`, () => {
+  filelist.forEach(path => {
+    path = resolve(path);
+    const filename = basename(path);
+    const dest = lstatSync(path).isDirectory()
+      ? distDir
+      : join(distDir, filename);
+    const cmd = `rsync -ru ${path} ${dest}`;
+    console.log(cmd);
+    exec(cmd);
+  });
+});
--- a/dist/css/.gitkeep
+++ b/dist/css/.gitkeep
--- a/dist/lib/sib-chat
+++ b/dist/lib/sib-chat
@ -1 +0,0 @@
-Subproject commit 24192a89c1bc19f7faa06546ba1b798ad717e04b
--- a/dist/lib/sib-core
+++ b/dist/lib/sib-core
@ -1 +0,0 @@
-Subproject commit e493387102088c9d7c4cd03ce5d4edbc3a26cdcc
--- a/dist/lib/sib-oidc-client-config.json
+++ b/dist/lib/sib-oidc-client-config.json
@ -1,8 +0,0 @@
-{
-  "authority": "http://localhost:8000/openid/",
-  "client_id": "598550",
-  "redirect_uri": "http://oidc-client.local/user-manager-sample.html",
-  "response_type": "id_token token",
-  "scope": "openid profile email",
-  "loadUserInfo": true
-}
--- a/dist/lib/sib-oidc-client.js
+++ b/dist/lib/sib-oidc-client.js
@ -1,61 +0,0 @@
-if (typeof Oidc == "undefined") {
-  throw new Error("You are missing the `oidc-client-js` lib");
-}
-
-
-// Var declarations
-var sib  = {};
-sib.oidc = {};
-
-
-// Setup User Manager
-sib.oidc._setup = function(settings) {
-  if (typeof sib.oidc._manager == "undefined") {
-    sib.oidc._manager = new Oidc.UserManager(settings);
-  }
-}
-
-
-// Retrieve User from sessionStorage, or fetch it
-sib.oidc._getUser = function() {
-  sib.oidc._manager.getUser()
-    .then(function(user) {
-      if (user == null) {
-        sib.oidc._manager.signinRedirectCallback()
-          .then()
-          .catch(function(error) {
-            sib.oidc._manager.signinRedirect({state: "dummy data"})
-              .then()
-              .catch(function(error) {
-                console.log(error);
-              });
-          });
-      }
-      else {
-        sib.oidc.user = user;
-      }
-    })
-    .catch(function(error) {
-      console.log(error);
-    });
-}
-
-
-// Connect to OIDC provider
-sib.oidc._connect = function(settings) {
-  sib.oidc._setup(settings);
-  sib.oidc._getUser();
-
-
-  // When user loaded...
-  sib.oidc._manager.events.addUserLoaded(function(user) {
-    sib.oidc._getUser();
-  });
-}
-
-
-// Entry point 
-fetch("./oidc-client-config.json")
-  .then(response => response.json())
-  .then(settings => sib.oidc._connect(settings));
-
--- a/dist/lib/sib-router
+++ b/dist/lib/sib-router
@ -1 +0,0 @@
-Subproject commit 04ea601abf2fe9d65603867450cb39106f5d06e8
--- a/dist/lib/webcomponentsjs
+++ b/dist/lib/webcomponentsjs
@ -1 +0,0 @@
-Subproject commit bdd5203993f19ca08568638afd96f8f9c3959ea1
--- a/index.pug
+++ b/index.pug
@ -1,2 +0,0 @@
-include config.pug
-include src/pug/html.pug
--- a/lib_list.txt
+++ b/lib_list.txt
@ -0,0 +1,5 @@
+node_modules/normalize.css/normalize.css
+node_modules/@webcomponents/webcomponentsjs
+node_modules/@webcomponents/html-imports/src/html-imports.js
+node_modules/oidc-client/dist/oidc-client.min.js
+node_modules/oidc-client/dist/oidc-client.js
--- a/oidc-client-config.json
+++ b/oidc-client-config.json
@ -1,10 +0,0 @@
-{
-  "authority": "https://test-paris.happy-dev.fr/openid/",
-  "client_id": "125356",
-  "redirect_uri": "http://127.0.0.1:8080",
-  "response_type": "id_token token",
-  "scope": "openid profile email",
-  "automaticSilentRenew": true,
-  "silent_redirect_uri": "http://127.0.0.1:8080",
-  "loadUserInfo": true
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,18 +1,22 @@
 {
  "name": "hd-app",
-  "version": "0.1.0",
-  "engines": {
-    "node": ">= 0.10.0"
-  },
+  "version": "1.0.0",
+  "license": "ISC",
  "devDependencies": {
+    "@babel/core": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/cli": "^7.1.0",
    "node-sass": "^4.9.3",
-    "pug-cli": "^1.0.0-alpha6"
+    "pug-cli": "^1.0.0-alpha6",
+    "browser-sync": "^2.24.7",
+    "express": "^4.16.3"
  },
  "dependencies": {
-    "bootstrap": "^4.0.0",
-    "cropper": "^4.0.0",
-    "font-awesome": "^4.7.0",
-    "jquery": "^3.3.1",
-    "normalize.css": "^8.0.0"
+    "@webcomponents/html-imports": "^1.2.0",
+    "@webcomponents/webcomponentsjs": "^1.2.7",
+    "include-media": "^1.4.9",
+    "normalize.css": "^8.0.0",
+    "oidc-client": "^1.5.3-beta.1",
+    "simple-line-icons": "^2.4.1"
  }
 }
--- a/preprod.sh
+++ b/preprod.sh
@ -1,18 +0,0 @@
-#!/bin/bash
-export DN="https://staging-app.happy-dev.fr"
-export SDN="https://test-paris.happy-dev.fr"
-export CDN="https://staging-app.happy-dev.fr/dist/lib"
-
-make -B build
-
-# ssh staging-app@ssh-staging-app.happy-dev.fr "rm -R staging-app.happy-dev.fr"
-ssh staging-app@ssh-staging-app.happy-dev.fr "mkdir -p staging-app.happy-dev.fr/src/fonts; cd staging-app.happy-dev.fr; mkdir -p dist/css;"
-
-echo sync...
-rsync -u index.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
-rsync -u .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
-rsync -u oidc-client-preprod-config.json  staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/oidc-client-config.json
-rsync -r dist/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/dist/
-rsync -r src/fonts/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/fonts/
-rsync -r src/js/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/js/
-echo ...done
--- a/prod.sh
+++ b/prod.sh
@ -1,10 +0,0 @@
-#!/bin/bash
-export DN="https://app.happy-dev.fr"
-export SDN="https://hd-ldp.happy-dev.fr"
-make prod
-ssh hd-app@ssh-hd-app.alwaysdata.net "rm -R hd-app; mkdir hd-app; cd hd-app; mkdir -p src/fonts; mkdir -p dist/css;"
-scp index.html hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/
-scp .htaccess hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/
-scp -r dist/css/ hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/dist/
-scp -r src/fonts/ hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/src/
-scp -r src/js/ hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/src/
--- a/router.php
+++ b/router.php
@ -1,11 +0,0 @@
-<?php
-
-if (PHP_SAPI == 'cli-server') {
-  $url  = parse_url($_SERVER['REQUEST_URI']);
-  $path = $url['path'];
-  if(strpos($path, '.') !== false) return false;
-  $file = __DIR__ . $path;
-  if (is_file($file)) return false;
-}
-
-include "index.html";
--- a/server.js
+++ b/server.js
@ -0,0 +1,24 @@
+const port = 9000;
+const browsersyncPort = 3000;
+const distPath = 'www';
+// express server
+const { join } = require('path');
+const express = require('express');
+const app = express();
+app
+  .use(express.static(distPath))
+  // .use('/src', express.static(join(__dirname, 'src')))
+  .get(/^[^.]*$/, (req, rep) =>
+    rep.sendFile(join(__dirname, distPath, '/index.html')),
+  )
+  .listen(port);
+// browser sync
+const bs = require('browser-sync').create();
+bs.init({
+  files: [distPath + '/**/*'],
+  proxy: `http://localhost:${port}`,
+  open: false,
+  notify: false,
+  port: browsersyncPort,
+  tunnel: true,
+});
--- a/src/config.sample.pug
+++ b/src/config.sample.pug
@ -0,0 +1,3 @@
+- var sdn = process.env.SDN || 'http://127.0.0.1:8000'
+- var cdn = process.env.CDN || 'https://cdn.happy-dev.fr'
+- var xmpp = 'https://jabber.happy-dev.fr/http-bind/'
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@ -0,0 +1,39 @@
+// Scripts
+//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
+script(src="/lib/webcomponentsjs/webcomponents-loader.js")
+//- script(src="lib/html-imports.js")
+
+script(src="/lib/oidc-client.js")
+script(
+  src="/lib/sib-oidc/sib-oidc.js"
+  data-authority='https://test-paris.happy-dev.fr/openid/',
+  data-client_id='833925',
+  data-response_type='id_token token',
+  data-scope='openid profile email',
+  data-automaticSilentRenew='true',
+  data-loadUserInfo='true'
+)
+
+script(src="/scripts/index.js")
+script(src="/scripts/hd-widgets.js")
+
+// Stylesheets
+link(rel='stylesheet', href='/lib/normalize.css')
+link(rel='stylesheet', href='/styles/index.css')
+link(
+  rel='stylesheet'
+  href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext'
+)
+link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet")
+
+// Web components
+
+//- local
+link(rel='import', href='/lib/sib-core/sib-display.html')
+link(rel='import', href='/lib/sib-router/sib-router.html')
+//- link(rel='import', href='/lib/sib-chat/sib-chat.html')
+
+//- cdn
+  link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")
+  link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html")
+link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html")
--- a/src/error.log
+++ b/src/error.log
@ -0,0 +1,368 @@
+ImproperlyConfigured at /members/
+Could not resolve URL for hyperlinked relationship using view name "member-detail". You may have failed to include the related model in your API, or incorrectly configured the `lookup_field` attribute on this field.
+
+Request Method: GET
+Request URL: http://127.0.0.1:8000/members/
+Django Version: 1.11
+Python Executable: /home/ubuntu/dev/test/ldpserverhdparis/env/bin/python
+Python Version: 3.6.6
+Python Path: ['/home/ubuntu/dev/test/ldpserverhdparis', '/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python36.zip', '/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6', '/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/lib-dynload', '/usr/lib/python3.6', '/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages']
+Server time: Tue, 30 Oct 2018 16:22:14 +0000
+Installed Applications:
+['ldpserverhdparis',
+ 'djangoldp',
+ 'django.contrib.admin',
+ 'django.contrib.auth',
+ 'django.contrib.contenttypes',
+ 'django.contrib.sessions',
+ 'django.contrib.messages',
+ 'django.contrib.staticfiles',
+ 'oidc_provider',
+ 'guardian']
+Installed Middleware:
+['django.middleware.security.SecurityMiddleware',
+ 'django.contrib.sessions.middleware.SessionMiddleware',
+ 'django.middleware.common.CommonMiddleware',
+ 'django.middleware.csrf.CsrfViewMiddleware',
+ 'django.contrib.auth.middleware.AuthenticationMiddleware',
+ 'django.contrib.messages.middleware.MessageMiddleware',
+ 'django.middleware.clickjacking.XFrameOptionsMiddleware']
+
+
+Traceback:  
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/relations.py" in to_representation
+  400.             url = self.get_url(value, self.view_name, request, format)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/relations.py" in get_url
+  338.         return self.reverse(view_name, kwargs=kwargs, request=request, format=format)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/reverse.py" in reverse
+  50.         url = _reverse(viewname, args, kwargs, request, format, **extra)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/reverse.py" in _reverse
+  63.     url = django_reverse(viewname, args=args, kwargs=kwargs, **extra)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/django/urls/base.py" in reverse
+  91.     return force_text(iri_to_uri(resolver._reverse_with_prefix(view, prefix, *args, **kwargs)))
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/django/urls/resolvers.py" in _reverse_with_prefix
+  497.         raise NoReverseMatch(msg)
+  
+    
+      During handling of the above exception (Reverse for 'member-detail' with keyword arguments '{'pseudo': 'alex.bourlier'}' not found. 1 pattern(s) tried: ['members/(?P<pseudo>[\\w-]+)/$']), another exception occurred:
+    
+  
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/django/core/handlers/exception.py" in inner
+  41.             response = get_response(request)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/django/core/handlers/base.py" in _get_response
+  187.                 response = self.process_exception_by_middleware(e, request)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/django/core/handlers/base.py" in _get_response
+  185.                 response = wrapped_callback(request, *callback_args, **callback_kwargs)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/django/views/decorators/csrf.py" in wrapped_view
+  58.         return view_func(*args, **kwargs)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/viewsets.py" in view
+  116.             return self.dispatch(request, *args, **kwargs)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/djangoldp/views.py" in dispatch
+  126.         response = super(LDPViewSet, self).dispatch(request, *args, **kwargs)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/views.py" in dispatch
+  495.             response = self.handle_exception(exc)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/views.py" in handle_exception
+  455.             self.raise_uncaught_exception(exc)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/views.py" in dispatch
+  492.             response = handler(request, *args, **kwargs)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/mixins.py" in list
+  48.         return Response(serializer.data)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/djangoldp/serializers.py" in data
+  16.         return ReturnDict(super(ListSerializer, self).data, serializer=self)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/serializers.py" in data
+  262.                 self._data = self.to_representation(self.instance)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/djangoldp/serializers.py" in to_representation
+  13.         return {'@id': '', 'ldp:contains':super(ContainerSerializer, self).to_representation(data)}
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/serializers.py" in to_representation
+  683.             self.child.to_representation(item) for item in iterable
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/serializers.py" in <listcomp>
+  683.             self.child.to_representation(item) for item in iterable
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/djangoldp/serializers.py" in to_representation
+  77.         data = super().to_representation(obj)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/serializers.py" in to_representation
+  527.                 ret[field.field_name] = field.to_representation(attribute)
+
+File "/home/ubuntu/dev/test/ldpserverhdparis/env/lib/python3.6/site-packages/rest_framework/relations.py" in to_representation
+  415.             raise ImproperlyConfigured(msg % self.view_name)
+
+Exception Type: ImproperlyConfigured at /members/
+Exception Value: Could not resolve URL for hyperlinked relationship using view name "member-detail". You may have failed to include the related model in your API, or incorrectly configured the `lookup_field` attribute on this field.
+Request information:
+USER: clement
+
+GET: No GET data
+
+POST: No POST data
+
+FILES: No FILES data
+
+COOKIES:
+csrftoken = 'rJoY6gBfXiXUzx2vt44C3jpidX61XuS8d33rk6bsGTOwM4qdsTo3YOU21aXLPMbG'
+sessionid = 'a7j0mj6zjnv7i2mko5bs17mynvy12rcc'
+io = 'F3hWNi2N9qwA7YiDAABT'
+
+META:
+CHROME_DESKTOP = 'code-url-handler.desktop'
+CONTENT_LENGTH = ''
+CONTENT_TYPE = 'text/plain'
+CSRF_COOKIE = 'rJoY6gBfXiXUzx2vt44C3jpidX61XuS8d33rk6bsGTOwM4qdsTo3YOU21aXLPMbG'
+DBUS_SESSION_BUS_ADDRESS = 'unix:path=/run/user/1000/bus'
+DEFAULTS_PATH = '/usr/share/gconf/plasma.default.path'
+DESKTOP_SESSION = 'plasma'
+DESKTOP_STARTUP_ID = 'ubuntu-N7x0WU;1540892856;943495;1492_TIME14942764'
+DISPLAY = ':0'
+DJANGO_SETTINGS_MODULE = 'ldpserverhdparis.settings'
+GATEWAY_INTERFACE = 'CGI/1.1'
+GPG_AGENT_INFO = '/run/user/1000/gnupg/S.gpg-agent:0:1'
+GS_LIB = '/home/ubuntu/.fonts'
+GTK_MODULES = 'gail:atk-bridge'
+HOME = '/home/ubuntu'
+HTTP_ACCEPT = 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
+HTTP_ACCEPT_ENCODING = 'gzip, deflate'
+HTTP_ACCEPT_LANGUAGE = 'en-US,en;q=0.8,fr;q=0.5,fr-FR;q=0.3'
+HTTP_CONNECTION = 'keep-alive'
+HTTP_COOKIE = 'csrftoken=rJoY6gBfXiXUzx2vt44C3jpidX61XuS8d33rk6bsGTOwM4qdsTo3YOU21aXLPMbG; sessionid=a7j0mj6zjnv7i2mko5bs17mynvy12rcc; io=F3hWNi2N9qwA7YiDAABT'
+HTTP_DNT = '1'
+HTTP_HOST = '127.0.0.1:8000'
+HTTP_UPGRADE_INSECURE_REQUESTS = '1'
+HTTP_USER_AGENT = 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:63.0) Gecko/20100101 Firefox/63.0'
+KDE_FULL_SESSION = 'true'
+KDE_SESSION_UID = '1000'
+KDE_SESSION_VERSION = '5'
+LANG = 'en_US.UTF-8'
+LANGUAGE = 'fr'
+LOGNAME = 'ubuntu'
+MAKEFLAGS = ''
+MAKELEVEL = '1'
+MAKE_TERMERR = '/dev/pts/4'
+MAKE_TERMOUT = '/dev/pts/4'
+MANDATORY_PATH = '/usr/share/gconf/plasma.mandatory.path'
+MFLAGS = ''
+PATH = '/home/ubuntu/dev/test/ldpserverhdparis/env/bin:.deno/bin/:/home/ubuntu/.deno/bin/:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games'
+PATH_INFO = '/members/'
+PWD = '/home/ubuntu/dev/test/ldpserverhdparis'
+QT_ACCESSIBILITY = '1'
+QT_AUTO_SCREEN_SCALE_FACTOR = '0'
+QUERY_STRING = ''
+REMOTE_ADDR = '127.0.0.1'
+REMOTE_HOST = ''
+REQUEST_METHOD = 'GET'
+RUN_MAIN = 'true'
+SCRIPT_NAME = ''
+SERVER_NAME = 'localhost'
+SERVER_PORT = '8000'
+SERVER_PROTOCOL = 'HTTP/1.1'
+SERVER_SOFTWARE = 'WSGIServer/0.2'
+SESSION_MANAGER = 'local/ubuntu-N7x0WU:@/tmp/.ICE-unix/1459,unix/ubuntu-N7x0WU:/tmp/.ICE-unix/1459'
+SHELL = '/usr/bin/fish'
+SHLVL = '3'
+SSH_AGENT_PID = '1383'
+SSH_AUTH_SOCK = '/tmp/ssh-RgoHoRBUgMlY/agent.1318'
+TERM = 'xterm-256color'
+TERM_PROGRAM = 'vscode'
+TERM_PROGRAM_VERSION = '1.28.2'
+TZ = 'UTC'
+USER = 'ubuntu'
+VIRTUAL_ENV = '/home/ubuntu/dev/test/ldpserverhdparis/env'
+XAUTHORITY = '/home/ubuntu/.Xauthority'
+XCURSOR_SIZE = '0'
+XCURSOR_THEME = 'ComixCursors-Opaque-Black'
+XDG_CONFIG_DIRS = '/etc/xdg/xdg-plasma:/etc/xdg:/usr/share/kubuntu-default-settings/kf5-settings'
+XDG_CURRENT_DESKTOP = 'KDE'
+XDG_DATA_DIRS = '/usr/share/plasma:/home/ubuntu/.local/share/flatpak/exports/share:/var/lib/flatpak/exports/share:/usr/local/share:/usr/share'
+XDG_RUNTIME_DIR = '/run/user/1000'
+XDG_SEAT = 'seat0'
+XDG_SEAT_PATH = '/org/freedesktop/DisplayManager/Seat0'
+XDG_SESSION_CLASS = 'user'
+XDG_SESSION_DESKTOP = 'KDE'
+XDG_SESSION_ID = '1'
+XDG_SESSION_PATH = '/org/freedesktop/DisplayManager/Session0'
+XDG_SESSION_TYPE = 'x11'
+XDG_VTNR = '1'
+_OLD_FISH_PROMPT_OVERRIDE = '/home/ubuntu/dev/test/ldpserverhdparis/env'
+_OLD_VIRTUAL_PATH = '.deno/bin/\x1e/home/ubuntu/.deno/bin/\x1e/usr/local/sbin\x1e/usr/local/bin\x1e/usr/sbin\x1e/usr/bin\x1e/sbin\x1e/bin\x1e/usr/games\x1e/usr/local/games'
+wsgi.errors = <_io.TextIOWrapper name='<stderr>' mode='w' encoding='UTF-8'>
+wsgi.file_wrapper = ''
+wsgi.input = <_io.BufferedReader name=5>
+wsgi.multiprocess = False
+wsgi.multithread = True
+wsgi.run_once = False
+wsgi.url_scheme = 'http'
+wsgi.version = 
+
+Settings:
+Using settings module ldpserverhdparis.settings
+ABSOLUTE_URL_OVERRIDES = {}
+ADMINS = []
+ALLOWED_HOSTS = ['127.0.0.1', 'test-paris.happy-dev.fr']
+APPEND_SLASH = True
+AUTHENTICATION_BACKENDS = ['django.contrib.auth.backends.ModelBackend', 'guardian.backends.ObjectPermissionBackend']
+AUTH_PASSWORD_VALIDATORS = '********************'
+AUTH_USER_MODEL = 'auth.User'
+BASE_DIR = '/home/ubuntu/dev/test/ldpserverhdparis'
+CACHES = {'default': {'BACKEND': 'django.core.cache.backends.locmem.LocMemCache'}}
+CACHE_MIDDLEWARE_ALIAS = 'default'
+CACHE_MIDDLEWARE_KEY_PREFIX = '********************'
+CACHE_MIDDLEWARE_SECONDS = 600
+CSRF_COOKIE_AGE = 31449600
+CSRF_COOKIE_DOMAIN = None
+CSRF_COOKIE_HTTPONLY = False
+CSRF_COOKIE_NAME = 'csrftoken'
+CSRF_COOKIE_PATH = '/'
+CSRF_COOKIE_SECURE = False
+CSRF_FAILURE_VIEW = 'django.views.csrf.csrf_failure'
+CSRF_HEADER_NAME = 'HTTP_X_CSRFTOKEN'
+CSRF_TRUSTED_ORIGINS = []
+CSRF_USE_SESSIONS = False
+DATABASES = {'default': {'ENGINE': 'django.db.backends.sqlite3', 'NAME': '/home/ubuntu/dev/test/ldpserverhdparis/db.sqlite3', 'ATOMIC_REQUESTS': False, 'AUTOCOMMIT': True, 'CONN_MAX_AGE': 0, 'OPTIONS': {}, 'TIME_ZONE': None, 'USER': '', 'PASSWORD': '********************', 'HOST': '', 'PORT': '', 'TEST': {'CHARSET': None, 'COLLATION': None, 'NAME': None, 'MIRROR': None}}}
+DATABASE_ROUTERS = []
+DATA_UPLOAD_MAX_MEMORY_SIZE = 2621440
+DATA_UPLOAD_MAX_NUMBER_FIELDS = 1000
+DATETIME_FORMAT = 'N j, Y, P'
+DATETIME_INPUT_FORMATS = ['%Y-%m-%d %H:%M:%S', '%Y-%m-%d %H:%M:%S.%f', '%Y-%m-%d %H:%M', '%Y-%m-%d', '%m/%d/%Y %H:%M:%S', '%m/%d/%Y %H:%M:%S.%f', '%m/%d/%Y %H:%M', '%m/%d/%Y', '%m/%d/%y %H:%M:%S', '%m/%d/%y %H:%M:%S.%f', '%m/%d/%y %H:%M', '%m/%d/%y']
+DATE_FORMAT = 'N j, Y'
+DATE_INPUT_FORMATS = ['%Y-%m-%d', '%m/%d/%Y', '%m/%d/%y', '%b %d %Y', '%b %d, %Y', '%d %b %Y', '%d %b, %Y', '%B %d %Y', '%B %d, %Y', '%d %B %Y', '%d %B, %Y']
+DEBUG = True
+DEBUG_PROPAGATE_EXCEPTIONS = False
+DECIMAL_SEPARATOR = '.'
+DEFAULT_CHARSET = 'utf-8'
+DEFAULT_CONTENT_TYPE = 'text/html'
+DEFAULT_EXCEPTION_REPORTER_FILTER = 'django.views.debug.SafeExceptionReporterFilter'
+DEFAULT_FILE_STORAGE = 'django.core.files.storage.FileSystemStorage'
+DEFAULT_FROM_EMAIL = 'webmaster@localhost'
+DEFAULT_INDEX_TABLESPACE = ''
+DEFAULT_TABLESPACE = ''
+DISALLOWED_USER_AGENTS = []
+EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
+EMAIL_HOST = 'localhost'
+EMAIL_HOST_PASSWORD = '********************'
+EMAIL_HOST_USER = ''
+EMAIL_PORT = 25
+EMAIL_SSL_CERTFILE = None
+EMAIL_SSL_KEYFILE = '********************'
+EMAIL_SUBJECT_PREFIX = '[Django] '
+EMAIL_TIMEOUT = None
+EMAIL_USE_LOCALTIME = False
+EMAIL_USE_SSL = False
+EMAIL_USE_TLS = False
+FILE_CHARSET = 'utf-8'
+FILE_UPLOAD_DIRECTORY_PERMISSIONS = None
+FILE_UPLOAD_HANDLERS = ['django.core.files.uploadhandler.MemoryFileUploadHandler', 'django.core.files.uploadhandler.TemporaryFileUploadHandler']
+FILE_UPLOAD_MAX_MEMORY_SIZE = 2621440
+FILE_UPLOAD_PERMISSIONS = None
+FILE_UPLOAD_TEMP_DIR = None
+FIRST_DAY_OF_WEEK = 0
+FIXTURE_DIRS = []
+FORCE_SCRIPT_NAME = None
+FORMAT_MODULE_PATH = None
+FORM_RENDERER = 'django.forms.renderers.DjangoTemplates'
+IGNORABLE_404_URLS = []
+INSTALLED_APPS = ['ldpserverhdparis', 'djangoldp', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'oidc_provider', 'guardian']
+INTERNAL_IPS = []
+LANGUAGES = [('af', 'Afrikaans'), ('ar', 'Arabic'), ('ast', 'Asturian'), ('az', 'Azerbaijani'), ('bg', 'Bulgarian'), ('be', 'Belarusian'), ('bn', 'Bengali'), ('br', 'Breton'), ('bs', 'Bosnian'), ('ca', 'Catalan'), ('cs', 'Czech'), ('cy', 'Welsh'), ('da', 'Danish'), ('de', 'German'), ('dsb', 'Lower Sorbian'), ('el', 'Greek'), ('en', 'English'), ('en-au', 'Australian English'), ('en-gb', 'British English'), ('eo', 'Esperanto'), ('es', 'Spanish'), ('es-ar', 'Argentinian Spanish'), ('es-co', 'Colombian Spanish'), ('es-mx', 'Mexican Spanish'), ('es-ni', 'Nicaraguan Spanish'), ('es-ve', 'Venezuelan Spanish'), ('et', 'Estonian'), ('eu', 'Basque'), ('fa', 'Persian'), ('fi', 'Finnish'), ('fr', 'French'), ('fy', 'Frisian'), ('ga', 'Irish'), ('gd', 'Scottish Gaelic'), ('gl', 'Galician'), ('he', 'Hebrew'), ('hi', 'Hindi'), ('hr', 'Croatian'), ('hsb', 'Upper Sorbian'), ('hu', 'Hungarian'), ('ia', 'Interlingua'), ('id', 'Indonesian'), ('io', 'Ido'), ('is', 'Icelandic'), ('it', 'Italian'), ('ja', 'Japanese'), ('ka', 'Georgian'), ('kk', 'Kazakh'), ('km', 'Khmer'), ('kn', 'Kannada'), ('ko', 'Korean'), ('lb', 'Luxembourgish'), ('lt', 'Lithuanian'), ('lv', 'Latvian'), ('mk', 'Macedonian'), ('ml', 'Malayalam'), ('mn', 'Mongolian'), ('mr', 'Marathi'), ('my', 'Burmese'), ('nb', 'Norwegian BokmÃ¥l'), ('ne', 'Nepali'), ('nl', 'Dutch'), ('nn', 'Norwegian Nynorsk'), ('os', 'Ossetic'), ('pa', 'Punjabi'), ('pl', 'Polish'), ('pt', 'Portuguese'), ('pt-br', 'Brazilian Portuguese'), ('ro', 'Romanian'), ('ru', 'Russian'), ('sk', 'Slovak'), ('sl', 'Slovenian'), ('sq', 'Albanian'), ('sr', 'Serbian'), ('sr-latn', 'Serbian Latin'), ('sv', 'Swedish'), ('sw', 'Swahili'), ('ta', 'Tamil'), ('te', 'Telugu'), ('th', 'Thai'), ('tr', 'Turkish'), ('tt', 'Tatar'), ('udm', 'Udmurt'), ('uk', 'Ukrainian'), ('ur', 'Urdu'), ('vi', 'Vietnamese'), ('zh-hans', 'Simplified Chinese'), ('zh-hant', 'Traditional Chinese')]
+LANGUAGES_BIDI = ['he', 'ar', 'fa', 'ur']
+LANGUAGE_CODE = 'en-us'
+LANGUAGE_COOKIE_AGE = None
+LANGUAGE_COOKIE_DOMAIN = None
+LANGUAGE_COOKIE_NAME = 'django_language'
+LANGUAGE_COOKIE_PATH = '/'
+LDP_RDF_CONTEXT = 'https://cdn.happy-dev.fr/owl/hdcontext.jsonld'
+LOCALE_PATHS = []
+LOGGING = {}
+LOGGING_CONFIG = 'logging.config.dictConfig'
+LOGIN_REDIRECT_URL = '/accounts/profile/'
+LOGIN_URL = '/accounts/login/'
+LOGOUT_REDIRECT_URL = None
+MANAGERS = []
+MEDIA_ROOT = ''
+MEDIA_URL = ''
+MESSAGE_STORAGE = 'django.contrib.messages.storage.fallback.FallbackStorage'
+MIDDLEWARE = ['django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware']
+MIDDLEWARE_CLASSES = ['django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware']
+MIGRATION_MODULES = {}
+MONTH_DAY_FORMAT = 'F j'
+NUMBER_GROUPING = 0
+OIDC_USERINFO = 'ldpserverhdparis.oidc_provider_settings.userinfo'
+PASSWORD_HASHERS = '********************'
+PASSWORD_RESET_TIMEOUT_DAYS = '********************'
+PREPEND_WWW = False
+ROOT_URLCONF = 'ldpserverhdparis.urls'
+SECRET_KEY = '********************'
+SECURE_BROWSER_XSS_FILTER = False
+SECURE_CONTENT_TYPE_NOSNIFF = False
+SECURE_HSTS_INCLUDE_SUBDOMAINS = False
+SECURE_HSTS_PRELOAD = False
+SECURE_HSTS_SECONDS = 0
+SECURE_PROXY_SSL_HEADER = None
+SECURE_REDIRECT_EXEMPT = []
+SECURE_SSL_HOST = None
+SECURE_SSL_REDIRECT = False
+SERVER_EMAIL = 'root@localhost'
+SESSION_CACHE_ALIAS = 'default'
+SESSION_COOKIE_AGE = 1209600
+SESSION_COOKIE_DOMAIN = None
+SESSION_COOKIE_HTTPONLY = True
+SESSION_COOKIE_NAME = 'sessionid'
+SESSION_COOKIE_PATH = '/'
+SESSION_COOKIE_SECURE = False
+SESSION_ENGINE = 'django.contrib.sessions.backends.db'
+SESSION_EXPIRE_AT_BROWSER_CLOSE = False
+SESSION_FILE_PATH = None
+SESSION_SAVE_EVERY_REQUEST = False
+SESSION_SERIALIZER = 'django.contrib.sessions.serializers.JSONSerializer'
+SETTINGS_MODULE = 'ldpserverhdparis.settings'
+SHORT_DATETIME_FORMAT = 'm/d/Y P'
+SHORT_DATE_FORMAT = 'm/d/Y'
+SIGNING_BACKEND = 'django.core.signing.TimestampSigner'
+SILENCED_SYSTEM_CHECKS = []
+STATICFILES_DIRS = []
+STATICFILES_FINDERS = ['django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder']
+STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'
+STATIC_ROOT = '/home/ubuntu/dev/test/static'
+STATIC_URL = '/static/'
+TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], 'APP_DIRS': True, 'OPTIONS': {'context_processors': ['django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages']}}]
+TEST_NON_SERIALIZED_APPS = []
+TEST_RUNNER = 'django.test.runner.DiscoverRunner'
+THOUSAND_SEPARATOR = ','
+TIME_FORMAT = 'P'
+TIME_INPUT_FORMATS = ['%H:%M:%S', '%H:%M:%S.%f', '%H:%M']
+TIME_ZONE = 'UTC'
+USE_ETAGS = False
+USE_I18N = True
+USE_L10N = True
+USE_THOUSAND_SEPARATOR = False
+USE_TZ = True
+USE_X_FORWARDED_HOST = False
+USE_X_FORWARDED_PORT = False
+WSGI_APPLICATION = 'ldpserverhdparis.wsgi.application'
+X_FRAME_OPTIONS = 'SAMEORIGIN'
+YEAR_MONTH_FORMAT = 'F Y'
+
+
+You're seeing this error because you have DEBUG = True in your
+Django settings file. Change that to False, and Django will
+display a standard page generated by the handler for this status code.
+
--- a/src/fonts/bebas/bebas.eot
+++ b/src/fonts/bebas/bebas.eot
--- a/src/fonts/bebas/bebas.svg
+++ b/src/fonts/bebas/bebas.svg
--- a/src/fonts/bebas/bebas.ttf
+++ b/src/fonts/bebas/bebas.ttf
--- a/src/fonts/bebas/bebas.woff
+++ b/src/fonts/bebas/bebas.woff
--- a/src/header.pug
+++ b/src/header.pug
@ -0,0 +1,20 @@
+#button-toggle
+#logo
+  img(src="/images/logo.png" width=111 height=32)
+
+#search-bar
+  div
+    input#search-input(type='search')
+    i#search-icon.icon-magnifier(aria-hidden='true')
+    i#close-search-icon.icon-close(aria-hidden='true')
+
+details
+  summary#notifications-button
+  #notifications
+    include page-notifications.pug
+
+#profile
+  img(src="/images/user.jpg")
+  span
+    | Profile 
+    span.icon-arrow-down
--- a/src/index.pug
+++ b/src/index.pug
@ -0,0 +1,38 @@
+include config.pug
+<!DOCTYPE html>
+html(lang="en")
+  head
+    meta(charset="UTF-8")
+    title HD App
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(http-equiv="X-UA-Compatible", content="ie=edge")
+    link(rel="icon" type="image/png" href="/images/logo.png")
+    include dependencies.pug
+  body
+    header#header
+      include header.pug
+    #subContainer
+      include menu.pug
+      main#mainContainer
+        //- #dashboard(hidden)
+          include page-dashboard.pug
+        #members(hidden)
+          include page-members.pug
+        #member(hidden)
+          include page-member.pug
+        #job-offers(hidden)
+          include page-job-offers.pug
+        #job-offer-create(hidden)
+          include page-job-offer-create.pug
+        //-#projects(hidden)
+          include page-projects.pug
+        #project(hidden)
+          include page-project.pug
+        //- #client-creation(hidden)
+          include page-client-creation.pug
+        //-#groups(hidden)
+          include page-groups.pug
+        #group(hidden)
+          include page-group.pug
+        //- #search(hidden)
+          include page-search.pug
--- a/src/menu.pug
+++ b/src/menu.pug
@ -0,0 +1,27 @@
+div
+  nav#navbar
+    sib-router#navbar-router(default-route='members')
+      div(hidden)
+      div#menu-items
+        sib-route(name='members')
+          div.icon-people Members
+        sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
+        sib-route(name='job-offers')
+          div.icon-briefcase Job offers
+        sib-route(hidden, name='job-offer-create')
+        div
+          div.icon-folder-alt Projects
+          sib-display(
+            data-src=`${sdn}/projects/`,
+            data-fields='name',
+            next='project'
+          )
+          sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`)
+        div
+          div.icon-bubbles Groups
+          sib-display(
+            data-src=`${sdn}/channels/`,
+            data-fields='name',
+            next='group'
+          )
+          sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
--- a/src/page-group-chat.pug
+++ b/src/page-group-chat.pug
@ -0,0 +1,9 @@
+.chat-view
+  sib-chat(
+    data-authentication='login',
+    data-auto-login='true',
+    data-bosh-service-url=xmpp,
+    data-debug='false',
+    data-locales-url='en',
+    bind-resources
+  )
--- a/src/page-group-create.pug
+++ b/src/page-group-create.pug
@ -0,0 +1,10 @@
+#group-create
+  h1 New group
+  .form-view
+    sib-form.block(
+      data-src=`${sdn}/channels/`, 
+      data-fields="name, description, owner, members, jabberID, jabberRoom"
+      range-owner=`${sdn}/members/`, 
+      widget-members='sib-form-multiple-dropdown', 
+      range-members=`${sdn}/members/`
+    )
--- a/src/page-group-edit.pug
+++ b/src/page-group-edit.pug
@ -0,0 +1,10 @@
+#group-edit
+  h1 Edit group
+  .form-view
+    sib-form.block(
+      range-owner=`${sdn}/members/`,
+      data-fields="name, description, owner, members, jabberID, jabberRoom"
+      range-members=`${sdn}/members/`,
+      widget-members='sib-form-multiple-dropdown',
+      bind-resources
+    )
--- a/src/page-group-profile.pug
+++ b/src/page-group-profile.pug
@ -0,0 +1,49 @@
+.frame
+  sib-display(
+    data-fields='name, label-description, description',
+    value-label-description="Description:"
+    bind-resources
+  )
+  h2.section.skills In group
+  sib-display(
+    id-suffix='members',
+    data-fields='user-thumb',
+    set-user-thumb='member.avatar, first_name, last_name',
+    widget-member.avatar='sib-display-img',
+    bind-resources
+  )
+
+//-
+  sib-display#offers-list.limiter(
+    data-src=`${sdn}/job-offers/`,
+    data-fields='date, user-thumb, title, description, skills',
+    widget-skills='sib-display-lookuplist',
+    set-user-thumb='author.member.avatar, author.first_name, author.last_name'
+    widget-author.member.avatar='sib-display-img',
+    set-date='closingDate, creationDate',
+    widget-closingDate='hdapp-closing-date',
+    set-searchset='title, description, skills',
+    search-fields='searchset'
+  )
+
+  sib-display(
+    data-fields='title, label-description, description, client',
+    set-title='number, client.name, name',
+    set-client='label-client, client.name, client.logo, client.address',
+    value-label-description="Description:"
+    value-label-client="Client:"
+    widget-client.logo='sib-display-img',
+    widget-client='hdapp-client',
+    widget-team='sib-display-lookuplist',
+    bind-resources,
+  )
+
+  h2 Team:
+  sib-display.members-list-condensed(
+    id-suffix='team',
+    data-fields='member.avatar, member.user',
+    widget-member.avatar='sib-display-img',
+    widget-member.user='hdapp-userinfo',
+    next='member',
+    bind-resources,
+  )
--- a/src/page-group.pug
+++ b/src/page-group.pug
@ -0,0 +1,19 @@
+sib-router#group-router(default-route='group-chat')
+  sib-route(name='group-chat')
+    div Chat
+  sib-route(name='group-profile')
+    div Info
+  sib-ac-checker(permission='change' bind-resources)
+    sib-route(name='group-edit')
+      div Edit
+  sib-route(name='group-create')
+    div Add new
+#network-views-container
+  #group-chat
+    include page-group-chat.pug
+  #group-profile
+    include page-group-profile.pug
+  #group-edit
+    include page-group-edit.pug
+  #group-create
+    include page-group-create.pug
--- a/src/pug/channels.pug
+++ b/src/pug/channels.pug
@ -1,7 +1,7 @@
-#channels(style='display: none')
-  sib-display#channels-list(
+#groups
+  sib-display#groups-list(
    data-src=`${sdn}/channels/`, 
    data-fields='name, description', 
    search-fields='name, description', 
-    next='channel'
+    next='group'
  )
--- a/src/page-job-offer-create.pug
+++ b/src/page-job-offer-create.pug
@ -0,0 +1,9 @@
+#job-create
+  h1 New job offer
+  .form-view
+    sib-form.block(
+      data-src=`${sdn}/job-offers/`, 
+      data-fields="author, description, skills",
+      widget-author='sib-form-dropdown',
+      widget-skills='sib-form-multiple-dropdown',
+    )
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@ -0,0 +1,15 @@
+div
+  sib-trigger(next="job-offer-create" class="new-job-offer") Post a new offer
+  h1 New offers
+    span Here you can find and post offers
+  sib-display#offers-list.limiter(
+    data-src=`${sdn}/job-offers/`,
+    data-fields='date, user-thumb, title, description, skills',
+    widget-skills='sib-display-lookuplist',
+    set-user-thumb='author.member.avatar, author.first_name, author.last_name'
+    widget-author.member.avatar='sib-display-img',
+    set-date='closingDate, creationDate',
+    widget-closingDate='hdapp-closing-date',
+    set-searchset='title, description, skills',
+    search-fields='searchset'
+  )
--- a/src/page-member-chat.pug
+++ b/src/page-member-chat.pug
@ -0,0 +1,9 @@
+.chat-view
+  sib-chat(
+    data-authentication='login',
+    data-auto-login='true',
+    data-bosh-service-url=xmpp,
+    data-debug='false',
+    data-locales-url='en',
+    bind-resources
+  )
--- a/src/page-member-edit.pug
+++ b/src/page-member-edit.pug
@ -1,4 +1,30 @@
-// script.
+.form-view
+  label.d-none(for='avatar-input')
+    img#avatar-preview(src='', style='width: 100%;')
+  input#avatar-input.d-none(
+    type='file',
+    accept='image/*',
+    name='avatar',
+    value='',
+  )
+  sib-form.block(
+    data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
+    widget-user='hdapp-usereditinfo',
+    range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',
+    range-skills=`${sdn}/skills/`,
+    bind-resources
+  )
+
+  #crop-modal
+    .crop-wrapper
+      img#crop-preview(src='')
+    .control-bar
+      button#cancel-img-cropping.btn.btn-link Annuler
+      i#rotate-img.fa.fa-undo(aria-hidden='true')
+      button#crop-img.btn.btn-link Valider
+
+
+//-script.
  class LDPFormImgUpload extends SIBWidget {
    get template() {
      return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
@ -15,27 +41,8 @@
  customElements.define("ldp-form-img-upload", LDPFormImgUpload);
  widget-avatar="ldp-form-img-upload"

-#member-edit(style='display: none')
-  label.d-none(for='avatar-input')
-    img#avatar-preview(src='', style='width: 100%;')
-  input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
-  sib-form.edit-form(
-    data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
-    widget-user='hdapp-usereditinfo',
-    range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',
-    range-skills=`${sdn}/skills/`,
-    bind-resources=''
-  )
-#crop-modal
-  .crop-wrapper
-    img#crop-preview(src='')
-  .control-bar
-    button#cancel-img-cropping.btn.btn-link Annuler
-    i#rotate-img.fa.fa-undo(aria-hidden='true')
-    button#crop-img.btn.btn-link Valider

-
-script.
+//-script.
  // Constant declaration
  const avatarPreview = document.querySelector("#avatar-preview");
  const avatarInput   = document.querySelector("#avatar-input");
--- a/src/page-member-profile.pug
+++ b/src/page-member-profile.pug
@ -0,0 +1,18 @@
+sib-display#member-info(
+  data-fields='available, header, name, pseudonym, infos, skills',
+  set-header='avatar',
+  set-infos='cell, roles, user.email, number, foaf:homepage',
+  set-name='user.first_name, user.last_name',
+  set-pseudonym='before-pseudo, pseudo',
+  value-before-pseudo='@',
+  widget-available='hdapp-available',
+  widget-avatar='sib-display-img',
+  widget-user='hdapp-userinfo',
+  widget-cell='hdapp-usercell',
+  widget-number='sib-display-tel',
+  widget-foaf:homepage='hdapp-hyperlink',
+  widget-user.email='sib-display-mailto',
+  widget-roles='sib-display-lookuplist',
+  widget-skills='sib-display-lookuplist',
+  bind-resources
+)
--- a/src/page-member.pug
+++ b/src/page-member.pug
@ -0,0 +1,18 @@
+
+sib-router#member-router(default-route='member-chat')
+  sib-route(name='member-chat')
+    div Chat
+  sib-route(name='member-profile')
+    div Profile
+  sib-ac-checker(permission='change' bind-resources)
+    sib-route(name='member-edit')
+      div Edit
+#member-views-container
+  sib-trigger(next="members" class="back") Back to directory
+  div
+    #member-chat
+      include page-member-chat.pug
+    #member-profile
+      include page-member-profile.pug
+    #member-edit
+      include page-member-edit.pug
--- a/src/page-members.pug
+++ b/src/page-members.pug
@ -0,0 +1,35 @@
+div
+  h1 Members
+  sib-display#profiles-list(
+    data-src=`${sdn}/members/`,
+    data-fields='header, infos'
+    set-header='avatar, user, pseudonym, bio',
+    set-infos='cell, roles, user.email, foaf:homepage, skills',
+    set-pseudonym='before-pseudo, pseudo',
+    value-before-pseudo='@',
+    widget-avatar='sib-display-img',
+    widget-user='hdapp-userinfo',
+    widget-user.email='sib-display-mailto',
+    widget-foaf:hompage='hdapp-hyperlink',
+    widget-cell='hdapp-usercell',
+    widget-roles='sib-display-lookuplist',
+    widget-skills='sib-display-lookuplist',
+    set-searchset='pseudo',
+    search-fields='searchset',
+    next='member')
+
+  //- sib-display#profiles-list(
+    data-src=`${sdn}/users/`,
+    data-fields='header, footer'
+    set-header='member.avatar, member.user, pseudonym, member.bio',
+    set-footer='member.cell, member.roles, member.skills',
+    set-pseudonym='before-pseudo, pseudo',
+    value-before-pseudo='@',
+    widget-member.avatar='sib-display-img',
+    widget-member.user='hdapp-userinfo',
+    widget-member.cell='hdapp-usercell',
+    widget-member.roles='sib-display-lookuplist',
+    widget-member.skills='sib-display-lookuplist',
+    set-searchset='last_name',
+    search-fields='searchset',
+    next='member')
--- a/src/page-notifications.pug
+++ b/src/page-notifications.pug
@ -0,0 +1,7 @@
+div.frame
+  h1 Notifications
+
+  sib-display(
+    data-src=`${sdn}/notifications/`
+    data-fields='summary'
+)
--- a/src/page-project-chat.pug
+++ b/src/page-project-chat.pug
@ -0,0 +1,9 @@
+.chat-view
+  sib-chat(
+    data-authentication='login',
+    data-auto-login='true',
+    data-bosh-service-url=xmpp,
+    data-debug='false',
+    data-locales-url='en',
+    bind-resources
+  )
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@ -1,5 +1,6 @@
-#project-create(style='display: none')
-  sib-form(
+h1 New project
+.form-view
+  sib-form.block(
    data-src=`${sdn}/projects/`,
    range-client=`${sdn}/clients/`,
    widget-team='sib-form-multiple-dropdown',
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@ -0,0 +1,12 @@
+h1 Edit project
+  //- sib-display(data-fields="name" bind-resources)]
+.form-view
+  sib-form.block(
+    range-client=`${sdn}/clients/`,
+    range-team=`${sdn}/members/`,
+    data-fields=`name, number, client, description, team, jabberRoom, foaf:jabberID`,
+    widget-jabberRoom='sib-form-checkbox',
+    widget-description='sib-form-textarea',
+    widget-team='sib-form-multiple-dropdown',
+    bind-resources
+  )
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@ -0,0 +1,22 @@
+.frame
+  sib-display(
+    data-fields='title, label-description, description, client',
+    set-title='number, client.name, name',
+    set-client='label-client, client.name, client.logo, client.address',
+    value-label-description="Description:"
+    value-label-client="Client:"
+    widget-client.logo='sib-display-img',
+    widget-client='hdapp-client',
+    widget-team='sib-display-lookuplist',
+    bind-resources,
+  )
+
+  h2 Team:
+  sib-display.members-list-condensed(
+    id-suffix='team',
+    data-fields='member.avatar, member.user',
+    widget-member.avatar='sib-display-img',
+    widget-member.user='hdapp-userinfo',
+    next='member',
+    bind-resources,
+  )
--- a/src/page-project.pug
+++ b/src/page-project.pug
@ -0,0 +1,18 @@
+sib-router#project-router(default-route='project-chat')
+  sib-route(name='project-chat')
+    div Chat
+  sib-route(name='project-profile')
+    div Project
+  sib-route(name='project-edit')
+    div Edit
+  sib-route(name='project-create')
+    div Add new
+#project-views-container
+  #project-chat
+    include page-project-chat.pug
+  #project-profile
+    include page-project-profile.pug
+  #project-edit
+    include page-project-edit.pug
+  #project-create
+    include page-project-create.pug
--- a/src/page-projects.pug
+++ b/src/page-projects.pug
@ -0,0 +1,9 @@
+#projects
+  h1 Projects
+  sib-display(
+    data-src=`${sdn}/projects/`,
+    data-fields='number, client, name',
+    widget-client='hdapp-client',
+    search-fields='number, name',
+    next='project'
+  )
--- a/src/pug/calendar.pug
+++ b/src/pug/calendar.pug
@ -1,6 +0,0 @@
-#calendar(style='display: none')
-  h1.page-title Agenda
-  ldp-calendar(
-    data-src='http://lucky.alwaysdata.net/api/events/',
-    style='display: block; height: 300px; width: 500px;'
-  )
--- a/src/pug/channel-chat.pug
+++ b/src/pug/channel-chat.pug
@ -1,2 +0,0 @@
-#channel-chat.chat-view(style='display: none', bind-resources='')
-  sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources='')
--- a/src/pug/channel-create.pug
+++ b/src/pug/channel-create.pug
@ -1,7 +0,0 @@
-#channel-create(style='display: none')
-  sib-form(
-    data-src=`${sdn}/channels/`, 
-    range-owner=`${sdn}/members/`, 
-    widget-members='sib-form-multiple-dropdown', 
-    range-members=`${sdn}/members/`
-  )
--- a/src/pug/channel-edit.pug
+++ b/src/pug/channel-edit.pug
@ -1,7 +0,0 @@
-#channel-edit(style='display: none')
-  sib-form(
-    range-owner=`${sdn}/members/`,
-    widget-members='sib-form-multiple-dropdown',
-    range-members=`${sdn}/members/`,
-    bind-resources=''
-  )
--- a/src/pug/channel-profile.pug
+++ b/src/pug/channel-profile.pug
@ -1,36 +0,0 @@
-script.
-  document.addEventListener("WebComponentsReady", function(event) { 
-    class HDAppMember extends SIBWidget {
-      get template() {
-        return `
-          <div name="${this.name}">
-            <img src="${this.value.avatar}"/>
-          </div>
-        `;
-      }
-
-      render() {
-        store.get(this.value).then( (value) => {
-          this._value = value;
-          this.innerHTML = this.template;
-        });
-      }
-    }
-    customElements.define("hdapp-member", HDAppMember);
-  });
-
-#channel-profile(style='display: none')
-  sib-display(
-    data-fields='name, description, owner', 
-    widget-owner='hdapp-member', 
-    bind-resources=''
-  )
-  h2.section.skills Participants
-  sib-display(
-    id-suffix='members',
-    data-fields='avatar, user',
-    widget-avatar='sib-display-img',
-    widget-user='hdapp-userinfo',
-    bind-resources=''
-  )
-
--- a/src/pug/channel.pug
+++ b/src/pug/channel.pug
@ -1,15 +0,0 @@
-#channel(style='display: none')
-  sib-router#channel-router(default-route='channel-profile')
-    sib-route(name='channel-chat')
-      div Chat
-    sib-route(name='channel-profile')
-      div Info
-    sib-route(name='channel-edit')
-      div Éditer
-    sib-route(name='channel-create')
-      div Nouveau
-  #network-views-container
-    include channel-chat.pug
-    include channel-profile.pug
-    include channel-edit.pug
-    include channel-create.pug
--- a/src/pug/client-creation.pug
+++ b/src/pug/client-creation.pug
@ -1,5 +0,0 @@
-#client-create(style='display: none')
-  sib-form(
-    data-src=`${sdn}/clients/`, 
-    data-fields='name, address, logo'
-  )
--- a/src/pug/dashboard.pug
+++ b/src/pug/dashboard.pug
@ -1,24 +0,0 @@
-#dashboard(style='display: none')
-  //- form
-    .form-group
-      input#search-input.form-control.form-control-sm(
-        placeholder='Recherche',
-        aria-describedby='search-help',
-        autofocus='',
-        type='text'
-      )
-      small#search-help.form-text.text-muted * parmi les membres, les projets et les groupes de discussion
-
-  .list-condensed
-    ldp-display#to-user-profile(
-        data-src=`${sdn}/members/1/`, 
-        set-name='firstname, name-separator, lastname', 
-        value-name-separator=' ', 
-        data-fields='avatar, name', 
-        widget-avatar='ldp-display-img'
-      )
-  script.
-    document.querySelector("#to-user-profile").addEventListener("click", () => {
-      document.getElementById("navbar-router").navigate("member");
-      document.getElementById("member-page-router").navigate("member-detail");
-    });
--- a/src/pug/dependencies-dev.pug
+++ b/src/pug/dependencies-dev.pug
@ -1,19 +0,0 @@
-// Stylesheets
-//- link(rel='stylesheet', href=`${dn}/node_modules/bootstrap/dist/css/bootstrap.min.css`)
-//- link(rel='stylesheet', href=`${dn}/node_modules/cropper/dist/cropper.min.css`)
-link(rel='stylesheet', href=`${dn}/node_modules/font-awesome/css/font-awesome.min.css`)
-link(rel='stylesheet', href=`${dn}/node_modules/normalize.css/normalize.css?v=${v}`)
-link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
-
-// Javascript
-script(src=`${dn}/node_modules/jquery/dist/jquery.min.js`)
-//- script(src=`${dn}/node_modules/bootstrap/dist/js/bootstrap.min.js`)
-script(src=`${dn}/node_modules/cropper/dist/cropper.min.js`)
-script(src=`${dn}/dist/lib/webcomponentsjs/webcomponents-loader.js`)
-script(src=`${dn}/src/js/hd-app.js?v=${v}`)
-//- script(src=`${dn}/dist/lib/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
-
-// Web components
-link(rel='import', href=`${dn}/dist/lib/sib-core/sib-display.html?v=${v}`)
-link(rel='import', href=`${dn}/dist/lib/sib-router/sib-router.html?v=${v}`)
-//- link(rel='import', href=`${dn}/dist/lib/sib-chat/sib-chat.html`)
--- a/src/pug/dependencies-prod.pug
+++ b/src/pug/dependencies-prod.pug
@ -1,34 +0,0 @@
-// Stylesheets
-//-link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css', integrity='sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4', crossorigin='anonymous')
-link(href='https://cdn.bootcss.com/cropper/4.0.0/cropper.min.css', rel='stylesheet')
-link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
-link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
-
-// Javascript
-script(
-  src='https://code.jquery.com/jquery-3.3.1.slim.min.js',
-  integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo',
-  crossorigin='anonymous')
-script(
-  src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js',
-  integrity='sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ',
-  crossorigin='anonymous')
-script(
-  src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js',
-  integrity='sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm',
-  crossorigin='anonymous')
-script(
-  src='https://cdn.bootcss.com/cropper/4.0.0/cropper.min.js')
-script(
-  src='https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js',
-  integrity='sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=',
-  crossorigin='anonymous')
-script(
-  src=`${dn}/src/js/hd-app.js?v=${v}`)
-script(
-  src=`${cdn}/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
-
-// Web components
-link(rel='import', href=`${cdn}/sib-core/sib-display.html?v=${v}`)
-link(rel='import', href=`${cdn}/sib-router/sib-router.html?v=${v}`)
-link(rel='import', href=`${cdn}/sib-chat/sib-chat.html`)
--- a/src/pug/drive.pug
+++ b/src/pug/drive.pug
@ -1,2 +0,0 @@
-#drive(style='display: none')
-  h1.page-title Drive
--- a/src/pug/header.pug
+++ b/src/pug/header.pug
@ -1,8 +0,0 @@
-header#header
-  div#logo
-    | Happy Dev
-
-  #search-bar
-    input#search-input(placeholder='ctrl + k', type='search')
-    i#search-icon.fa.fa-search(aria-hidden='true')
-    i#close-search-icon.fa.fa-times(aria-hidden='true')
--- a/src/pug/html.pug
+++ b/src/pug/html.pug
@ -1,27 +0,0 @@
-doctype html
-html(lang='fr')
-  head
-    meta(charset='UTF-8')
-    meta(name='viewport', content='width=device-width, initial-scale=1.0')
-    meta(http-equiv='X-UA-Compatible', content='ie=edge')
-    title Happy Dev App
-    //- Prod/Dev setup
-    if (['https://app.happy-dev.fr', 'https://staging-app.happy-dev.fr'].includes(dn))
-      include dependencies-prod.pug
-    else
-      include dependencies-dev.pug
-  body
-    include header.pug
-    div#subContainer
-      include menu.pug
-      main#mainContainer
-        //- include dashboard.pug
-        include members.pug
-        include member.pug
-        include job-offers.pug
-        //- include projects.pug
-        include project.pug
-        //- include client-creation.pug
-        //- include channels.pug
-        include channel.pug
-        //- include search.pug
--- a/src/pug/job-offers.pug
+++ b/src/pug/job-offers.pug
@ -1,40 +0,0 @@
-script.
-  document.addEventListener('WebComponentsReady', function(event) {
-    class HDAppAuthor extends SIBDisplayLookupList {
-      get parentElement() {
-        return 'div';
-      }
-      getTemplate(value, index) {
-        var firstname, lastname;
-        if (typeof value == 'object')
-          if (Object.keys(value).length > 1) {
-            firstname = value.user.first_name;
-            lastname = value.user.last_name;
-          } else {
-            store.get(value).then(resource => {
-              this.value.push(resource);
-              this.render();
-            });
-            if (Array.isArray(this.value))
-              this.value.splice(this.value.indexOf(value), 1);
-            else this.value = [];
-            return '';
-          }
-        return `${firstname} ${lastname}`;
-      }
-    }
-    customElements.define('hdapp-author', HDAppAuthor);
-  });
-
-
-#job-offers(style='display: none')
-  div
-    h1 Job offers
-    sib-display#offers-list(
-      data-src=`${sdn}/job-offers/`,
-      data-fields='author, title, description, skills',
-      set-searchset='title, description',
-      widget-skills='sib-display-lookuplist',
-      widget-author='hdapp-author',
-      search-fields='searchset'
-    )
--- a/src/pug/member-chat.pug
+++ b/src/pug/member-chat.pug
@ -1,2 +0,0 @@
-#member-chat.chat-view(style='display: none', bind-resources='')
-  sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources='')
--- a/src/pug/member-profile.pug
+++ b/src/pug/member-profile.pug
@ -1,13 +0,0 @@
-#member-profile(style='display: none')
-  sib-display#member-info(
-    data-fields='header, cell, number, roles, website, skills',
-    set-header='avatar, user, pseudonym, bio'
-    set-pseudonym='before-pseudo, pseudo'
-    widget-avatar='sib-display-img',
-    widget-user='hdapp-userinfo',
-    widget-cell='hdapp-usercell',
-    widget-number='sib-display-tel',
-    widget-roles='sib-display-lookuplist',
-    widget-skills='sib-display-lookuplist',
-    bind-resources=''
-  )
--- a/src/pug/member.pug
+++ b/src/pug/member.pug
@ -1,12 +0,0 @@
-#member(style='display: none')
-  sib-router#member-router(default-route='member-profile')
-    sib-route(name='member-chat')
-      div Chat
-    sib-route(name='member-profile')
-      div Voir
-    sib-route(name='member-edit')
-      div Éditer
-  #member-views-container
-    include member-chat.pug
-    include member-profile.pug
-    include member-edit.pug
--- a/src/pug/members.pug
+++ b/src/pug/members.pug
@ -1,73 +0,0 @@
-script.
-  document.addEventListener("WebComponentsReady", function(event) { 
-    class HDAppUserInfo extends SIBDisplayLookupList {
-      get parentElement() {return "div"}
-      getTemplate(value, index) {
-        var firstname, lastname, email;
-
-        if(typeof value == "object")
-          if(Object.keys(value).length > 1) {
-            firstname = value.first_name;
-            lastname  = value.last_name;
-            email     = value.email;
-          }
-          else {
-            store.get(value).then(resource => {
-                this.value.push(resource);
-                this.render();
-            });
-            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
-            else this.value = [];
-            return '';
-          }
-        return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>`;
-                // + `<div id="${email}">${email}</div>`;
-      }
-    }
-    customElements.define('hdapp-userinfo', HDAppUserInfo);
-
-    class HDAppCell extends SIBDisplayLookupList {
-      get parentElement() {return "div"}
-      getTemplate(value, index) {
-        var city, country;
-
-        if(typeof value == "object")
-          if(Object.keys(value).length > 1) {
-            city      = value.city;
-            country   = value.country;
-          }
-          else {
-            store.get(value).then(resource => {
-                this.value.push(resource);
-                this.render();
-            });
-            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
-            else this.value = [];
-            return '';
-          }
-        return `<span id="${city}-${country}">${city} ${country}</span>`;
-      }
-    }
-    customElements.define("hdapp-usercell", HDAppCell);
-  });
-
-#members.view(style='display: none')
-  div
-    h1 Members
-    sib-display#profiles-list(
-      data-src=`${sdn}/members/`,
-      data-fields='header, cell, skills',
-      set-header='avatar, user, pseudonym, bio'
-      set-pseudonym='before-pseudo, pseudo'
-      value-before-pseudo='@',
-      widget-avatar='sib-display-img',
-      widget-user='hdapp-userinfo',
-      widget-cell='hdapp-usercell',
-      widget-skills='sib-display-lookuplist',
-      set-searchset='user.first_name, user.last_name',
-      search-fields='searchset',
-      next='member'
-    )
-
-
-
--- a/src/pug/menu.pug
+++ b/src/pug/menu.pug
@ -1,39 +0,0 @@
-.btn-toggle
-  i.fa.fa-bars
-div
-  nav#navbar
-    sib-router#navbar-router(default-route='members')
-      div(hidden)
-        sib-route(name='member', id-prefix=`${sdn}/members/`)
-        sib-route(name='project', id-prefix=`${sdn}/projects/`)
-        sib-route(name='channel', id-prefix=`${sdn}/channels/`)
-      div#menu-items
-        sib-route(name='members')
-          div
-            i.fa.fa-users
-            |  Membres
-        sib-route(name='job-offers')
-          div
-            i.fa.fa-handshake-o
-            |  Job offers
-        div
-          div
-            i.fa.fa-tasks
-            |  Projets
-          sib-display(
-            data-src=`${sdn}/projects/`,
-            data-fields='name',
-            next='project'
-          )
-        div
-          div
-            i.fa.fa-tasks
-            |  Channels
-          sib-display(
-            data-src=`${sdn}/channels/`,
-            data-fields='name',
-            next='channel'
-          )
-          //- sib-route(name='client-create')
-            i.fa.fa-plus(aria-hidden='true')
-            |  New client
--- a/src/pug/project-chat.pug
+++ b/src/pug/project-chat.pug
@ -1,2 +0,0 @@
-#project-chat.chat-view(style='display: none', bind-resources='')
-  sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources='')
--- a/src/pug/project-edit.pug
+++ b/src/pug/project-edit.pug
@ -1,7 +0,0 @@
-#project-edit(style='display: none')
-  sib-form(
-    range-client=`${sdn}/clients/`,
-    widget-team='sib-form-multiple-dropdown',
-    range-team=`${sdn}/members/`,
-    bind-resources=''
-  )
--- a/src/pug/project-profile.pug
+++ b/src/pug/project-profile.pug
@ -1,16 +0,0 @@
-#project-profile(style='display: none')
-  sib-display(
-    data-fields='title, description, client',
-    set-title='number, name'
-    widget-client='hdapp-client',
-    bind-resources=''
-  )
-  h3 Team
-  sib-display.members-list-condensed(
-    id-suffix='team',
-    data-fields='avatar, user',
-    widget-avatar='sib-display-img',
-    widget-user='hdapp-userinfo',
-    next='member',
-    bind-resources=''
-  )
--- a/src/pug/project.pug
+++ b/src/pug/project.pug
@ -1,15 +0,0 @@
-#project(style='display: none')
-  sib-router#project-router(default-route='project-profile')
-    sib-route(name='project-chat')
-      div Chat
-    sib-route(name='project-profile')
-      div Voir
-    sib-route(name='project-edit')
-      div Éditer
-    sib-route(name='project-create')
-      div Nouveau
-  #project-views-container
-    include project-chat.pug
-    include project-profile.pug
-    include project-edit.pug
-    include project-create.pug
--- a/src/pug/projects.pug
+++ b/src/pug/projects.pug
@ -1,27 +0,0 @@
-script.
-  document.addEventListener("WebComponentsReady", function(event) { 
-    class HDAppClient extends SIBWidget {
-      get template() {
-
-        return `<img name="${this.name}" src="${this.value.logo}"/>`;
-      }
-
-      render() {
-        store.get(this.value).then( (value) => {
-          this._value = value;
-          this.innerHTML = this.template;
-        });
-      }
-    }
-    customElements.define("hdapp-client", HDAppClient);
-  });
-
-#projects(style='display: none')
-  h1 Projects
-  sib-display(
-    data-src=`${sdn}/projects/`,
-    data-fields='number, client, name',
-    widget-client='hdapp-client',
-    search-fields='number, name',
-    next='project'
-  )
--- a/src/pug/search.pug
+++ b/src/pug/search.pug
@ -1,26 +0,0 @@
-#search-view
-  .content.container-fluid
-    ldp-display#search-results-members.list-condensed(
-      data-src=`${sdn}/members/`,
-      set-name='firstname, name-separator, lastname',
-      value-name-separator=' ',
-      data-fields='avatar, name',
-      widget-avatar='ldp-display-img',
-      search-fields='firstname, lastname',
-      next='member'
-    )
-    ldp-display#search-results-projects.list-condensed(
-      data-src=`${sdn}/projects/`,
-      set-title='number, after-num-separator, name',
-      value-after-num-separator=' - ',
-      data-fields='client, title',
-      widget-client='ldp-display-client',
-      search-fields='number, name',
-      next='project'
-    )
-    ldp-display#search-results-channels(
-      data-src=`${sdn}/channels/`,
-      data-fields='name',
-      search-fields='name',
-      next='channel'
-    )
--- a/src/scripts/hd-app.js
+++ b/src/scripts/hd-app.js
@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
  const searchBar     = document.querySelector("#search-bar");
  const searchView    = document.querySelector("#search-view");
  const searchInput   = searchBar.querySelector("#search-input");
-  const btnToggle     = document.querySelector(".btn-toggle");
+  const btnToggle     = document.querySelector("#button-toggle");


  // Shortcuts
--- a/src/scripts/hd-widgets.js
+++ b/src/scripts/hd-widgets.js
@ -0,0 +1,159 @@
+document.addEventListener('WebComponentsReady', function(event) {
+  class HDAppUserInfo extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var firstname, lastname, email;
+
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          firstname = value.first_name;
+          lastname = value.last_name;
+          email = value.email;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `<div>${firstname} ${lastname}</div>`;
+      // + `<div id="${email}">${email}</div>`;
+    }
+  }
+  customElements.define('hdapp-userinfo', HDAppUserInfo);
+
+  class HDAppCell extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var city, country;
+
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          city = value.city;
+          country = value.country;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `<span>${city} - ${country}</span>`;
+    }
+  }
+  customElements.define('hdapp-usercell', HDAppCell);
+
+  class HDAppClient extends SIBWidget {
+    get template() {
+      return `<img name="${this.name}" src="${this.value.logo}"/>`;
+    }
+
+    render() {
+      store.get(this.value).then(value => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define('hdapp-client', HDAppClient);
+
+  class HDAppMember extends SIBWidget {
+    get template() {
+      return `
+        <div name="${this.name}">
+          <img src="${this.value.avatar}"/>
+        </div>
+      `;
+    }
+
+    render() {
+      store.get(this.value).then(value => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define('hdapp-member', HDAppMember);
+
+  class HDAppAuthor extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      return JSON.stringify(value);
+      var firstname, lastname;
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          firstname = value.user.first_name;
+          lastname = value.user.last_name;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `${firstname} ${lastname}`;
+    }
+  }
+  customElements.define('hdapp-author', HDAppAuthor);
+
+  class HDAppClosingDate extends SIBWidget {
+    get template() {
+      return this.value
+        ? `<strong>closed</strong> (${this.value})`
+        : '<strong>open</strong>';
+    }
+
+    render() {
+      this.innerHTML = this.template;
+    }
+  }
+
+  customElements.define('hdapp-closing-date', HDAppClosingDate);
+
+  class HDAppAvailable extends SIBWidget {
+    get template() {
+      return this.value
+        ? '<strong>Available</strong>'
+        : '<strong>Not available</strong>';
+    }
+
+    render() {
+      this.innerHTML = this.template;
+    }
+  }
+
+  customElements.define('hdapp-available', HDAppAvailable);
+
+  class HDAppHyperlink extends SIBWidget {
+    get template() {
+      const escaped = this.value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+      return `<a href="${escaped}">${escaped}</a>`;
+    }
+
+    render() {
+      this.innerHTML = this.template;
+    }
+  }
+
+  customElements.define('hdapp-hyperlink', HDAppHyperlink);
+});
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', function(event) {
+  const navBar = document.querySelector('#navbar');
+  const btnToggle = document.querySelector('#button-toggle');
+  if (!navBar || !btnToggle) return;
+
+  btnToggle.addEventListener('click', e => {
+    navBar.classList.toggle('open');
+    e.stopPropagation();
+  });
+
+  window.addEventListener('click', e => {
+    navBar.classList.remove('open');
+  });
+
+  function resize() {
+    setTimeout(()=>
+    Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
+      if(!elm.offsetParent) return;
+      elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
+    }));
+  }
+  window.addEventListener('resize', resize);
+  window.addEventListener('navigate', resize);
+  window.addEventListener('popstate', resize);
+  document.addEventListener('load', resize);
+  document.addEventListener('WebComponentsReady', resize);
+  resize();
+});
--- a/src/scss/_channel.scss
+++ b/src/scss/_channel.scss
@ -1,62 +0,0 @@
-#channel {
-  #channel-detail {
-    #channel-info {
-      display:      block;
-      padding-top:  10px;
-
-      div[name="name"] {
-        font-weight:  bold;
-      }
-    }
-
-    ldp-display-member {
-      img {
-        width:          50px;
-        border-radius:  100px;
-      }
-
-      span {
-        padding-left:  5px;
-      }
-    }
-
-    #chat-members {
-      ldp-display {
-        display:        flex;
-        align-items:    center;
-        margin-bottom:  10px;
-
-        img {
-          width:          50px;
-          border-radius:  100px;
-        }
-
-        div[name="name"] {
-          display:      flex;
-          margin-left:  10px;
-        }
-      }
-    }
-  }
-
-  div[name="admin"],
-  .section {
-    @extend %detail-section;
-    margin-top:  40px;
-  }
-}
-
-@media (min-width: $sm-with) {
-  #channel {
-    #channel-detail {
-      #channel-info {
-        ldp-display-client {
-          display:  block;
-          float:    right;
-          width:    300px;
-        }
-      }
-    }
-  }
-}
-
--- a/src/scss/_channels.scss
+++ b/src/scss/_channels.scss
@ -1,24 +0,0 @@
-#channels {
-  #channels-list {
-    display:          flex;
-    flex-direction:   column;
-
-    ldp-display {
-      @extend %td;
-      cursor:           pointer;
-      display:          flex;
-      align-items:      center;
-      height:           65px;
-
-      &:hover {
-        background-color:   $hd-color-faded;
-        color:              white;
-      }
-
-      ldp-display-div[name="name"] {
-        width:  130px;
-      }
-    }
-  }
-}
-
--- a/src/scss/_chat.scss
+++ b/src/scss/_chat.scss
@ -1,17 +0,0 @@
-sib-chat {
-  //position: absolute;
-  border: 5px dotted red;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  display: none;
-  min-height: 300px;
-}
-
-.chat-view {
-  sib-chat {
-    display: block;
-  }
-}
--- a/src/scss/_classes.scss
+++ b/src/scss/_classes.scss
@ -1,18 +0,0 @@
-.list-condensed {
-  ldp-display {
-    display:        flex;
-    align-items:    center;
-    margin-bottom:  10px;
-
-    img {
-      width:          50px;
-      border-radius:  100px;
-    }
-
-    & > div[name="name"],
-    & > div[name="title"] {
-      display:      flex;
-      margin-left:  10px;
-    }
-  }
-}
--- a/src/scss/_dashboard.scss
+++ b/src/scss/_dashboard.scss
@ -1,5 +0,0 @@
-#dashboard {
-  #to-user-profile {
-    cursor:         pointer;
-  }
-}
--- a/src/scss/_edit-profile.scss
+++ b/src/scss/_edit-profile.scss
@ -1,39 +0,0 @@
-#crop-modal {
-  position:         absolute;
-  z-index:          1111;
-  top:              $menu-height;
-  bottom:           0px;
-  left:             0px;
-  right:            0px;
-  background-color: black;
-  display:          none;
-
-  &.cropping-mode {
-    display:  block;
-  }
-
-  .crop-wrapper {
-    img {
-      width:  100%;
-    }
-  }
-
-  .control-bar {
-    display:              flex;
-    justify-content:      space-between;
-    color:                white;
-    font-size:            30px;
-
-    button {
-      text-transform:   uppercase;
-      color:            white;
-      font-size:        18px;
-      font-weight:      bold;
-    }
-
-    i {
-      padding-top:    4px;
-    }
-  }
-}
-
--- a/src/scss/_fonts.scss
+++ b/src/scss/_fonts.scss
@ -1,8 +0,0 @@
-@font-face {
-  font-family: 'bebas';
-  src: url('../../src/fonts/bebas/bebas.eot'); /* IE9 Compat Modes */
-  src: url('../../src/fonts/bebas/bebas.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../../src/fonts/bebas/bebas.woff') format('woff'), /* Pretty Modern Browsers */
-       url('../../src/fonts/bebas/bebas.ttf')  format('truetype'), /* Safari, Android, iOS */
-       url('../../src/fonts/bebas/bebas.svg#svgFontName') format('svg'); /* Legacy iOS */
-}
--- a/src/scss/_forms.scss
+++ b/src/scss/_forms.scss
@ -1,108 +0,0 @@
-ldp-display {
-  ldp-form {
-    display: block;
-    background-color: #f3f3f3;
-    padding: 15px;
-    box-sizing: content-box;
-
-    form {
-      @extend %self-clear;
-
-      ldp-form-text {
-        position: relative;
-        display: block;
-        margin-bottom: 1rem;
-
-        &::before {
-          position: absolute;
-          top: 3px;
-          bottom: 0px;
-          left: 10px;
-          margin: auto;
-          font-family: FontAwesome;
-          content: '\f002';
-          color: gray;
-        }
-
-        label {
-          text-transform: capitalize;
-          display: none;
-        }
-
-        input[type='text'] {
-          @extend %form-control;
-          @extend %form-control-sm;
-
-          padding-left: 30px;
-        }
-      }
-
-      input[type='submit'],
-      input[type='reset'] {
-        @extend %btn;
-        float: right;
-      }
-
-      input[type='submit'] {
-        @extend %btn-primary;
-      }
-
-      input[type='reset'] {
-        @extend %btn-link;
-      }
-    }
-  }
-}
-
-ldp-form.edit-form {
-  ldp-form-text {
-    @extend %form-group;
-
-    label {
-      text-transform: capitalize;
-    }
-
-    input {
-      @extend %form-control;
-      @extend %form-control-sm;
-    }
-  }
-
-  input[type='submit'] {
-    @extend %btn;
-    @extend %btn-primary;
-  }
-}
-
-sib-form {
-  sib-form-text {
-    label {
-      text-transform: capitalize;
-    }
-
-    input {
-      margin-right: 0.5em;
-      padding: 0.375em 0.75em;
-      font-size: 1rem;
-      line-height: 1.5;
-      color: #495057;
-      background-color: #fff;
-      border: 1px solid #ced4da;
-      border-radius: 0.25rem;
-      vertical-align: top;
-    }
-  }
-
-  input[type='submit'],
-  input[type='reset'] {
-    @extend %btn;
-    @extend %btn-primary;
-    margin-right: 0.5em;
-  }
-}
-
-sib-form {
-  input[type='reset'] {
-    display: none;
-  }
-}
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@ -1,10 +0,0 @@
-#header{
-  background-color: $col-alt-bg;
-  color: $col-alt-fg;
-  display: flex;
-  padding: 1em;
-}
-
-#logo{
-  flex: 1 1 0px;
-}
--- a/src/scss/_job-offers.scss
+++ b/src/scss/_job-offers.scss
@ -1,14 +0,0 @@
-#offers-list {
-  > div {
-    > sib-display {
-      display: block;
-      margin: 1em 0;
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-      background-color: #efefef;
-      padding: 0.5em 1em;
-      &:nth-child(odd) {
-        background-color: #e0e0e0;
-      }
-    }
-  }
-}
--- a/src/scss/_member.scss
+++ b/src/scss/_member.scss
@ -1,123 +0,0 @@
-%detail-section {
-  font-weight: bold;
-  font-size: 18px;
-}
-
-#member-chat {
-  #conversejs {
-    margin: none;
-  }
-}
-
-#profiles-list,
-#member-info {
-  img {
-    display: block;
-  }
-
-  &,
-  img {
-    width: 100%;
-  }
-
-  div[name='name'] {
-    @extend %detail-section;
-    padding-top: 10px;
-  }
-
-  div[name='name'],
-  div[name='location'] {
-    display: flex;
-  }
-}
-
-#member-detail {
-  #member-info {
-    sib-display-mailto,
-    sib-display-tel {
-      display: block;
-    }
-
-    a[name='email'],
-    a[name='number'] {
-      &::before {
-        font-family: FontAwesome;
-        padding-right: 4px;
-        color: black;
-      }
-    }
-    a[name='email'] {
-      &::before {
-        content: '\f0e0';
-      }
-    }
-    a[name='number'] {
-      &::before {
-        content: '\f10b';
-        font-size: 22px;
-        padding-left: 3px;
-        padding-right: 7px;
-      }
-    }
-  }
-
-  .section {
-    position: relative;
-
-    h2 {
-      @extend %detail-section;
-      margin-top: 40px;
-    }
-  }
-
-  #member-skills {
-    display: flex;
-    flex-wrap: wrap;
-
-    sib-display {
-      display: block;
-      background-color: $hd-color;
-      color: white;
-      border-radius: 100px;
-      padding: 3px 10px;
-      margin-bottom: 5px;
-      margin-right: 5px;
-    }
-  }
-}
-
-@media (min-width: $sm-with) {
-  #member-detail {
-    #member-info {
-      sib-display-img {
-        display: block;
-        float: right;
-        width: 300px;
-      }
-    }
-  }
-}
-
-#member-info {
-  @extend %member;
-}
-
-.members-list-condensed{
-  display: block;
-  img{
-    width: 50px;
-    height: 50px;
-    border-radius: 100%;
-    object-fit: cover;
-    object-position: top;
-  }
-  label{
-    display: none;
-  }
-  >div>sib-display>div{
-    display: flex;
-  }
-  ul{
-    padding-left: 1em;
-  }
-}
--- a/src/scss/_members.scss
+++ b/src/scss/_members.scss
@ -1,120 +0,0 @@
-%member {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-gap: 1em;
-  label {
-    display: none;
-  }
-  > sib-display {
-    display: block;
-    position: relative;
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-    padding: 0.5em;
-    cursor: pointer;
-
-    &::before,
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      transform: scale3d(0, 0, 1);
-      transition: transform 0.3s ease-out 0s;
-      background: #eac1;
-      content: '';
-      pointer-events: none;
-    }
-
-    &::before {
-      transform-origin: left top;
-    }
-
-    &::after {
-      transform-origin: right bottom;
-
-      background: #ace1;
-    }
-
-    &:hover,
-    &:focus {
-      &::before,
-      &::after {
-        transform: scale3d(1, 1, 1);
-      }
-    }
-  }
-}
-
-#profiles-list {
-  display: block;
-  div[name='header'] {
-    border-top: 2em solid $col-alt-bg;
-    border-bottom: 1px solid $col-alt-bg;
-    padding-bottom: 1em;
-    margin-bottom: 1em;
-    text-align: center;
-  }
-
-  > div {
-    @extend %member;
-  }
-  sib-display-img {
-    display: block;
-    position: relative;
-    width: 80%;
-    height: 0;
-    padding-bottom: 80%;
-    margin: 10%;
-    img {
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      border-radius: 100%;
-      object-fit: cover;
-      object-position: center;
-    }
-  }
-
-  hdapp-userinfo {
-    display: block;
-    color: $pal-black;
-    font-size: 1.1em;
-    margin: 0.5em;
-    ul,
-    li {
-      display: block;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-  }
-
-  div[name='pseudonym'] {
-    font-size: 0.8em;
-    div {
-      display: inline;
-    }
-  }
-}
-sib-display-lookuplist[name='skills'] {
-  ul,
-  li {
-    display: block;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -0.25em;
-  }
-  li {
-    padding: 0.5em 1em;
-    border: 1px solid;
-    border-radius: 0.25em;
-    margin: 0.25em;
-  }
-}
--- a/src/scss/_menu.scss
+++ b/src/scss/_menu.scss
@ -1,127 +0,0 @@
-// #navbar{}
-// #navbar-router{}
-
-.btn-toggle {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: $col-alt-bg;
-  color: $col-alt-fg;
-  font-size: 1.5em;
-  padding: 0.5em;
-  cursor: pointer;
-}
-
-#navbar {
-  background-color: $col-dark-bg;
-  color: $col-dark-fg;
-  max-width: 16rem;
-  position: sticky;
-  top: 0;
-  height: 100%;
-  max-height: 100vh;
-  &.open {
-    transform: translateX(0);
-  }
-  &:after {
-    //Shadow
-    $shadow-width: 4px;
-    $shadow-opacity: 0.35;
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: -$shadow-width;
-    width: $shadow-width;
-    background-image: linear-gradient(
-      to right,
-      rgba(0, 0, 0, $shadow-opacity),
-      transparent
-    );
-  }
-}
-
-@media (max-width: 32rem) {
-  .btn-toggle {
-    display: block;
-  }
-  #navbar {
-    transform: translateX(-100%);
-    transition: transform 0.5s ease;
-    position: absolute;
-    top: auto;
-    z-index: 1;
-  }
-  #header {
-    padding-left: 3rem;
-  }
-}
-
-#menu-items {
-  > * {
-    display: block;
-    border-bottom: 1px solid rgba(white, 0.5);
-    sib-route {
-      display: block;
-      cursor: pointer;
-    }
-    &[active] {
-      background-color: $col-highlight-bg;
-      color: $col-highlight-fg;
-    }
-    > div {
-      width: max-content;
-      padding: 2em;
-    }
-    &[id-prefix] {
-      display: none;
-    }
-    > sib-display {
-      display: block;
-      font-size: 0.9em;
-      color: #aaa;
-      > div {
-        margin-bottom: 1.5em;
-        > sib-display {
-          cursor: pointer;
-          display: block;
-          padding: 0.5em 2em;
-        }
-      }
-    }
-  }
-}
-
-/* sub menu (right menu) */
-
-#mainContainer > div {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: flex-start;
-  > sib-router {
-    display: block;
-    background-color: #ccc;
-    sib-route {
-      display: block;
-      > div {
-        position: relative;
-        padding: 1em 2em;
-        border-bottom: 1px solid #888;
-      }
-      &[active] {
-        font-weight: bold;
-        > div:before {
-          content: '<';
-          position: absolute;
-          transform: translateX(-150%);
-        }
-      }
-    }
-  }
-  > div {
-    margin: 0.5em;
-    flex: 1 1 0px;
-  }
-}
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@ -1,103 +0,0 @@
-%title{
-  color: $pal-black;
-}
-
-// Bootstrap classes
-%btn {
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border: 1px solid transparent;
-  padding: .375rem .75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 100em;
-  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-
-  &:not(:disabled):not(.disabled) {
-    cursor:   pointer;
-  }
-}
-
-%btn-primary {
-  color: $col-highlight-fg;
-  background-color: $col-highlight-bg;
-  border-color: $col-highlight-bg;
-}
-
-%btn-link {
-  font-weight: 400;
-  color: $col-highlight-bg;
-  background-color: transparent;
-}
-
-%form-group {
-  display:        block;
-  margin-bottom:  1rem;
-}
-
-%form-control {
-  display: block;
-  width: 100%;
-  padding: .375rem .75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #495057;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #ced4da;
-  border-radius: .25rem;
-  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-}
-
-%form-control-sm {
-  padding: .25rem .5rem;
-  font-size: .875rem;
-  line-height: 1.5;
-  border-radius: .2rem;
-}
-
-%td {
-  padding: .65rem;
-  vertical-align: top;
-  border-top: 1px solid #dee2e6;
-}
-
-// Custom mixins
-%self-clear {
-  &::after {
-    content: "";
-    clear: both;
-    display: table;
-  }
-}
-
-@mixin list-reset($deep:0) {
-  padding: 0;
-  margin: 0;
-  display: block;
-  list-style: none;
-  @if ($deep == 0) {
-    > li {
-      padding: 0;
-      margin: 0;
-      display: block;
-      list-style: none;
-    }
-  } @else {
-    ul,
-    ol,
-    li {
-      padding: 0;
-      margin: 0;
-      display: block;
-      list-style: none;
-    }
-  }
-}
--- a/src/scss/_project.scss
+++ b/src/scss/_project.scss
@ -1,19 +0,0 @@
-#project-profile {
-  [name='title'] {
-    font-size: 1.5em;
-    padding: .5em 0;
-    margin-bottom: .5em;
-    border-bottom: 1px solid grey;
-    color: $pal-black;
-    sib-display-div,
-    div {
-      display: inline;
-    }
-    sib-display-div[name='number'] {
-      padding-right: 0.5em;
-      &:before {
-        content: '#';
-      }
-    }
-  }
-}
--- a/src/scss/_projects.scss
+++ b/src/scss/_projects.scss
@ -1,36 +0,0 @@
-#projects {
-  #projects-list {
-    display:          flex;
-    flex-direction:   column;
-
-    ldp-display {
-      @extend %td;
-      cursor:           pointer;
-      display:          flex;
-      align-items:      center;
-      height:           65px;
-
-      &:hover {
-        background-color:   $hd-color-faded;
-        color:              white;
-      }
-
-      ldp-display-div[name="number"] {
-        width:  50px;
-      }
-
-      ldp-display-client[name="client"] {
-        display:      block;
-        width:        70px;
-
-        img {
-          width:        50px;
-        }
-      }
-
-      ldp-display-div[name="name"] {
-        width:  150px;
-      }
-    }
-  }
-}
--- a/src/scss/_search.scss
+++ b/src/scss/_search.scss
@ -1,35 +0,0 @@
-
-#search-bar{
-  position: relative;
-}
-
-#search-icon{
-  pointer-events: none;
-}
-
-#search-icon,
-#close-search-icon{
-  position: absolute;
-  right: .4em;
-  top: 50%;
-  transform: translateY(-50%);
-  margin: auto;
-  display: block;
-}
-#search-input {
-  -webkit-appearance: textfield;
-  border-radius: 10em;
-  padding: .2em .5em;
-  border: 1px solid $col-main-fg;
-  & ~ #close-search-icon{
-    opacity: 0;
-  }
-  &:focus{
-    & ~ #close-search-icon{
-      opacity: 1;
-    }
-    & ~ #search-icon{
-      visibility: hidden;
-    }
-  }
-}
--- a/src/scss/_styles.scss
+++ b/src/scss/_styles.scss
@ -1,36 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans,
-    Tahoma, sans-serif;
-  font-size: 16px;
-
-  background-color: $col-main-bg;
-  color: $col-main-fg;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-#subContainer {
-  display: flex;
-  min-height: 100%;
-}
-
-#mainContainer {
-  flex: 1 1 0px;
-}
-
-h1,h2,h3,h4,h5,h6{
-    color: $pal-black;
-}
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@ -1,30 +0,0 @@
-// palette
-$pal-white: #e8e8e8;
-$pal-black: #222;
-$pal-light-grey: #ddd;
-$pal-dark-grey: #4a4a4a;
-$pal-yellow: #fdc815;
-
-// color
-$col-main-fg: $pal-dark-grey;
-$col-main-bg: $pal-white;
-
-$col-alt-fg: $pal-dark-grey;
-$col-alt-bg: $pal-light-grey;
-
-$col-dark-fg: $pal-white;
-$col-dark-bg: $pal-dark-grey;
-
-$col-highlight-fg: $pal-black;
-$col-highlight-bg: $pal-yellow;
-
-// other color
-$hd-color: rgb(253, 200, 21);
-$hd-color-faded: rgba(253, 200, 21, 0.8);
-$twitter-color: grey;
-
-$menu-height:           43px;
-$menu-font-size:        16px;
-$vertical-menu-width:   50px;
-$sm-with:               576px;
-$md-with:               768px;
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`Subproject commit 24192a89c1bc19f7faa06546ba1b798ad717e04b`
				`@ -1 +0,0 @@`
				`Subproject commit e493387102088c9d7c4cd03ce5d4edbc3a26cdcc`
				`@ -1 +0,0 @@`
				`Subproject commit 04ea601abf2fe9d65603867450cb39106f5d06e8`
				`@ -1 +0,0 @@`
				`Subproject commit bdd5203993f19ca08568638afd96f8f9c3959ea1`