From b541d9e6d746ee1cc304312bb10f810b6aab2e31 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 22 Jan 2021 14:21:25 +0100
Subject: [PATCH 1/5] features: notifications fix + tests fix + menu/router
 fixes

---
 cypress/integration/create-channel.spec.js    |  60 ++--
 cypress/integration/create-project.spec.js    |  40 +--
 cypress/integration/create-user.spec.js       |   6 +-
 cypress/integration/delete-channel.spec.js    |   4 +-
 cypress/integration/edit-channel.spec.js      |   4 +-
 cypress/integration/edit-project.spec.js      |   4 +-
 cypress/integration/leave-channel.spec.js     |   4 +-
 cypress/integration/leave-project.spec.js     |   4 +-
 cypress/integration/retire-channel.spec.js    |   4 +-
 cypress/integration/retire-project.spec.js    |   4 +-
 cypress/integration/signin.spec.js            |  10 +-
 package-lock.json                             |  17 +-
 package.json                                  |   3 +-
 src/dependencies.pug                          |  12 +-
 src/index.pug                                 |   8 +-
 src/scripts/firefox-scroll.js                 | 112 ++++----
 src/scripts/keyboard-shortcuts.js             |  10 -
 src/scripts/login-element-visibility.js       |   3 -
 src/scripts/menu-toggle.js                    |  11 -
 src/scripts/navigate-event.js                 |  34 ++-
 src/styles/content/_index.scss                |   4 +
 src/styles/header/_index.scss                 |  27 +-
 src/styles/index.scss                         |  11 +-
 src/views/page-admin.pug                      |  73 +++--
 .../admin/page-admin-circles-create.pug       |   2 +-
 .../partials/admin/page-admin-circles.pug     | 225 +++++++--------
 .../partials/admin/page-admin-communities.pug |  64 ++---
 .../admin/page-admin-projects-create.pug      |   2 +-
 .../partials/admin/page-admin-projects.pug    | 268 +++++++++---------
 .../admin/page-admin-users-create.pug         |  12 +-
 .../partials/circle/page-circle-left.pug      |   2 +-
 src/views/partials/header.pug                 |  16 +-
 src/views/partials/menu-left.pug              |  16 +-
 src/views/partials/notifications.pug          |   1 +
 .../notifications/message-project.pug         |  11 +
 .../partials/project/page-project-left.pug    |   2 +-
 36 files changed, 561 insertions(+), 529 deletions(-)
 delete mode 100644 src/scripts/keyboard-shortcuts.js
 delete mode 100644 src/scripts/menu-toggle.js
 create mode 100644 src/views/partials/notifications/message-project.pug

diff --git a/cypress/integration/create-channel.spec.js b/cypress/integration/create-channel.spec.js
index bd6b925..34c4840 100644
--- a/cypress/integration/create-channel.spec.js
+++ b/cypress/integration/create-channel.spec.js
@@ -16,9 +16,9 @@ context('Create Channel Browser Testing', () => {
         description = 'Test Description ',
         subtitle = 'Test Subtitle ';
     it('should visit the channel creation screen', () => {
-      cy.visit('/admin/admin-circle-create');
+      cy.visit('/admin-circles-create');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-circle-create');
+        expect(loc.pathname).to.eq('/admin-circles-create');
       });
     });
     it('should enter correct channel data', () => {
@@ -26,20 +26,20 @@ context('Create Channel Browser Testing', () => {
         channelName += num;
         description += num;
         subtitle += num;
-        cy.get('#admin-circle-create input[name="name"]').clear().type(channelName);
-        cy.get('#admin-circle-create input[name="name"]').should('have.value', channelName);
-        cy.get('#admin-circle-create input[name="subtitle"]').clear().type(subtitle);
-        cy.get('#admin-circle-create input[name="subtitle"]').should('have.value', subtitle);
-        cy.get('#admin-circle-create [name="description"] [contenteditable="true"]').clear().type(description);
-        cy.get('#admin-circle-create [name="description"] [contenteditable="true"]').should('have.value', description);
+        cy.get('#admin-circles-create input[name="name"]').clear().type(channelName);
+        cy.get('#admin-circles-create input[name="name"]').should('have.value', channelName);
+        cy.get('#admin-circles-create input[name="subtitle"]').clear().type(subtitle);
+        cy.get('#admin-circles-create input[name="subtitle"]').should('have.value', subtitle);
+        cy.get('#admin-circles-create [name="description"] [contenteditable="true"]').clear().type(description);
+        cy.get('#admin-circles-create [name="description"] [contenteditable="true"]').should('have.value', description);
       });
     });
     it('should click on create channel button', () => {
-      cy.get('#admin-circle-create input[type="submit"]').click();
+      cy.get('#admin-circles-create input[type="submit"]').click();
     });
     it('should land on channels list screen', () => {
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin');
+        expect(loc.pathname).to.eq('/admin-circles');
       });
     });
     it('should land newly created channel on channels list screen', () => {
@@ -54,9 +54,9 @@ context('Create Channel Browser Testing', () => {
         description = 'Test Description ',
         subtitle = 'Test Subtitle ';
     it('should visit the channel creation screen', () => {
-      cy.visit('/admin/admin-circle-create');
+      cy.visit('/admin-circles-create');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-circle-create');
+        expect(loc.pathname).to.eq('/admin-circles-create');
       });
     });
     it('should enter correct channel data', () => {
@@ -64,20 +64,20 @@ context('Create Channel Browser Testing', () => {
         channelName += num;
         description += num;
         subtitle += num;
-        cy.get('#admin-circle-create input[name="name"]').clear().type(channelName);
-        cy.get('#admin-circle-create input[name="name"]').should('have.value', channelName);
-        cy.get('#admin-circle-create input[name="subtitle"]').clear().type(subtitle);
-        cy.get('#admin-circle-create input[name="subtitle"]').should('have.value', subtitle);
-        cy.get('#admin-circle-create [name="description"] [contenteditable="true"]').clear().type(description);
-        cy.get('#admin-circle-create [name="description"] [contenteditable="true"]').should('have.value', description);
+        cy.get('#admin-circles-create input[name="name"]').clear().type(channelName);
+        cy.get('#admin-circles-create input[name="name"]').should('have.value', channelName);
+        cy.get('#admin-circles-create input[name="subtitle"]').clear().type(subtitle);
+        cy.get('#admin-circles-create input[name="subtitle"]').should('have.value', subtitle);
+        cy.get('#admin-circles-create [name="description"] [contenteditable="true"]').clear().type(description);
+        cy.get('#admin-circles-create [name="description"] [contenteditable="true"]').should('have.value', description);
       });
     });
     it('should click on create channel button', () => {
-      cy.get('#admin-circle-create input[type="submit"]').click();
+      cy.get('#admin-circles-create input[type="submit"]').click();
     });
     it('should land on channels list screen', () => {
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin');
+        expect(loc.pathname).to.eq('/admin-circles');
       });
     });
     it('should land newly created channel on channels list screen', () => {
@@ -92,9 +92,9 @@ context('Create Channel Browser Testing', () => {
         description = 'Test Description ',
         subtitle = 'Test Subtitle ';
     it('should visit the channel creation screen', () => {
-      cy.visit('/admin/admin-circle-create');
+      cy.visit('/admin-circles-create');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-circle-create');
+        expect(loc.pathname).to.eq('/admin-circles-create');
       });
     });
     it('should enter correct channel data', () => {
@@ -102,20 +102,20 @@ context('Create Channel Browser Testing', () => {
         channelName += num;
         description += num;
         subtitle += num;
-        cy.get('#admin-circle-create input[name="name"]').clear().type(channelName);
-        cy.get('#admin-circle-create input[name="name"]').should('have.value', channelName);
-        cy.get('#admin-circle-create input[name="subtitle"]').clear().type(subtitle);
-        cy.get('#admin-circle-create input[name="subtitle"]').should('have.value', subtitle);
-        cy.get('#admin-circle-create [name="description"] [contenteditable="true"]').clear().type(description);
-        cy.get('#admin-circle-create [name="description"] [contenteditable="true"]').should('have.value', description);
+        cy.get('#admin-circles-create input[name="name"]').clear().type(channelName);
+        cy.get('#admin-circles-create input[name="name"]').should('have.value', channelName);
+        cy.get('#admin-circles-create input[name="subtitle"]').clear().type(subtitle);
+        cy.get('#admin-circles-create input[name="subtitle"]').should('have.value', subtitle);
+        cy.get('#admin-circles-create [name="description"] [contenteditable="true"]').clear().type(description);
+        cy.get('#admin-circles-create [name="description"] [contenteditable="true"]').should('have.value', description);
       });
     });
     it('should click on create channel button', () => {
-      cy.get('#admin-circle-create input[type="submit"]').click();
+      cy.get('#admin-circles-create input[type="submit"]').click();
     });
     it('should land on channels list screen', () => {
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin');
+        expect(loc.pathname).to.eq('/admin-circles');
       });
     });
     it('should land newly created channel on channels list screen', () => {
diff --git a/cypress/integration/create-project.spec.js b/cypress/integration/create-project.spec.js
index 690ef35..8a22945 100644
--- a/cypress/integration/create-project.spec.js
+++ b/cypress/integration/create-project.spec.js
@@ -16,9 +16,9 @@ context('Create Project Browser Testing', () => {
         customerName = 'Test Customer ',
         description = 'Test Description ';
     it('should visit the project creation screen', () => {
-      cy.visit('/admin/admin-projects/admin-project-create');
+      cy.visit('/admin-projects-create');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-projects/admin-project-create');
+        expect(loc.pathname).to.eq('/admin-projects-create');
       });
     });
     it('should enter correct project data', () => {
@@ -26,20 +26,20 @@ context('Create Project Browser Testing', () => {
         projectName += num;
         customerName += num;
         description += num;
-        cy.get('#admin-project-create input[name="customer.name"]').clear().type(customerName);
-        cy.get('#admin-project-create input[name="customer.name"]').should('have.value', customerName);
-        cy.get('#admin-project-create input[name="name"]').clear().type(projectName);
-        cy.get('#admin-project-create input[name="name"]').should('have.value', projectName);
-        cy.get('#admin-project-create [name="description"] [contenteditable="true"]').clear().type(description);
-        cy.get('#admin-project-create [name="description"] [contenteditable="true"]').should('have.value', description);
+        cy.get('#admin-projects-create input[name="customer.name"]').clear().type(customerName);
+        cy.get('#admin-projects-create input[name="customer.name"]').should('have.value', customerName);
+        cy.get('#admin-projects-create input[name="name"]').clear().type(projectName);
+        cy.get('#admin-projects-create input[name="name"]').should('have.value', projectName);
+        cy.get('#admin-projects-create [name="description"] [contenteditable="true"]').clear().type(description);
+        cy.get('#admin-projects-create [name="description"] [contenteditable="true"]').should('have.value', description);
       });
     });
     it('should click on create project button', () => {
-      cy.get('#admin-project-create input[type="submit"]').click();
+      cy.get('#admin-projects-create input[type="submit"]').click();
     });
     it('should land on projects list screen', () => {
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-projects');
+        expect(loc.pathname).to.eq('/admin-projects');
       });
     });
     it('should land newly created project on projects list screen', () => {
@@ -54,9 +54,9 @@ context('Create Project Browser Testing', () => {
         customerName = 'Test Customer ',
         description = 'Test Description ';
     it('should visit the project creation screen', () => {
-      cy.visit('/admin/admin-projects/admin-project-create');
+      cy.visit('/admin-projects-create');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-projects/admin-project-create');
+        expect(loc.pathname).to.eq('/admin-projects-create');
       });
     });
     it('should enter correct project data', () => {
@@ -64,20 +64,20 @@ context('Create Project Browser Testing', () => {
         projectName += num;
         customerName += num;
         description += num;
-        cy.get('#admin-project-create input[name="customer.name"]').clear().type(customerName);
-        cy.get('#admin-project-create input[name="customer.name"]').should('have.value', customerName);
-        cy.get('#admin-project-create input[name="name"]').clear().type(projectName);
-        cy.get('#admin-project-create input[name="name"]').should('have.value', projectName);
-        cy.get('#admin-project-create [name="description"] [contenteditable="true"]').clear().type(description);
-        cy.get('#admin-project-create [name="description"] [contenteditable="true"]').should('have.value', description);
+        cy.get('#admin-projects-create input[name="customer.name"]').clear().type(customerName);
+        cy.get('#admin-projects-create input[name="customer.name"]').should('have.value', customerName);
+        cy.get('#admin-projects-create input[name="name"]').clear().type(projectName);
+        cy.get('#admin-projects-create input[name="name"]').should('have.value', projectName);
+        cy.get('#admin-projects-create [name="description"] [contenteditable="true"]').clear().type(description);
+        cy.get('#admin-projects-create [name="description"] [contenteditable="true"]').should('have.value', description);
       });
     });
     it('should click on create project button', () => {
-      cy.get('#admin-project-create input[type="submit"]').click();
+      cy.get('#admin-projects-create input[type="submit"]').click();
     });
     it('should land on projects list screen', () => {
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-projects');
+        expect(loc.pathname).to.eq('/admin-projects');
       });
     });
     it('should land newly created project on projects list screen', () => {
diff --git a/cypress/integration/create-user.spec.js b/cypress/integration/create-user.spec.js
index 4164a8e..b245272 100644
--- a/cypress/integration/create-user.spec.js
+++ b/cypress/integration/create-user.spec.js
@@ -25,9 +25,9 @@
 //   it('should login', () => cy.login());
 //   describe('User Creation process', () => {
 //     it('should visit the user creation screen', () => {
-//       cy.visit('/admin/admin-users/admin-users-create');
+//       cy.visit('/admin-users-create');
 //       cy.location().should((loc) => {
-//         expect(loc.pathname).to.eq('/admin/admin-users/admin-users-create');
+//         expect(loc.pathname).to.eq('/admin-users-create');
 //       });
 //     });
 //     it('should enter correct user data', () => {
@@ -45,7 +45,7 @@
 //     });
 //     it('should land on users list screen', () => {
 //       cy.location().should((loc) => {
-//         expect(loc.pathname).to.eq('/admin/admin-users');
+//         expect(loc.pathname).to.eq('/admin-users');
 //       });
 //     });
 //     it('should land newly created user on users list screen', () => {
diff --git a/cypress/integration/delete-channel.spec.js b/cypress/integration/delete-channel.spec.js
index ac97861..5a4d81d 100644
--- a/cypress/integration/delete-channel.spec.js
+++ b/cypress/integration/delete-channel.spec.js
@@ -24,9 +24,9 @@ context('Delete Channel Browser Testing', () => {
   describe('Channel Retirement process', () => {
     let channelsLength;
     it('should visit the channels list screen', () => {
-      cy.visit('/admin');
+      cy.visit('/admin-circles');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin');
+        expect(loc.pathname).to.eq('/admin-circles');
       });
     });
     it('should visit the last channel edit screen', () => {
diff --git a/cypress/integration/edit-channel.spec.js b/cypress/integration/edit-channel.spec.js
index b1a8227..501e8b7 100644
--- a/cypress/integration/edit-channel.spec.js
+++ b/cypress/integration/edit-channel.spec.js
@@ -24,9 +24,9 @@ context('Edit Channel Browser Testing', () => {
   it('should login', () => cy.login());
   describe('Channel Edition process', () => {
     it('should visit the channel list screen', () => {
-      cy.visit('/admin');
+      cy.visit('/admin-circles');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin');
+        expect(loc.pathname).to.eq('/admin-circles');
       });
     });
     it('should visit the last channel edit screen', () => {
diff --git a/cypress/integration/edit-project.spec.js b/cypress/integration/edit-project.spec.js
index f3d7c54..171105b 100644
--- a/cypress/integration/edit-project.spec.js
+++ b/cypress/integration/edit-project.spec.js
@@ -26,9 +26,9 @@ context('Edit Project Browser Testing', () => {
   it('should login', () => cy.login());
   describe('Project Edition process', () => {
     it('should visit the project list screen', () => {
-      cy.visit('/admin/admin-projects');
+      cy.visit('/admin-projects');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-projects');
+        expect(loc.pathname).to.eq('/admin-projects');
       });
     });
     it('should visit the last project edit screen', () => {
diff --git a/cypress/integration/leave-channel.spec.js b/cypress/integration/leave-channel.spec.js
index 3b762c3..9895e86 100644
--- a/cypress/integration/leave-channel.spec.js
+++ b/cypress/integration/leave-channel.spec.js
@@ -24,9 +24,9 @@ context('Leave Channel Browser Testing', () => {
   it('should login', () => cy.login());
   describe('Channel Leaving process', () => {
     it('should visit the channels list screen', () => {
-      cy.visit('/admin');
+      cy.visit('/admin-circles');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin');
+        expect(loc.pathname).to.eq('/admin-circles');
       });
     });
     it('should click the last channel leave button', () => {
diff --git a/cypress/integration/leave-project.spec.js b/cypress/integration/leave-project.spec.js
index 886d3a2..778717d 100644
--- a/cypress/integration/leave-project.spec.js
+++ b/cypress/integration/leave-project.spec.js
@@ -24,9 +24,9 @@ context('Leave Project Browser Testing', () => {
   it('should login', () => cy.login());
   describe('Project Leaving process', () => {
     it('should visit the projects list screen', () => {
-      cy.visit('/admin/admin-projects');
+      cy.visit('/admin-projects');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-projects');
+        expect(loc.pathname).to.eq('/admin-projects');
       });
     });
     it('should click the last project leave button', () => {
diff --git a/cypress/integration/retire-channel.spec.js b/cypress/integration/retire-channel.spec.js
index 6ae42d2..d7c3bf6 100644
--- a/cypress/integration/retire-channel.spec.js
+++ b/cypress/integration/retire-channel.spec.js
@@ -24,9 +24,9 @@ context('Retire Channel Browser Testing', () => {
   describe('Channel Retirement process', () => {
     let channelsLength;
     it('should visit the channels list screen', () => {
-      cy.visit('/admin');
+      cy.visit('/admin-circles');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin');
+        expect(loc.pathname).to.eq('/admin-circles');
       });
     });
     it('should visit the last channel edit screen', () => {
diff --git a/cypress/integration/retire-project.spec.js b/cypress/integration/retire-project.spec.js
index b54b90d..e1fc249 100644
--- a/cypress/integration/retire-project.spec.js
+++ b/cypress/integration/retire-project.spec.js
@@ -24,9 +24,9 @@ context('Retire Project Browser Testing', () => {
   describe('Project Retirement process', () => {
     let projectsLength;
     it('should visit the projects list screen', () => {
-      cy.visit('/admin/admin-projects');
+      cy.visit('/admin-projects');
       cy.location().should((loc) => {
-        expect(loc.pathname).to.eq('/admin/admin-projects');
+        expect(loc.pathname).to.eq('/admin-projects');
       });
     });
     it('should visit the last project edit screen', () => {
diff --git a/cypress/integration/signin.spec.js b/cypress/integration/signin.spec.js
index 53457ed..adf1238 100644
--- a/cypress/integration/signin.spec.js
+++ b/cypress/integration/signin.spec.js
@@ -58,12 +58,12 @@ context('Browser testing', () => {
 //        it('should navigate the Administration from left menu', () => {
 //          cy.get('.create > solid-link').click();
 //          cy.get('#admin-circles > .content-box > .content-box__header > .without-margin').contains('Administration');
-//          cy.get('#admin-circle-list > .content-box__info > .admin-header > .admin-header__title').contains('Circles');
+//          cy.get('#admin-circles > .content-box__info > .admin-header > .admin-header__title').contains('Circles');
 //        });
 //        it('should navigate to Circle creation', () => {
-//          cy.get('#admin-circle-list > .content-box__info > .admin-header > .button').click();
+//          cy.get('#admin-circles > .content-box__info > .admin-header > .button').click();
 //          cy.location().should((loc) => {
-//            expect(loc.pathname).to.contain('admin-circle-create');
+//            expect(loc.pathname).to.contain('admin-circles-create');
 //          });
 //        });
 //        var name = new Uint32Array(1);
@@ -72,8 +72,8 @@ context('Browser testing', () => {
 //        it('should allow Circle Creation', () => {
 //          cy.get('form > solid-form-label-text[name="name"] > label > input').type(name);
 //          cy.get('.content-box__info > solid-form > form > solid-form-label-text[name="description"] > label > input').type('With a great description!');
-//          cy.get('#admin-circle-create > .content-box__info > solid-form > form > [type="submit"]').click();
-//          cy.get('#admin-circle-list > div > div.table > solid-display').contains(name);
+//          cy.get('#admin-circles-create > .content-box__info > solid-form > form > [type="submit"]').click();
+//          cy.get('#admin-circles > div > div.table > solid-display').contains(name);
 //        });
 //        it('should open the circle information page', () => {
 //          cy.screenshot();
diff --git a/package-lock.json b/package-lock.json
index 225a375..39208a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2271,11 +2271,18 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "requires": {
+        "cross-spawn": "^7.0.1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -2286,7 +2293,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
           "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
           "requires": {
             "shebang-regex": "^3.0.0"
           }
@@ -2294,14 +2300,12 @@
         "shebang-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
         },
         "which": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
           "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
           "requires": {
             "isexe": "^2.0.0"
           }
@@ -5273,8 +5277,7 @@
     "path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
     },
     "path-parse": {
       "version": "1.0.6",
diff --git a/package.json b/package.json
index 7b603c6..dc190d3 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "prebuild": "rimraf build",
-    "build": "NODE_ENV='production' node internal/parcel.js",
+    "build": "cross-env NODE_ENV='production' node internal/parcel.js",
     "watch": "rimraf build .cache && node internal/parcel.js",
     "cypress:open": "cypress open",
     "cypress:verify": "cypress verify",
@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@startinblox/hubl-styling-framework": "^1.4.4",
+    "cross-env": "^7.0.3",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",
     "parcel-bundler": "^1.12.4",
diff --git a/src/dependencies.pug b/src/dependencies.pug
index ed6c651..aa2cedc 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -24,16 +24,16 @@ if endpoints.get
     //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
 
   if endpoints.get.joboffers
-    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.3" defer)
-    script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@beta" defer)
+    //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
 
   if endpoints.get.uploads && endpoints.get.skills && endpoints.get.users
-    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.4" defer)
-    script(type="module" src="/lib/solid-directory/dist/index.js" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@beta" defer)
+    //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
 
   if endpoints.get.dashboards
-    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.7" defer)
-    script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@beta" defer)
+    //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
   if endpoints.get.users
     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.7" defer)
diff --git a/src/index.pug b/src/index.pug
index ed2d4dd..8d7a8b5 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -38,10 +38,10 @@ html(lang="en")
 
     script(src="index.js" defer)
 
-  body
+  body.notLoggedIn(style='visibility:hidden;')
     if endpoints.get && endpoints.post
 
-      //- include views/partials/notifications.pug
+      include views/partials/notifications.pug
       include views/partials/widgets.pug
 
       header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection
@@ -50,7 +50,7 @@ html(lang="en")
       nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu
         include views/partials/menu-left.pug
 
-      main#content.segment.lg-three-quarter.sm-full.text-top.notLoggedIn
+      main#content.segment.lg-three-quarter.sm-full.text-top
 
         if endpoints.get.dashboards
           #dashboard(hidden, data-view="dashboard").scrollbar-content
@@ -101,7 +101,7 @@ html(lang="en")
           #resources(hidden, data-view="resources")
             include views/page-resources.pug
 
-        #admin(hidden, data-view="admin", no-render).with-sidebar.whitespace-normal
+        #admin
           include views/page-admin.pug
 
         #about(hidden, data-view="about", no-render)
diff --git a/src/scripts/firefox-scroll.js b/src/scripts/firefox-scroll.js
index 3b9bb18..c342807 100644
--- a/src/scripts/firefox-scroll.js
+++ b/src/scripts/firefox-scroll.js
@@ -1,60 +1,60 @@
-document.addEventListener("DOMContentLoaded", () => {
-  const resizeChat = () => {
-    let isMobile = window.innerWidth < 993;
-    let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-    let isFirefoxMobile = navigator.platform.toLowerCase().indexOf("mobile") > -1 || navigator.platform.toLowerCase().indexOf("tablet") > -1;
-    let chatBox = Array.from(document.querySelectorAll("solid-xmpp-chat"))
-      .map((el) => el.shadowRoot ? el.shadowRoot.getElementById("conversejs") : false)
-      .filter((el) => el)
-      .pop();
-    if (chatBox) {
-      let chatTextArea = chatBox.querySelector(".message-form-container");
-      let ischatTextArea = setInterval(() => {
-        chatTextArea = chatBox.querySelector(".message-form-container");
-        if (chatTextArea) {
-          clearInterval(ischatTextArea);
-          if (
-            chatBox.getBoundingClientRect().height -
-            chatTextArea.getBoundingClientRect().height !=
-            chatTextArea.offsetTop
-          ) {
-            let viewportChat = Array.from(
-              document.querySelectorAll("#viewport .chat-view")
-            );
-            viewportChat.forEach(
-              (c) => (c.style.height = isMobile ? (isFirefox && isFirefoxMobile) ? "calc(100vh - 106px - 57px)" : "calc(100vh - 106px)" : "calc(100vh - 64px - 83px)")
-            );
-          }
-        }
-      }, 15);
-    }
-  };
-  resizeChat();
+// document.addEventListener("DOMContentLoaded", () => {
+//   const resizeChat = () => {
+//     let isMobile = window.innerWidth < 993;
+//     let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+//     let isFirefoxMobile = navigator.platform.toLowerCase().indexOf("mobile") > -1 || navigator.platform.toLowerCase().indexOf("tablet") > -1;
+//     let chatBox = Array.from(document.querySelectorAll("solid-xmpp-chat"))
+//       .map((el) => el.shadowRoot ? el.shadowRoot.getElementById("conversejs") : false)
+//       .filter((el) => el)
+//       .pop();
+//     if (chatBox) {
+//       let chatTextArea = chatBox.querySelector(".message-form-container");
+//       let ischatTextArea = setInterval(() => {
+//         chatTextArea = chatBox.querySelector(".message-form-container");
+//         if (chatTextArea) {
+//           clearInterval(ischatTextArea);
+//           if (
+//             chatBox.getBoundingClientRect().height -
+//             chatTextArea.getBoundingClientRect().height !=
+//             chatTextArea.offsetTop
+//           ) {
+//             let viewportChat = Array.from(
+//               document.querySelectorAll("#viewport .chat-view")
+//             );
+//             viewportChat.forEach(
+//               (c) => (c.style.height = isMobile ? (isFirefox && isFirefoxMobile) ? "calc(100vh - 106px - 57px)" : "calc(100vh - 106px)" : "calc(100vh - 64px - 83px)")
+//             );
+//           }
+//         }
+//       }, 15);
+//     }
+//   };
+//   resizeChat();
 
-  let isbody = setInterval(() => {
-    if (document.body) {
-      clearInterval(isbody);
-      resizeChat();
-    }
-  }, 50);
+//   let isbody = setInterval(() => {
+//     if (document.body) {
+//       clearInterval(isbody);
+//       resizeChat();
+//     }
+//   }, 50);
 
-  window.addEventListener("load", () => {
-    setTimeout(() => {
-      resizeChat();
-    }, 0);
-  });
+//   window.addEventListener("load", () => {
+//     setTimeout(() => {
+//       resizeChat();
+//     }, 0);
+//   });
 
-  let windowResizing;
-  window.addEventListener("resize", () => {
-    windowResizing = setTimeout(() => {
-      clearInterval(windowResizing);
-      resizeChat();
-    }, 50);
-  });
+//   let windowResizing;
+//   window.addEventListener("resize", () => {
+//     windowResizing = setTimeout(() => {
+//       clearInterval(windowResizing);
+//       resizeChat();
+//     }, 50);
+//   });
 
-  document.addEventListener("navigate", () => {
-    setTimeout(() => {
-      resizeChat();
-    }, 0);
-  });
-});
\ No newline at end of file
+//   document.addEventListener("navigate", () => {
+//     setTimeout(() => {
+//       resizeChat();
+//     }, 0);
+//   });
+// });
\ No newline at end of file
diff --git a/src/scripts/keyboard-shortcuts.js b/src/scripts/keyboard-shortcuts.js
deleted file mode 100644
index 5cc1239..0000000
--- a/src/scripts/keyboard-shortcuts.js
+++ /dev/null
@@ -1,10 +0,0 @@
-document.addEventListener("keydown", function (e) {
-  /*
-      CTRL + K : Focus on the user search
-      Keycode 75
-  */
-  if(e.ctrlKey && e.which == 75) {
-    document.querySelector('hubl-search-users > input').focus();
-    e.preventDefault();
-  }
-});
\ No newline at end of file
diff --git a/src/scripts/login-element-visibility.js b/src/scripts/login-element-visibility.js
index 689dbb2..5564e30 100644
--- a/src/scripts/login-element-visibility.js
+++ b/src/scripts/login-element-visibility.js
@@ -7,9 +7,6 @@ document.addEventListener("DOMContentLoaded", function () {
         document
           .querySelectorAll(".notLoggedIn")
           .forEach(el => (el.style.visibility = "visible"));
-        document
-          .querySelector('.loggedIn')
-          .setAttribute("style", "display:none !important");
       }
     });
 });
\ No newline at end of file
diff --git a/src/scripts/menu-toggle.js b/src/scripts/menu-toggle.js
deleted file mode 100644
index 8f96670..0000000
--- a/src/scripts/menu-toggle.js
+++ /dev/null
@@ -1,11 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
-  
-    //- Toggle sub-menus
-    menuWrappers.forEach(menuWrapper => {
-      const menu = menuWrapper.querySelector(".menu");
-      menu.addEventListener("click", e => {
-        menuWrapper.classList.toggle("is-closed");
-      });
-    });
-});  
\ No newline at end of file
diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js
index 1ac1f3e..3154e19 100644
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@@ -1,7 +1,7 @@
 // auxiliary function closes the user profile menu
 function closeUserControls() {
-    let userControls = document.querySelector("#user-controls");
-    if (userControls) userControls.removeAttribute("open");
+    let userControls = Array.from(document.querySelectorAll(".user-controls"));
+    userControls.forEach(e => e.removeAttribute("open"));
   }
   
   function closeLeftMenu() {
@@ -30,13 +30,39 @@ function closeUserControls() {
 document.addEventListener("DOMContentLoaded", function() {
   
     //- View change event
-    window.addEventListener("navigate", () => {
+    window.addEventListener("navigate", e => {
+      if(e.detail.route.startsWith('admin-')) {
+        document.querySelector('.only-on-admin').removeAttribute('hidden');
+      } else {
+        document.querySelector('.only-on-admin').setAttribute('hidden','');
+      }
+      if(e.detail.route.startsWith("admin-communities")) {
+        document.querySelector('solid-route[name="admin-communities"]').setAttribute('active','');
+        document.querySelector('.jsRightMenu solid-link[next="admin-communities"]').setAttribute('active','');
+      } else {
+        document.querySelector('solid-route[name="admin-communities"]').removeAttribute('active');
+        document.querySelector('.jsRightMenu solid-link[next="admin-communities"]').removeAttribute('active');
+      }
+      if(e.detail.route.startsWith("admin-circles")) {
+        document.querySelector('solid-route[name="admin-circles"]').setAttribute('active','');
+        document.querySelector('.jsRightMenu solid-link[next="admin-circles"]').setAttribute('active','');
+      } else {
+        document.querySelector('solid-route[name="admin-circles"]').removeAttribute('active');
+        document.querySelector('.jsRightMenu solid-link[next="admin-circles"]').removeAttribute('active');
+      }
+      if(e.detail.route.startsWith("admin-projects")) {
+        document.querySelector('solid-route[name="admin-projects"]').setAttribute('active','');
+        document.querySelector('.jsRightMenu solid-link[next="admin-projects"]').setAttribute('active','');
+      } else {
+        document.querySelector('solid-route[name="admin-projects"]').removeAttribute('active');
+        document.querySelector('.jsRightMenu solid-link[next="admin-projects"]').removeAttribute('active');
+      }
       closeLeftMenu();
       closeUserControls();
     });
     // Document -> close menu
     document.addEventListener("click", event => {
-      if (!event.target.closest("#user-controls")) {
+      if (!event.target.closest(".user-controls")) {
         closeUserControls();
       }
       if (
diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss
index bdc9673..24316ea 100644
--- a/src/styles/content/_index.scss
+++ b/src/styles/content/_index.scss
@@ -71,6 +71,10 @@ main {
     /* Styles use with JS to open/close the sidebar */
     &.jsRightMenu {
       display: block;
+      solid-link[active] {
+        color: white;
+        background: var(--color-heading);
+      }
     }
 
     &.jsRightMenu:not([open]) {
diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss
index fc4cf26..3b9f0eb 100644
--- a/src/styles/header/_index.scss
+++ b/src/styles/header/_index.scss
@@ -46,10 +46,11 @@ header {
       }
 
       .solid-notifications__button {
+        margin-top: -9px;
         font-size: 24px;
 
         &::before {
-          margin-left: 0;
+          margin-left: -9px;
         }
 
         &:hover {
@@ -61,7 +62,7 @@ header {
         }
 
         .solid-notifications__counter {
-          left: 21px;
+          left: 12px;
           position: absolute;
           top: 1px;
 
@@ -170,7 +171,7 @@ header {
 
             .solid-notification__avatar {
               align-items: center;
-              background: var(--color-grey);
+              background: #f6f6f6;
               display: flex;
               height: 35px;
               justify-content: center;
@@ -182,7 +183,7 @@ header {
               width: 35px;
 
               img {
-                background-color: var(--color-grey);
+                background-color: #f6f6f6;
                 height: 100%;
                 object-fit: cover;
                 object-position: center center;
@@ -400,4 +401,22 @@ header {
       }
     }
   }
+  .solid-notifications__item:hover * {
+    color: var(--color-secondary)!important;
+  }
+  .solid-notification__content {
+    max-width: calc(100% - 65px);
+  }
+  .solid-notification__summary {
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+  }
+  .solid-notification__title {
+    overflow: hidden;
+    white-space: break-spaces;
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+  }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c00a87a..1c7ee4f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -30,8 +30,6 @@ solid-display>div {
   }
 }
 
-
-
 $small: "max-width: 768px";
 
 .segment {
@@ -106,8 +104,6 @@ $small: "max-width: 768px";
   }
 }
 
-
-
 @import 'header/_index';
 @import 'left-nav/_index';
 @import 'content/_index';
@@ -116,3 +112,10 @@ $small: "max-width: 768px";
 @import 'profile/_index';
 @import 'job-offers/_index';
 @import 'chat/_index';
+
+nav#main__menu {
+  width: 250px;
+}
+main#content {
+  width: calc(100% - 250px);
+}
\ No newline at end of file
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index 6deea1e..1f38b21 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -1,31 +1,42 @@
-.scrollbar-content.views-container.sidebar-is-closed
-  if endpoints.circles || (endpoints.get && endpoints.get.circles)
-    #admin-circles(hidden, data-view="admin-circles")
-      include partials/admin/page-admin-circles.pug
-  if endpoints.projects || (endpoints.get && endpoints.get.projects)
-    #admin-projects(hidden, data-view="admin-projects")
-      include partials/admin/page-admin-projects.pug
-  if (endpoints.users || (endpoints.get && endpoints.get.users))
-    #admin-communities(hidden, data-view="admin-communities")
-      include partials/admin/page-admin-communities.pug
-nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
-  solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='admin-circles')
-    ul
-      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
-        span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
-        a(data-trans='admin.menuRight.fold')
-      if (endpoints.users || (endpoints.get && endpoints.get.users))
-        solid-route.segment.lg-full.sm-full(name='admin-communities')
-          li.segment.lg-full.sm-full.padding-medium
-            span.icon.ci-networking.icon-xlarge.margin-right-medium
-            a(data-trans='admin.menuRight.community')
-      if endpoints.circles || (endpoints.get && endpoints.get.circles)
-        solid-route.segment.lg-full.sm-full(name='admin-circles')
-          li.segment.lg-full.sm-full.padding-medium
-            span.icon.ci-bubble-add.icon-xlarge.margin-right-medium
-            a(data-trans='admin.menuRight.circles')
-      if endpoints.projects || (endpoints.get && endpoints.get.projects)
-        solid-route.segment.lg-full.sm-full(name='admin-projects')
-          li.segment.lg-full.sm-full.padding-medium
-            span.icon.ci-add.icon-xlarge.margin-right-medium
-            a(data-trans='admin.menuRight.projects')
+.with-sidebar.whitespace-normal.only-on-admin(hidden)
+  .scrollbar-content.views-container.sidebar-is-closed
+    if endpoints.circles || (endpoints.get && endpoints.get.circles)
+      #admin-circles(hidden, data-view="admin-circles", no-render)
+        include partials/admin/page-admin-circles.pug
+      #circle-left(hidden, data-view="circle-left", no-render)
+        include partials/circle/page-circle-left.pug
+      #admin-circles-create(hidden, data-view="admin-circles-create", no-render)
+        include partials/admin/page-admin-circles-create.pug
+    if endpoints.projects || (endpoints.get && endpoints.get.projects)
+      #admin-projects(hidden, data-view="admin-projects", no-render)
+        include partials/admin/page-admin-projects.pug
+      #admin-projects-create(hidden, data-view="admin-projects-create", no-render)
+        include partials/admin/page-admin-projects-create.pug
+      #project-left(hidden, data-view="project-left", no-render)
+        include partials/project/page-project-left.pug
+    if (endpoints.users || (endpoints.get && endpoints.get.users))
+      #admin-communities(hidden, data-view="admin-communities")
+        include partials/admin/page-admin-communities.pug
+      #admin-users-create(hidden, data-view="admin-users-create", no-render)
+        include partials/admin/page-admin-users-create.pug
+  nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
+    .segment.whitespace-normal.text-color-heading.text-bold
+      ul
+        li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
+          span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
+          a(data-trans='admin.menuRight.fold')
+        if (endpoints.users || (endpoints.get && endpoints.get.users))
+          solid-link.segment.lg-full.sm-full(next='admin-communities')
+            li.segment.lg-full.sm-full.padding-medium
+              span.icon.ci-networking.icon-xlarge.margin-right-medium
+              a(data-trans='admin.menuRight.community')
+        if endpoints.circles || (endpoints.get && endpoints.get.circles)
+          solid-link.segment.lg-full.sm-full(next='admin-circles')
+            li.segment.lg-full.sm-full.padding-medium
+              span.icon.ci-bubble-add.icon-xlarge.margin-right-medium
+              a(data-trans='admin.menuRight.circles')
+        if endpoints.projects || (endpoints.get && endpoints.get.projects)
+          solid-link.segment.lg-full.sm-full(next='admin-projects')
+            li.segment.lg-full.sm-full.padding-medium
+              span.icon.ci-add.icon-xlarge.margin-right-medium
+              a(data-trans='admin.menuRight.projects')
diff --git a/src/views/partials/admin/page-admin-circles-create.pug b/src/views/partials/admin/page-admin-circles-create.pug
index 8e55513..1c2ce92 100644
--- a/src/views/partials/admin/page-admin-circles-create.pug
+++ b/src/views/partials/admin/page-admin-circles-create.pug
@@ -2,7 +2,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-
   div.segment.lg-half  
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
   div.segment.lg-half.sm-hidden.text-right
-    solid-link(class="backlink", bind-resources, next='admin-circle-list' data-trans='circle.create.backlink')
+    solid-link(class="backlink", bind-resources, next='admin-circles' data-trans='circle.create.backlink')
 
 div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-circles-create.loader.loader-top
diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug
index 3d1a476..743da20 100644
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@@ -1,137 +1,124 @@
-solid-router(default-route='admin-circle-list', hidden)
-  solid-route(name='admin-circle-list')
-  solid-route(name='admin-circle-create')
-  solid-route(name='circle-left')
+solid-widget(name='hubl-circle-owner')
+  template
+    solid-display.labelled-avatar.two-lines(
+      data-src='${await value}'
+      fields='segment1(account.picture), segment2(line1(name), line2(at, username))'
 
-#circle-left(hidden, data-view="circle-left")
-  include ../circle/page-circle-left.pug
+      class-segment1='segment'
+      class-account.picture='avatar'
 
-#admin-circle-list(hidden, data-view="admin-circle-list")
+      class-segment2='segment lg-three-quarter margin-left-xsmall'
+      class-line1='block'
+      class-name='text-small text-semibold text-color-heading text-sub'
+      class-line2='block text-xsmall'
 
-  solid-widget(name='hubl-circle-owner')
-    template
-      solid-display.labelled-avatar.two-lines(
-        data-src='${await value}'
-        fields='segment1(account.picture), segment2(line1(name), line2(at, username))'
+      widget-account.picture='hubl-user-avatar'
 
-        class-segment1='segment'
-        class-account.picture='avatar'
+      value-at='@'
+    )
 
-        class-segment2='segment lg-three-quarter margin-left-xsmall'
-        class-line1='block'
-        class-name='text-small text-semibold text-color-heading text-sub'
-        class-line2='block text-xsmall'
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+  h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
 
-        widget-account.picture='hubl-user-avatar'
+div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal
 
-        value-at='@'
+  div#loader-admin-circles.loader.loader-top
+    div
+    div
+    div
+    div
+
+  div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
+    div.segment.lg-half.sm-full
+      h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
+    div.segment.lg-half.sm-full.text-right
+      solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
+        solid-link(
+          class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
+          next='admin-circles-create'
+          data-trans='circle.list.buttonCreate'
+        )
+
+  .segment.table-wrapper
+    .table
+
+      div.table-header.bg-color-third.text-color-heading
+        div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader1')
+        div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader2')
+        div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader3')
+
+      solid-widget(name='hubl-admin-circle-leave-button')
+        template
+          solid-delete(
+            class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+            data-src="${src}"
+            data-label=''
+            data-trans='data-label=circle.list.buttonQuit'
+          )
+          hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${src}')
+          hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${src}')
+          hubl-reactivity(bind-user nested-field="circles" target-src='${src}')
+          if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
+            hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${src}`)
+            hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${src}`)
+
+      solid-display(
+        class='table-body'
+        bind-user
+        nested-field='circles'
+        fields='cell1(circle.name, circle.subtitle), cell2(circle.owner), cell3(leaveButton)'
+        loader-id='loader-admin-circles'
+
+        class-cell1='segment table-cell lg-third whitespace-normal'
+        class-cell2='segment table-cell lg-third text-center text-left'
+        class-cell3='segment table-cell lg-third text-center'
+
+        class-circle.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
+        class-circle.subtitle='segment lg-full sm-full'
+
+        action-leaveButton="joinButton"
+        widget-leaveButton="hubl-admin-circle-leave-button"
+        widget-circle.owner='hubl-circle-owner'
+
+        order-by="circle.name"
       )
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-    h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
+      solid-widget(name='hubl-admin-circle-join-button')
+        template
+          solid-form(
+            class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
+            data-src='${value}'
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal
+            fields='user.username'
+            value-user.username='hubl-workaround-493'
+            widget-user.username='solid-form-hidden'
 
-    div#loader-admin-circles.loader.loader-top
-      div
-      div
-      div
-      div
-
-    div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
-      div.segment.lg-half.sm-full
-        h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
-      div.segment.lg-half.sm-full.text-right
-        solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
-          solid-link(
-            class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
-            next='admin-circle-create'
-            data-trans='circle.list.buttonCreate'
+            submit-button=''
+            data-trans='submit-button=circle.list.buttonJoin'
           )
+          hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}')
+          hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${value}')
+          hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
+          if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
+            hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${value}`)
+            hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${value}`)
 
-    .segment.table-wrapper
-      .table
+      solid-display(
+        class='table-body'
 
-        div.table-header.bg-color-third.text-color-heading
-          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader1')
-          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader2')
-          div.segment.table-cell.lg-third(data-trans='circle.list.tableHeader3')
+        data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
+        fields='cell1(name, subtitle), cell2(owner), cell3(members)'
+        loader-id='loader-admin-circles'
 
-        solid-widget(name='hubl-admin-circle-leave-button')
-          template
-            solid-delete(
-              class='button text-xsmall text-bold text-uppercase color-secondary bordered'
-              data-src="${src}"
-              data-label=''
-              data-trans='data-label=circle.list.buttonQuit'
-            )
-            hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${src}')
-            hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${src}')
-            hubl-reactivity(bind-user nested-field="circles" target-src='${src}')
-            if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
-              hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${src}`)
-              hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${src}`)
+        class-cell1='segment table-cell lg-third whitespace-normal'
+        class-cell2='segment table-cell lg-third text-center text-left'
+        class-cell3='segment table-cell lg-third text-center'
 
-        solid-display(
-          class='table-body'
-          bind-user
-          nested-field='circles'
-          fields='cell1(circle.name, circle.subtitle), cell2(circle.owner), cell3(leaveButton)'
-          loader-id='loader-admin-circles'
+        class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
+        class-subtitle='segment lg-full sm-full'
 
-          class-cell1='segment table-cell lg-third whitespace-normal'
-          class-cell2='segment table-cell lg-third text-center text-left'
-          class-cell3='segment table-cell lg-third text-center'
+        widget-owner='hubl-circle-owner'
+        widget-members="hubl-admin-circle-join-button"
 
-          class-circle.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-          class-circle.subtitle='segment lg-full sm-full'
-
-          action-leaveButton="joinButton"
-          widget-leaveButton="hubl-admin-circle-leave-button"
-          widget-circle.owner='hubl-circle-owner'
-
-          order-by="circle.name"
-        )
-
-        solid-widget(name='hubl-admin-circle-join-button')
-          template
-            solid-form(
-              class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
-              data-src='${value}'
-
-              fields='user.username'
-              value-user.username='hubl-workaround-493'
-              widget-user.username='solid-form-hidden'
-
-              submit-button=''
-              data-trans='submit-button=circle.list.buttonJoin'
-            )
-            hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}')
-            hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${value}')
-            hubl-reactivity(bind-user nested-field="circles" target-src='${value}')
-            if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
-              hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${value}`)
-              hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${value}`)
-
-        solid-display(
-          class='table-body'
-
-          data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
-          fields='cell1(name, subtitle), cell2(owner), cell3(members)'
-          loader-id='loader-admin-circles'
-
-          class-cell1='segment table-cell lg-third whitespace-normal'
-          class-cell2='segment table-cell lg-third text-center text-left'
-          class-cell3='segment table-cell lg-third text-center'
-
-          class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-          class-subtitle='segment lg-full sm-full'
-
-          widget-owner='hubl-circle-owner'
-          widget-members="hubl-admin-circle-join-button"
-
-          order-by="name"
-        )
-
-#admin-circle-create(hidden, data-view="admin-circle-create")
-  include page-admin-circles-create.pug
+        order-by="name"
+      )
diff --git a/src/views/partials/admin/page-admin-communities.pug b/src/views/partials/admin/page-admin-communities.pug
index 7bc3f56..b9e0958 100644
--- a/src/views/partials/admin/page-admin-communities.pug
+++ b/src/views/partials/admin/page-admin-communities.pug
@@ -1,7 +1,3 @@
-solid-router(default-route='admin-communities-list', hidden)
-  solid-route(name='admin-communities-list')
-  solid-route(name='admin-users-create', use-id)
-
 solid-widget(name='hubl-action-community')
   template
     solid-ac-checker(data-src="${value}", nested-field="members", permission='acl:Append')
@@ -14,42 +10,38 @@ solid-widget(name='hubl-action-community')
     solid-ac-checker(data-src="${value}", nested-field="members", no-permission='acl:Append')
       div.button.button-disabled(data-trans='communities.noPermission')
 
-#admin-communities-list(hidden, data-view="admin-communities-list")
-  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-    h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+  h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
+div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 
-    div.segment.lg-full.margin-bottom-xlarge
-      h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='communities.subTitle')
+  div.segment.lg-full.margin-bottom-xlarge
+    h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='communities.subTitle')
 
-    .segment.table-wrapper
-      .table
-        div.table-header.bg-color-third.text-color-heading
-          div.segment.table-cell.table-cell.lg-half(data-trans='communities.tableHeader1') 
-          div.segment.table-cell.table-cell.lg-half(data-trans='communities.tableHeader2')
-      
-        solid-display(
-          class='table-body'
-          bind-user
-          nested-field='communities'
-          fields='cell1(community.name), cell2(community)'
-          loader-id='loader-admin-community'
+  .segment.table-wrapper
+    .table
+      div.table-header.bg-color-third.text-color-heading
+        div.segment.table-cell.table-cell.lg-half(data-trans='communities.tableHeader1') 
+        div.segment.table-cell.table-cell.lg-half(data-trans='communities.tableHeader2')
+    
+      solid-display(
+        class='table-body'
+        bind-user
+        nested-field='communities'
+        fields='cell1(community.name), cell2(community)'
+        loader-id='loader-admin-community'
 
-          class-cell1='segment table-cell lg-half text-center'
-          class-cell2='segment table-cell lg-half text-center'
+        class-cell1='segment table-cell lg-half text-center'
+        class-cell2='segment table-cell lg-half text-center'
 
-          class-community.name='text-xlarge text-color-heading text-semibold text-letter-spacing-large ellipsis'
-          widget-community='hubl-action-community'
+        class-community.name='text-xlarge text-color-heading text-semibold text-letter-spacing-large ellipsis'
+        widget-community='hubl-action-community'
 
-          order-asc='community.name'
-        )
+        order-asc='community.name'
+      )
 
-    div#loader-admin-community.loader.loader-top
-      div
-      div
-      div
-      div
-
-#admin-users-create(hidden, data-view="admin-users-create")
-  include page-admin-users-create.pug
+  div#loader-admin-community.loader.loader-top
+    div
+    div
+    div
+    div
diff --git a/src/views/partials/admin/page-admin-projects-create.pug b/src/views/partials/admin/page-admin-projects-create.pug
index f18216d..4694c0e 100644
--- a/src/views/partials/admin/page-admin-projects-create.pug
+++ b/src/views/partials/admin/page-admin-projects-create.pug
@@ -2,7 +2,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-
   div.segment.lg-half
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.create.title')
   div.segment.lg-half.sm-hidden.text-right
-    solid-link(class="backlink right", next='admin-project-list' data-trans='project.create.backlink')
+    solid-link(class="backlink right", next='admin-projects' data-trans='project.create.backlink')
 
 div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-projects-create.loader.loader-top
diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug
index 694b7cb..5c93ddb 100644
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.pug
@@ -1,167 +1,155 @@
-solid-router(default-route='admin-project-list', hidden)
-  solid-route(name='admin-project-list')
-  solid-route(name='admin-project-create')
-  solid-route(name='project-left')
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+  h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
 
-#project-left(hidden, data-view="project-left")
-  include ../project/page-project-left.pug
+div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 
-#admin-project-list(hidden, data-view="admin-project-list")
+  div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
+    div.segment.lg-half.sm-full
+      h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle')
+    div.segment.lg-half.sm-full.text-right
+      solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
+        solid-link(
+          class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
+          next='admin-projects-create'
+          data-trans='project.list.buttonCreate'
+        )
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-    h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
+  .segment.table-wrapper
+    .table
 
-  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
+      div.table-header.bg-color-third.text-color-heading
+        div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader1')
+        div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader2')
+        div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader3')
+        div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader4')
 
-    div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
-      div.segment.lg-half.sm-full
-        h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle')
-      div.segment.lg-half.sm-full.text-right
-        solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
-          solid-link(
-            class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
-            next='admin-project-create'
-            data-trans='project.list.buttonCreate'
+      solid-widget(name="hubl-admin-project-leave-button")
+        template
+          solid-delete(
+            class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+            data-src="${src}"
+            data-label=''
+            data-trans='data-label=project.list.buttonQuit'
+          )
+          hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
+          hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
+          hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
+          if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
+            hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`)
+            hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`)
+
+      solid-widget(name='hubl-project-captain')
+        template
+          solid-display.labelled-avatar.two-lines(
+            data-src='${await value}'
+            fields='segment1(account.picture), segment2(line1(name), line2(at, username))'
+
+            class-segment1='segment'
+            class-account.picture='avatar'
+
+            class-segment2='segment lg-three-quarter margin-left-xsmall'
+            class-line1='block'
+            class-name='text-small text-semibold text-color-heading text-sub'
+            class-line2='block text-xsmall'
+
+            widget-account.picture='hubl-user-avatar'
+
+            value-at='@'
           )
 
-    .segment.table-wrapper
-      .table
+      solid-widget(name='hubl-project-admins')
+        template
+          solid-display(
+            data-src='${value}'
+            fields='user'
+            search-fields='is_admin'
+            search-value-is_admin='true'
+            search-widget-is_admin='solid-form-hidden'
+            widget-user='hubl-project-captain'
+          )
 
-        div.table-header.bg-color-third.text-color-heading
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader1')
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader2')
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader3')
-          div.segment.table-cell.lg-quarter(data-trans='project.list.tableHeader4')
+      solid-widget(name='hubl-admin-project-leave-button')
+        template
+          solid-delete(
+            class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+            data-src="${src}"
+            data-label=''
+            data-trans='data-label=project.list.buttonQuit'
+          )
 
-        solid-widget(name="hubl-admin-project-leave-button")
-          template
-            solid-delete(
-              class='button text-xsmall text-bold text-uppercase color-secondary bordered'
-              data-src="${src}"
-              data-label=''
-              data-trans='data-label=project.list.buttonQuit'
-            )
-            hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
-            hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
-            hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
-            if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
-              hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`)
-              hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`)
+      solid-display(
+        class='table-body'
 
-        solid-widget(name='hubl-project-captain')
-          template
-            solid-display.labelled-avatar.two-lines(
-              data-src='${await value}'
-              fields='segment1(account.picture), segment2(line1(name), line2(at, username))'
+        bind-user
+        nested-field="projects"
+        fields='cell1(project.customer.name, project.name), cell2(project.members), cell3(project.captain), cell4(leaveButton)'
+        loader-id='loader-admin-projects'
 
-              class-segment1='segment'
-              class-account.picture='avatar'
+        class-cell1='segment table-cell lg-quarter text-left whitespace-normal'
+        class-cell2='segment table-cell lg-quarter text-left'
+        class-cell3='segment table-cell lg-quarter text-left'
+        class-cell4='segment table-cell lg-quarter text-center'
 
-              class-segment2='segment lg-three-quarter margin-left-xsmall'
-              class-line1='block'
-              class-name='text-small text-semibold text-color-heading text-sub'
-              class-line2='block text-xsmall'
+        class-project.customer.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
+        class-project.name='segment lg-full sm-full'
 
-              widget-account.picture='hubl-user-avatar'
+        action-leaveButton="joinButton"
+        widget-leaveButton="hubl-admin-project-leave-button"
 
-              value-at='@'
-            )
+        widget-project.captain='hubl-project-captain'
+        widget-project.members='hubl-project-admins'
 
-        solid-widget(name='hubl-project-admins')
-          template
-            solid-display(
-              data-src='${value}'
-              fields='user'
-              search-fields='is_admin'
-              search-value-is_admin='true'
-              search-widget-is_admin='solid-form-hidden'
-              widget-user='hubl-project-captain'
-            )
+        order-by="project.name"
+      )
 
-        solid-widget(name='hubl-admin-project-leave-button')
-          template
-            solid-delete(
-              class='button text-xsmall text-bold text-uppercase color-secondary bordered'
-              data-src="${src}"
-              data-label=''
-              data-trans='data-label=project.list.buttonQuit'
-            )
+      solid-widget(name='hubl-admin-project-join-button')
+        template
+          solid-form(
+            class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
+            data-src='${src}'
+            nested-field="members"
 
-        solid-display(
-          class='table-body'
+            fields='user.username'
+            value-user.username='hubl-workaround-493'
+            widget-user.username='solid-form-hidden'
 
-          bind-user
-          nested-field="projects"
-          fields='cell1(project.customer.name, project.name), cell2(project.members), cell3(project.captain), cell4(leaveButton)'
-          loader-id='loader-admin-projects'
+            submit-button=''
+            data-trans='submit-button=project.list.buttonJoin'
+          )
+          hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
+          hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
+          hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
+          if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
+            hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`)
+            hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`)
 
-          class-cell1='segment table-cell lg-quarter text-left whitespace-normal'
-          class-cell2='segment table-cell lg-quarter text-left'
-          class-cell3='segment table-cell lg-quarter text-left'
-          class-cell4='segment table-cell lg-quarter text-center'
+      solid-display(
+        class='table-body'
 
-          class-project.customer.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-          class-project.name='segment lg-full sm-full'
+        data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
+        fields='cell1(customer.name, name), cell2(members), cell3(captain), cell4(joinButton)'
+        loader-id='loader-admin-projects'
 
-          action-leaveButton="joinButton"
-          widget-leaveButton="hubl-admin-project-leave-button"
+        class-cell1='segment table-cell lg-quarter text-left whitespace-normal'
+        class-cell2='segment table-cell lg-quarter text-left'
+        class-cell3='segment table-cell lg-quarter text-left'
+        class-cell4='segment table-cell lg-quarter text-center'
 
-          widget-project.captain='hubl-project-captain'
-          widget-project.members='hubl-project-admins'
+        class-customer.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellpsis'
+        class-name='segment lg-full sm-full'
 
-          order-by="project.name"
-        )
+        action-joinButton="joinButton" # Workaround: I need members two times
+        widget-joinButton="hubl-admin-project-join-button"
 
-        solid-widget(name='hubl-admin-project-join-button')
-          template
-            solid-form(
-              class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
-              data-src='${src}'
-              nested-field="members"
+        widget-captain='hubl-project-captain'
+        widget-members='hubl-project-admins'
 
-              fields='user.username'
-              value-user.username='hubl-workaround-493'
-              widget-user.username='solid-form-hidden'
+        order-by="name"
+      )
 
-              submit-button=''
-              data-trans='submit-button=project.list.buttonJoin'
-            )
-            hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
-            hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
-            hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
-            if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
-              hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`)
-              hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`)
+  div#loader-admin-projects.loader.loader-top
+    div
+    div
+    div
+    div
 
-        solid-display(
-          class='table-body'
-
-          data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
-          fields='cell1(customer.name, name), cell2(members), cell3(captain), cell4(joinButton)'
-          loader-id='loader-admin-projects'
-
-          class-cell1='segment table-cell lg-quarter text-left whitespace-normal'
-          class-cell2='segment table-cell lg-quarter text-left'
-          class-cell3='segment table-cell lg-quarter text-left'
-          class-cell4='segment table-cell lg-quarter text-center'
-
-          class-customer.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellpsis'
-          class-name='segment lg-full sm-full'
-
-          action-joinButton="joinButton" # Workaround: I need members two times
-          widget-joinButton="hubl-admin-project-join-button"
-
-          widget-captain='hubl-project-captain'
-          widget-members='hubl-project-admins'
-
-          order-by="name"
-        )
-
-    div#loader-admin-projects.loader.loader-top
-      div
-      div
-      div
-      div
-
-#admin-project-create(hidden, data-view="admin-project-create")
-  include page-admin-projects-create.pug
diff --git a/src/views/partials/admin/page-admin-users-create.pug b/src/views/partials/admin/page-admin-users-create.pug
index eede28c..124cd2f 100644
--- a/src/views/partials/admin/page-admin-users-create.pug
+++ b/src/views/partials/admin/page-admin-users-create.pug
@@ -2,7 +2,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-
   div.segment.lg-half
     h2.margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
   div.segment.lg-half.sm-hidden.text-right
-    solid-link(class="backlink", bind-resources, next='admin-communities-list' data-trans='circle.create.backlink')
+    solid-link(class="backlink", bind-resources, next='admin-communities' data-trans='circle.create.backlink')
 
 
 div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
@@ -31,7 +31,13 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-mediu
 
   div.segment.margin-bottom-medium
     div.segment
-      p.text-color-heading.text-semibold.text-xlarge.text-letter-spacing-large(data-trans='user.create.title', loader-id='loader-users-title')
+      solid-display.text-color-heading.text-semibold.text-xlarge.text-letter-spacing-large(
+        bind-resources
+        fields='text, name'
+        value-text=''
+        data-trans='value-text=user.create.title'
+        loader-id='loader-users-title'
+      )
   
   solid-form.form#selected-community(
     bind-resources
@@ -59,7 +65,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-mediu
     widget-user.username='hubl-username-field'
     widget-user.email='hubl-email-field'
 
-    next='admin-communities-list'
+    next='admin-communities'
 
     submit-button=''
     data-trans='label-user.first_name=user.create.labelFirstname;label-user.last_name=user.create.labelLastname;label-user.username=user.create.labelUsername;label-user.email=user.create.labelEmail;submit-button=user.create.buttonSubmit'
diff --git a/src/views/partials/circle/page-circle-left.pug b/src/views/partials/circle/page-circle-left.pug
index 8bb57e6..55b04ec 100644
--- a/src/views/partials/circle/page-circle-left.pug
+++ b/src/views/partials/circle/page-circle-left.pug
@@ -6,6 +6,6 @@ div.text-center
       p
         span(data-trans='circle.left.paragraphJoin')
         span &nbsp;
-        solid-link.link(next="admin-circle-list" data-trans='circle.left.admin')
+        solid-link.link(next="admin-circles" data-trans='circle.left.admin')
         span &nbsp;
         span(data-trans='circle.left.paragraphContact')
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index 0942113..017615e 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -3,13 +3,13 @@ div
 
   solid-link.segment.sm-hidden(next='dashboard')
     img.logo(src=`${clientLogo || '/images/logo.webp'}`)
-  button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
+  button.segment.lg-hidden.icon-menu#toggleMainMenu
 
 
   span.tag.reversed.text-semibold(data-trans='header.beta')
 
   div
-    solid-notifications.segment.sm-margin-right-xlarge.notLoggedIn(
+    solid-notifications.segment.sm-margin-right-xlarge(
       nested-field="inbox"
       bind-user
     )
@@ -24,7 +24,7 @@ div
             )
 
     //- User menu visible on large screens
-    details.segment.sm-hidden.notLoggedIn
+    details.segment.sm-hidden.user-controls
       summary.text-right
         solid-display.labelled-avatar.padding-top-xsmall(
           fields='segment1(account.picture), segment2(first_name), segment3(button)'
@@ -51,7 +51,7 @@ div
                     li.segment.padding-top-small
                       a.icon.icon-people.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                 if endpoints.get.circles
-                  solid-link.text-hover(next='admin')
+                  solid-link.text-hover(next='admin-circles')
                     li.segment.padding-top-small
                       a.icon.icon-globe.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.circles')
                 if endpoints.get.projects
@@ -63,7 +63,7 @@ div
             li
               button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
 
-      button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
+      button.segment.lg-hidden.icon-menu#toggleMainMenu
 
       sib-auth(style='display:none!important', auto-login)
         sib-auth-provider(
@@ -73,7 +73,7 @@ div
         )
 
     //- User menu visible on small screens
-    details.user-menu.segment.lg-hidden.notLoggedIn
+    details.user-menu.segment.lg-hidden.user-controls
       summary
         solid-display.labelled-avatar(
           fields='segment1(account.picture), segment3(button)'
@@ -109,7 +109,7 @@ div
                     li.segment.padding-top-small.sm-padding-top-medium
                       a.icon.icon-people.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                 if endpoints.get.circles
-                  solid-link.text-hover(next='admin')
+                  solid-link.text-hover(next='admin-circles')
                     li.segment.padding-top-small.sm-padding-top-medium
                       a.icon.icon-globe.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.circles')
                 if endpoints.get.projects
@@ -121,7 +121,7 @@ div
             li
               button.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
 
-      button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
+      button.segment.lg-hidden.icon-menu#toggleMainMenu
 
       sib-auth(style='display:none!important', auto-login)
         sib-auth-provider(
diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug
index a4b77b8..cd3666b 100644
--- a/src/views/partials/menu-left.pug
+++ b/src/views/partials/menu-left.pug
@@ -140,13 +140,15 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.get.projects
     div.menu-wrapper
-      solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(next='admin-projects')
+      solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='admin-projects')
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-folder-alt
         div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
         div.menu-chevron.segment
           div.icon-arrow-right-circle
       solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
+      solid-route(name='admin-projects-create', hidden)
+      solid-route(name='project-left', hidden)
       div.sub-menu.menu-notification
         div#loader-projects.loader.loader-menu
           div
@@ -167,13 +169,15 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.get.circles
     div.menu-wrapper
-      solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(next='admin')
+      solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='admin-circles')
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-folder-alt
         div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
         div.menu-chevron.segment
           div.menu-icon.icon-arrow-right-circle
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
+      solid-route(name='admin-circles-create')
+      solid-route(name='circle-left')
       div.sub-menu.menu-notification
         div#loader-circles.loader.loader-menu
           div
@@ -193,12 +197,13 @@ solid-router#navbar-router(default-route='dashboard')
         )
     div.divider
     div.menu-wrapper
-      div.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
+      solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='admin-communities')
         div.segment.margin-right-xxsmall
-          div.segment.icon.icon-small.icon-envelope-letter
+          div.segment.icon.icon-small.icon-folder-alt
         div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
         div.menu-chevron.segment
-          div.icon-arrow-up
+          div.menu-icon.icon-arrow-right-circle
+    solid-route(name='admin-users-create', use-id='', hidden)
     solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
     div.sub-menu.menu-notification
       div#loader-messages.loader.loader-menu
@@ -222,6 +227,5 @@ solid-router#navbar-router(default-route='dashboard')
       )
   div.divider
   
-  solid-route(name='admin', hidden)
   solid-route.menu(name='profile', hidden)
   solid-route(name='about', hidden)
diff --git a/src/views/partials/notifications.pug b/src/views/partials/notifications.pug
index 59d28bf..93f7eef 100644
--- a/src/views/partials/notifications.pug
+++ b/src/views/partials/notifications.pug
@@ -1,4 +1,5 @@
 //- Templates for notifications
 
 include notifications/message-circle.pug
+include notifications/message-project.pug
 include notifications/message-private.pug
\ No newline at end of file
diff --git a/src/views/partials/notifications/message-project.pug b/src/views/partials/notifications/message-project.pug
new file mode 100644
index 0000000..a089e66
--- /dev/null
+++ b/src/views/partials/notifications/message-project.pug
@@ -0,0 +1,11 @@
+solid-notifications-template(data-rdf-type='hd:project')
+  template
+    .solid-notification__avatar
+      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<img src="/images/alien.webp" />`}
+    .solid-notification__content
+      .solid-notification__title ${await author.name} 
+        span.solid-notification__title__side
+          span(data-trans='notification.circle.in')
+          span.solid-notification__title__icon ${(await object.status) == 'Public' ? '#' : ''} 
+          | ${await object.name}
+      p.solid-notification__summary ${summary}
diff --git a/src/views/partials/project/page-project-left.pug b/src/views/partials/project/page-project-left.pug
index b91e7fc..3947648 100644
--- a/src/views/partials/project/page-project-left.pug
+++ b/src/views/partials/project/page-project-left.pug
@@ -7,6 +7,6 @@
         p
           span(data-trans='project.left.paragraphJoin')
           span &nbsp;
-          solid-link.link(next="admin-project-list" data-trans='project.left.admin')
+          solid-link.link(next="admin-projects" data-trans='project.left.admin')
           span &nbsp;
           span(data-trans='project.left.paragraphContact')

From 65738f75b0ba06107864dc27552aa2241caa6a70 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 22 Jan 2021 14:34:07 +0100
Subject: [PATCH 2/5] fix: backgrounds

---
 src/index.pug                                   | 4 ++--
 src/views/page-admin.pug                        | 2 +-
 src/views/page-circle.pug                       | 2 +-
 src/views/page-project.pug                      | 2 +-
 src/views/partials/admin/page-admin-circles.pug | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index 8d7a8b5..d9e186a 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -38,13 +38,13 @@ html(lang="en")
 
     script(src="index.js" defer)
 
-  body.notLoggedIn(style='visibility:hidden;')
+  body.notLoggedIn.bg-color-grey(style='visibility:hidden;')
     if endpoints.get && endpoints.post
 
       include views/partials/notifications.pug
       include views/partials/widgets.pug
 
-      header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection
+      header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white
         include views/partials/header.pug
 
       nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index 1f38b21..c37c7bc 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -1,4 +1,4 @@
-.with-sidebar.whitespace-normal.only-on-admin(hidden)
+.with-sidebar.whitespace-normal.bg-color-white.only-on-admin(hidden)
   .scrollbar-content.views-container.sidebar-is-closed
     if endpoints.circles || (endpoints.get && endpoints.get.circles)
       #admin-circles(hidden, data-view="admin-circles", no-render)
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index 28bbf58..7af750e 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -1,4 +1,4 @@
-.scrollbar-content.views-container.sidebar-is-closed
+.scrollbar-content.views-container.sidebar-is-closed.bg-color-white
   solid-ac-checker(permission='acl:Read', bind-resources)
     #circle-chat(hidden, data-view="circle-chat")
       include partials/circle/page-circle-chat.pug
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index ea3678d..cdd30bf 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -1,4 +1,4 @@
-.scrollbar-content.views-container.sidebar-is-closed
+.scrollbar-content.views-container.sidebar-is-closed.bg-color-white
   solid-ac-checker(permission='acl:Read', bind-resources)
     #project-chat(hidden, data-view="project-chat")
       include partials/project/page-project-chat.pug
diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug
index 743da20..edc26a7 100644
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@@ -93,7 +93,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-norma
             value-user.username='hubl-workaround-493'
             widget-user.username='solid-form-hidden'
 
-            submit-button=''
+            submit-button='Join'
             data-trans='submit-button=circle.list.buttonJoin'
           )
           hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}')

From 9a463c87e76dc86037f302bda7c5e0927a8881bf Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 22 Jan 2021 14:50:03 +0100
Subject: [PATCH 3/5] feature: right menu + styling fixes

---
 src/index.pug                  |  2 +-
 src/scripts/navigate-event.js  | 11 +++++++++--
 src/styles/content/_index.scss |  3 +++
 src/styles/header/_index.scss  |  2 +-
 src/views/page-admin.pug       | 10 ++++++----
 src/views/page-circle.pug      | 10 ++++++----
 src/views/page-project.pug     | 10 ++++++----
 src/views/partials/header.pug  |  2 +-
 8 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index d9e186a..bfcc71b 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -47,7 +47,7 @@ html(lang="en")
       header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white
         include views/partials/header.pug
 
-      nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu
+      nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.text-disable-selection.jsLeftMenu
         include views/partials/menu-left.pug
 
       main#content.segment.lg-three-quarter.sm-full.text-top
diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js
index 3154e19..2e167ed 100644
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@@ -15,6 +15,10 @@ function closeUserControls() {
       Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
         vC.classList.toggle("sidebar-is-closed")
       );
+      Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
+        el.querySelector('.text-right').setAttribute('hidden', '');
+        el.querySelector('.text-left').removeAttribute('hidden');
+      });
       Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
     }
   }
@@ -22,6 +26,10 @@ function closeUserControls() {
   function openRightMenu() {
     let rightMenu = document.querySelectorAll(".jsRightMenu");
     Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
+    Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
+      el.querySelector('.text-left').setAttribute('hidden', '');
+      el.querySelector('.text-right').removeAttribute('hidden');
+    });
     Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
       vC.classList.toggle("sidebar-is-closed")
     );
@@ -72,8 +80,7 @@ document.addEventListener("DOMContentLoaded", function() {
         closeLeftMenu();
       }
       if (
-        !event.target.className.includes("jsMobileSidebarOpenButton") &&
-        !event.target.className.includes("jsOffsiteToggle")
+        !event.target.closest(".jsOffsiteToggle")
       ) {
         closeRightMenu();
       }
diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss
index 24316ea..d935a63 100644
--- a/src/styles/content/_index.scss
+++ b/src/styles/content/_index.scss
@@ -75,6 +75,9 @@ main {
         color: white;
         background: var(--color-heading);
       }
+      solid-link:not([active]):hover {
+        background: #e4e4e4;
+      }
     }
 
     &.jsRightMenu:not([open]) {
diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss
index 3b9f0eb..9d57b10 100644
--- a/src/styles/header/_index.scss
+++ b/src/styles/header/_index.scss
@@ -53,7 +53,7 @@ header {
           margin-left: -9px;
         }
 
-        &:hover {
+        &:hover, &:focus {
           background: white;
         }
 
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index c37c7bc..cd4353a 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -19,12 +19,14 @@
         include partials/admin/page-admin-communities.pug
       #admin-users-create(hidden, data-view="admin-users-create", no-render)
         include partials/admin/page-admin-users-create.pug
-  nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
+  nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
     .segment.whitespace-normal.text-color-heading.text-bold
       ul
-        li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
-          span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
-          a(data-trans='admin.menuRight.fold')
+        li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
+          span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
+          span.text-right(hidden, style='float:right;')
+            span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
+            a(data-trans='admin.menuRight.fold')
         if (endpoints.users || (endpoints.get && endpoints.get.users))
           solid-link.segment.lg-full.sm-full(next='admin-communities')
             li.segment.lg-full.sm-full.padding-medium
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index 7af750e..8e0abbe 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -11,12 +11,14 @@
     #circle-polls(hidden, data-view="circle-polls")
       include partials/circle/page-circle-polls.pug
 
-nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
+nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='circle-chat')
     ul
-      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
-        span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
-        a(data-trans='circle.menuRight.fold')
+      li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
+        span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
+        span.text-right(hidden, style='float:right;')
+          span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
+          a(data-trans='circle.menuRight.fold')
       solid-route.segment.lg-full.sm-full(name='circle-chat')
         li.segment.lg-full.sm-full.padding-medium
           span.icon.ci-chat.icon-xlarge.margin-right-medium
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index cdd30bf..1da5cf2 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -7,12 +7,14 @@
     #project-picture(hidden, data-view="project-picture")
       include partials/project/page-project-picture.pug
 
-nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
+nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='project-chat')
     ul
-      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
-        span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
-        a(data-trans='project.menuRight.fold')
+      li.segment.lg-full.sm-full.padding-small.text-normal.jsOffsiteToggle
+        span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
+        span.text-right(hidden, style='float:right;')
+          span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
+          a(data-trans='project.menuRight.fold')
       solid-route.segment.lg-full.sm-full(name='project-chat')
         li.segment.lg-full.sm-full.padding-medium
           span.icon.ci-chat.icon-xlarge.margin-right-medium
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index 017615e..7f779b2 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -61,7 +61,7 @@ div
             li.border-bottom.border-color-grey
               solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
             li
-              button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
+              button.segment.padding-small.text-hover.text-semibold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
 
       button.segment.lg-hidden.icon-menu#toggleMainMenu
 

From a3318c8624c57a32df8d66b3bbfd0a433d2e1ad9 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 22 Jan 2021 15:04:38 +0100
Subject: [PATCH 4/5] fix: ellipsis

---
 src/styles/index.scss                            | 6 ++++++
 src/views/page-messages.pug                      | 2 +-
 src/views/partials/admin/page-admin-circles.pug  | 4 ++--
 src/views/partials/admin/page-admin-projects.pug | 2 +-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1c7ee4f..4e4a638 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -118,4 +118,10 @@ nav#main__menu {
 }
 main#content {
   width: calc(100% - 250px);
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
\ No newline at end of file
diff --git a/src/views/page-messages.pug b/src/views/page-messages.pug
index df00215..bb2c8c8 100644
--- a/src/views/page-messages.pug
+++ b/src/views/page-messages.pug
@@ -1,4 +1,4 @@
-div.segment.lg-full.sm-full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal
+div.segment.lg-full.sm-full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal.bg-color-white
   solid-display.labelled-avatar.small(
     bind-resources
     fields='segment1(account.picture), segment2(name, hyphen, at, username)'
diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug
index edc26a7..f17df3a 100644
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@@ -74,7 +74,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-norma
         class-cell3='segment table-cell lg-third text-center'
 
         class-circle.name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-        class-circle.subtitle='segment lg-full sm-full'
+        class-circle.subtitle='segment lg-full sm-full text-ellipsis'
 
         action-leaveButton="joinButton"
         widget-leaveButton="hubl-admin-circle-leave-button"
@@ -115,7 +115,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-norma
         class-cell3='segment table-cell lg-third text-center'
 
         class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline ellipsis'
-        class-subtitle='segment lg-full sm-full'
+        class-subtitle='segment lg-full sm-full text-ellipsis'
 
         widget-owner='hubl-circle-owner'
         widget-members="hubl-admin-circle-join-button"
diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug
index 5c93ddb..43d767a 100644
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.pug
@@ -40,7 +40,7 @@ div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-mediu
 
       solid-widget(name='hubl-project-captain')
         template
-          solid-display.labelled-avatar.two-lines(
+          solid-display.labelled-avatar.two-lines.block(
             data-src='${await value}'
             fields='segment1(account.picture), segment2(line1(name), line2(at, username))'
 

From 5461896b4d096ed669af467ba454335ce8c76a80 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 22 Jan 2021 15:41:07 +0100
Subject: [PATCH 5/5] bump version @startinblox/hubl-styling-framework

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 39208a7..2abe2aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1159,9 +1159,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.4.4.tgz",
-      "integrity": "sha512-X52jdEgG283HMtXAyKeM3R0YLVwJuKSsR4ZU+h7CUmLrtZ+iPtHDgIu3Z9f17NmrF94zisy7FZaZvG/CWm1trg=="
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.4.12.tgz",
+      "integrity": "sha512-3oG9UpKO++o/J0u+Ui7IClLG7mDcyN74j9FDj9tqduv+wnEmI5MyQSx1coHSNnOjtL2dDIs7MTIdtItOVUO8kQ=="
     },
     "@types/q": {
       "version": "1.5.4",
diff --git a/package.json b/package.json
index dc190d3..d757391 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.4.4",
+    "@startinblox/hubl-styling-framework": "^1.4.12",
     "cross-env": "^7.0.3",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",