.gitignore

@@ -2,6 +2,7 @@
 /src/config.json
 /www/index.html
 /www/index.prod.html
+/www/index.staging.html
 /www/styles/
 /www/scripts/
 /www/lib/

.gitmodules

-[submodule "www/lib/sib-core"]
-	path = www/lib/sib-core
-	url = git@git.happy-dev.fr:startinblox/sib-core.git
-[submodule "www/lib/sib-router"]
-	path = www/lib/sib-router
-	url = git@git.happy-dev.fr:startinblox/sib-router.git
-[submodule "www/lib/sib-chat"]
-	path = www/lib/sib-chat
-	url = git@git.happy-dev.fr:startinblox/sib-chat.git
-[submodule "www/lib/sib-oidc"]
-	path = www/lib/sib-oidc
-	url = git@git.happy-dev.fr:startinblox/sib-oidc.git

src/dependencies.pug

@@ -3,9 +3,8 @@
 //script(src="/lib/webcomponentsjs/webcomponents-loader.js")
 //- script(src="lib/html-imports.js")
 
-script(src="/lib/oidc-client.js")
 script(
-  src="https://cdn.happy-dev.fr/sib-oidc/sib-oidc.js"
+  src="https://unpkg.com/@startinblox/oidc@0.5"
   data-authority=`${sdn}/openid/`,
   data-client_id=`${client_id}`,
   data-response_type='id_token token',
@@ -33,9 +32,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //link(rel='import', href='/lib/sib-chat/sib-chat.html')
 
 //- cdn
-script(type="module" src="https://unpkg.com/@startinblox/core@0.5.7")
-script(type="module" src="https://unpkg.com/@startinblox/router@latest")
-script(type="module" src="https://cdn.happy-dev.fr/sib-chat/sib-chat.js")
-
-script(type="module" src="/scripts/hd-widgets.js")
+//- don't forget to change version in hd-widgets.js
+script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
+script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 

src/header.pug

@@ -3,10 +3,9 @@
   img(src="/images/logo.png" width=111 height=32)
 
 #search-bar
-  div
-    input#search-input(type='search')
-    i#search-icon.icon-magnifier(aria-hidden='true')
-    i#close-search-icon.icon-close(aria-hidden='true')
+  input#search-input(type='search')
+  i#search-icon.icon-magnifier(aria-hidden='true')
+  i#close-search-icon.icon-close(aria-hidden='true')
 
 details
   summary#notifications-button
@@ -19,5 +18,5 @@ sib-display#profile(
   data-fields='first_name, account.picture',
   widget-account.picture='sib-display-img',
   bind-user
-  )
+)
 

src/index.pug

@@ -22,7 +22,7 @@ html(lang="en")
           #member-chat(hidden)
             include page-member-chat.pug
           #member(hidden)
-            include page-member.pug
+            include page-member-profile.pug
           #job-offers(hidden)
             include page-job-offers.pug
           #job-offer-create(hidden)

src/page-group-create.pug

-#circle-create
+.frame-form
   h1 New group
+  p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
   .form-view
-    sib-form.block(
+    sib-form(
       data-src=`${sdn}/circles/`,
-      data-fields="name, description, owner, team, jabberID, jabberRoom"
       range-owner=`${sdn}/members/`, 
-      widget-team='sib-form-multiple-dropdown', 
       range-team=`${sdn}/members/`
+      
+      data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
+
+      label-description='Description',
+      label-foaf:jabberID='Chatroom id',
+      label-name="Channel's name",
+      label-owner='Owner of this channel',
+      label-team='Member(s) of this channel',
+
+      value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
+      widget-description-text='hdapp-form-text',
+
+      value-team-text='Add any members as you want.',
+      widget-team-text='hdapp-form-text',
+
+      value-owner-text='The one who will admin this channel',
+      widget-owner-text='hdapp-form-text',
+
+      widget-description='sib-form-textarea',
+      widget-jabberRoom='sib-form-checkbox',
+      widget-team='sib-form-multiple-dropdown',
     )

src/page-group-profile.pug

 .frame
+  h2 Channel's name:
   sib-display(
-    data-fields='name, label-description, description',
-    value-label-description="Description:"
+    data-fields='name',
     bind-resources
   )
-  h2.section.skills In group
+
+  h2 Description:
   sib-display(
-    id-suffix='team',
-    data-fields='user-thumb',
-    set-user-thumb='account.picture, first_name, last_name',
-    widget-account.picture='sib-display-img',
+    data-fields='description',
     bind-resources
   )
 
-//-
-  sib-display#offers-list.limiter(
-    data-src=`${sdn}/job-offers/`,
-    data-fields='date, user-thumb, title, description, skills',
-    widget-skills='sib-display-lookuplist',
-    set-user-thumb='author.member.avatar, author.first_name, author.last_name'
-    widget-author.member.avatar='sib-display-img',
-    set-date='closingDate, creationDate',
-    widget-closingDate='hdapp-closing-date',
-    set-searchset='title, description, skills',
-    search-fields='searchset'
-  )
+  h2 In group:
+  sib-display.block-group(
+    id-suffix='team',
+    data-fields='teammate-img, teammate-name, teammate-pseudonym, teammate-profile, teammate-contact',
 
-  sib-display(
-    data-fields='title, label-description, description, client',
-    set-title='phone, client.name, name',
-    set-client='label-client, client.name, client.logo, client.address',
-    value-label-description="Description:"
-    value-label-client="Client:"
-    widget-client.logo='sib-display-img',
-    widget-client='hdapp-client',
-    widget-team='sib-display-lookuplist',
-    bind-resources,
-  )
+    set-teammate-img='account.picture',
+    set-teammate-pseudonym='before-pseudo, username',
+    set-teammate-name='first_name, last_name',
 
-  h2 Team:
-  sib-display.members-list-condensed(
-    id-suffix='team',
-    data-fields='member.avatar, member.user',
-    widget-member.avatar='sib-display-img',
-    widget-member.user='hdapp-userinfo',
+    template-teammate-contact='chat-link',
+
+    value-before-pseudo='@',
+    value-teammate-contact='Send a message',
+    value-teammate-profile='View profile',
+
+    widget-account.picture='sib-display-img',
+    
     next='member',
-    bind-resources,
-  )
\ No newline at end of file
+    bind-resources
+  )

src/page-group.pug

-sib-router#circle-router(default-route='circle-chat')
-  sib-route(name='circle-chat')
-    div Chat
-  sib-route(name='circle-profile')
-    div Info
-  sib-ac-checker(permission='change' bind-resources)
-    sib-route(name='circle-edit')
-      div Edit
-  sib-route(name='circle-create')
-    div Add new
-#network-views-container
+nav.jsRightMenu(role='navigation')
+  sib-router(default-route='circle-chat')
+    ul
+      li.jsOffsiteToggle
+        a Fold menu
+      sib-route(name='circle-chat')
+        li
+          a Chat
+      sib-route(name='circle-profile')
+        li
+          a Info
+      sib-ac-checker(permission='change' bind-resources)
+        sib-route(name='circle-edit')
+          li
+            a Edit
+      sib-route(name='circle-create')
+        li
+          a Add new
+#views-container
   #circle-chat
     include page-group-chat.pug
   #circle-profile

src/page-job-offer-create.pug

-//#job-offer-create
-div
-  h1 New job offer
+.frame-form
+
+  sib-widget(name='title-text')
+    template
+      p Be clear and specific with the name of your offer. You can indicate which skill is important, the start date or the name of the client. Ex: "Looking for a plumber for planet Mars ASAP".
+
+  sib-widget(name='description-text')
+    template
+      p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
+  
+  sib-link(next='job-offers' class='back') Back
+  h1 Post a new job offer
+  p.form-goal This form allows you to share an offer to all members of the network.
   .form-view
     sib-form.block(
       data-src=`${sdn}/job-offers/`,
-      data-fields='title, description, skills',
       range-skills= `${sdn}/skills/`,
       range-author= `${sdn}/users/`,
-      widget-skills='sib-form-multiple-dropdown'
+
+      data-fields='title, title-text, description, description-text, skills',
+
+      label-title='Title*',
+      label-description='Description*',
+      label-skills='The required skills for this mission:*',
+      
+      widget-title-text='title-text',
+      widget-description-text='description-text',
+      widget-skills='sib-form-auto-completion',
+      
       next="job-offers"
     )

src/page-job-offers.pug

 div.grid-layer
+
+  include templates/template-groups.pug
+  include templates/template-skills.pug
+
   div.grid-layer-main.containerV
     h2 New offers
       span Here you can find and post offers
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
-      data-fields='status, user-thumb, creation, title, description, skills, send',
-      
-      set-status='closingDate',
-      widget-closingDate='hdapp-closing-date',
+      data-fields='user-thumb, creationDate, title, description, skills, send',
       
       set-user-thumb='author.account.picture, author.first_name, author.groups',
       widget-author.account.picture='sib-display-img',
-      widget-author.groups='sib-display-lookuplist',
-      
-      set-creation='creationDate',
+      widget-author.groups='groups-name',
+      multiple-author.groups,
 
-      widget-skills='sib-display-lookuplist',
+      widget-skills='skills-name',
+      multiple-skills,
       
-      set-send='before-send-link, send-link',
-      value-before-send-link='',
-      value-send-link='Send a private message',
-      template-send-link='chat-link'
+      action-send='member-chat',
+      label-send='Send a private message',
       
       search-range-skills=`${sdn}/skills/`,
-      search-fields='content,skills,open',
-      set-content='title, description'
+      search-fields='content, skills, open',
+      
+      set-content='title, description',
+      
+      search-label-content='Search by keyword',
+      search-label-skills='Search by skills',
+      search-label-open='Filter opened or closed offers',
+
+      search-widget-content='sib-form-placeholder-text',
+      search-widget-skills='sib-form-placeholder-dropdown',
+      search-widget-open='sib-form-placeholder-text'
     )
   div.grid-layer-links.containerV
     template#groups-list-template

src/page-member-profile.pug

-template#chat-link
-  sib-link(next="member-chat") ${value}
-sib-display#member-info(
-  data-fields='available, header, name, pseudonym, infos, user.skills',
-  set-header='user.account.picture',
-  set-infos='city, country, user.roles, user.email, send, phone, foaf:homepage, ',
-  set-name='user.first_name, user.last_name',
-  set-pseudonym='before-pseudo, pseudo',
-  value-before-pseudo='@',
-  value-send='SEND A MESSAGE',
-  template-send='chat-link',
-  widget-available='hdapp-available',
-  widget-user.account.picture='sib-display-img',
-  widget-user='hdapp-userinfo',
-  widget-phone='sib-display-tel',
-  widget-foaf:homepage='hdapp-hyperlink',
-  widget-user.email='sib-display-mailto',
-  widget-user.roles='sib-display-lookuplist',
-  widget-user.skills='sib-display-lookuplist',
-  bind-resources
-)
+sib-link(next="members" class="backlink") Back to directory
+
+include templates/template-groups.pug
+include templates/template-skills.pug
+include templates/template-status.pug
+
+div#member-profile
+  sib-display(
+    data-fields='member-profile__bio, member-profile__skills, member-profile__xp',
+    
+    set-member-profile__bio ='user.profile.available, member-img, member-profile, user.username, bio, infos, send',
+    set-member-profile__skills='user.skills',
+    set-member-profile__xp='',
+
+    set-member-img='user.account.picture',
+    set-member-profile='user.name, user.groups',
+    set-infos='city, user.groups, user.email, phone, foaf:homepage',
+    
+    label-send='SEND A MESSAGE',
+    action-send='member-chat',
+    
+    widget-user.account.picture='sib-display-img',
+    widget-user.groups='groups-name',
+    widget-user.skills='skills-name',
+    widget-user.profile.available='status-template',
+
+    multiple-user.groups,
+    multiple-user.skills,
+    
+    bind-resources
+  )
+

src/page-member.pug

-
-sib-router#member-router(default-route='member-profile')
-  sib-route(name='member-profile')
-    div Profile
-  sib-ac-checker(permission='acl:Write' bind-resources)
-    sib-route(name='member-edit')
-      div Edit
-#member-views-container
-  sib-link(next="members" class="back") Back to directory
-  div
-    #member-profile
-      include page-member-profile.pug
-    #member-edit
-      include page-member-edit.pug

src/page-members.pug

 div.grid-layer
-  template#chat-link
-    sib-link(next="member-chat") ${value}
+
+  include templates/template-groups.pug
+  include templates/template-skills.pug
+
   div.grid-layer-main.containerV
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
-      counter-template='${counter} members',
-      data-fields='header, infos',
-
-      set-header='user.account.picture, user, pseudonym, bio, send',
-      widget-user.account.picture='sib-display-img',
-      widget-user='hdapp-userinfo',
-      set-pseudonym='before-pseudo,user.username',
-      value-before-pseudo='@',
-      value-send='SEND A MESSAGE',
-      template-send='chat-link',
-      
-      set-infos='city, user.groups, user.email, phone, user.skills',
-      widget-user.groups='sib-display-lookuplist',
-      widget-user.skills='sib-display-lookuplist',
-
       search-range-groups=`${sdn}/groups/`,
       search-range-skills=`${sdn}/skills/`,
+      
       search-fields='name, groups, skills',
       set-name='pseudo, user.first_name, user.last_name',
       search-label-name='Search by lastname, firstname...',
-      search-widget-name='sib-form-placeholder-text',
       search-label-groups='Filter by role',
       search-label-skills='Search by skills',
+      search-widget-name='sib-form-placeholder-text',
+      search-widget-groups='sib-form-placeholder-dropdown',
       search-widget-skills='sib-form-placeholder-text',
-      next='member')
-  //-div.grid-layer-links.containerV
+      
+      counter-template='<span>${counter} members</span>',
+      
+      data-fields='header, infos',
+      set-header='user.account.picture, user.name, pseudonym, bio, send',
+      set-infos='city, user.groups, user.email, phone, user.skills',
+      set-pseudonym='before-pseudo,user.username',
+      value-before-pseudo='@',
+      label-send='SEND A MESSAGE',
+      action-send='member-chat',
+      widget-user.account.picture='sib-display-img',
+      widget-user.groups='groups-name',
+      widget-user.skills='skills-name',
+      multiple-user.groups,
+      multiple-user.skills,
+
+      paginate-by='3',
+
+      next='member'
+    )
+
+  div.grid-layer-links.containerV
     div.containerH.containerCenter.how-link
       div.containerV.fix.icon-idea
       div.containerV.grow
@@ -39,3 +48,4 @@ div.grid-layer
       div.containerV.fix.icon-idea
       div.containerV.grow
         sib-trigger() How to complete my profile ?
+

src/page-project-create.pug

 .frame-form
   h1 New project
-  p Here you can create your project, add members and assign them a job.
+  p.form-goal Here you can create your project, add members and assign them a job.
   .form-view
     sib-form(
       data-src=`${sdn}/projects/`,
@@ -8,21 +8,21 @@
       range-members=`${sdn}/members/`,
       range-team=`${sdn}/users/`,
 
-      data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
+      data-fields=`customer.name, name, customer.logo, description, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
       set-block-team=`team, members`,
       set-block-fee=`businessProvider, businessProviderFee`,
       
-      'label-customer,name'='Business name',
+      label-customer.name='Business name',
       label-name='Project name',
       label-description='Project description',
-      'label-customer,logo'='Customer logo',
-      'label-customer,companyRegister'='Company register',
-      'label-customer,address'='Customer address',
-      'label-customer,firstName'='Contact firstname',
-      'label-customer,lastName'='Contact lastname',
-      'label-customer,role'='Contact role',
-      'label-customer,email'='Contact email',
-      'label-customer,phone'='Contact phone',
+      label-customer.logo='Customer logo',
+      label-customer.companyRegister='Company register',
+      label-customer.address='Customer address',
+      label-customer.firstName='Contact firstname',
+      label-customer.lastName='Contact lastname',
+      label-customer.role='Contact role',
+      label-customer.email='Contact email',
+      label-customer.phone='Contact phone',
       label-businessProvider='Business provider',
       label-businessProviderFee='Fee (%)',
       label-foaf:jabberID='Chatroom id',
@@ -32,5 +32,7 @@
       widget-jabberRoom='sib-form-checkbox',
       widget-description='sib-form-textarea',
       widget-team='sib-form-multiple-dropdown',
-      widget-members='sib-form-multiple-dropdown'
+      widget-members='sib-form-multiple-dropdown',
+      bind-resources
     )
+    
\ No newline at end of file

src/page-project-edit.pug

 .frame-form
   h1 Edit your project
-  p Here you can edit your projet's details
+  p.form-goal Here you can edit your projet's details
   .form-view
-    sib-form(
+    sib-form.block(
       range-team=`${sdn}/users/`,
-      range-members=`${sdn}/project-members/`,
-
-      data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`,
-      set-block-team=`team, members`,
-      set-block-fee=`businessProvider, businessProviderFee`,
-
-      'label-customer,name'='Business name',
-      label-name='Project name',
-      label-description='Project description',
-      'label-customer,logo'='Customer logo',
-      'label-customer,companyRegister'='Company register',
-      'label-customer,address'='Customer address',
-      'label-customer,firstName'='Contact firstname',
-      'label-customer,lastName'='Contact lastname',
-      'label-customer,role'='Contact role',
-      'label-customer,email'='Contact email',
-      'label-customer,phone'='Contact phone',
-      label-businessProvider='Business provider',
-      label-businessProviderFee='Fee (%)',
-      label-foaf:jabberID='Chatroom id',
-      label-team='Teammates',
-      label-members='Member role'
-
-      widget-jabberRoom='sib-form-checkbox',
-      widget-description='sib-form-textarea',
-      widget-team='sib-form-multiple-dropdown',
-      widget-members='sib-form-multiple-dropdown',
 
       bind-resources
     )

src/page-project-profile.pug

 .frame
-  template#customer-template
-    div#clientBox
-      div
-        h5 Client:
-        ul
-          li #[span Business name:]${value.name}
-          li #[span Company register:]${value.companyRegister}
-          li
-            span Address:
-            br
-            p ${value.address}
-      div
-        h5 Contact:
-        ul
-          li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
-          li(name='email')
-            a(href='mailto:${value.email}') ${value.email}
-          li(name='phone') ${value.phone}
+
+  include templates/template-customer.pug
+  include templates/template-team.pug
 
   sib-display(
-    data-fields='block-title, infos, block-lead, block-fee, block-customer',
+    data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
+    extra-context='{"project-profile":"${sdn}/projects/"}'
     
     set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
-    value-const-title1="N°",
-    value-const-title2="-",
-    value-entitled="Creation date:"
+    value-const-title1='N°',
+    value-const-title2='-',
+    value-entitled='Creation date:'
 
     set-infos='block-description, block-logo',
     set-block-description='label-description, description',
@@ -33,32 +19,23 @@
     widget-customer.logo='sib-display-img',
 
     set-block-fee='label-fee, details-cell, details-business',
-    value-label-fee='FEE:',
     set-details-cell='cell-name, cell-fee, percentage',
+    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+    value-label-fee='FEE:',
     value-cell-name='Happy Dev Paris:',
     value-cell-fee='5',
     value-percentage='%',
-    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
-    value-business-contribution='Business contribution:',
     value-comma=', ',
 
     set-block-customer='label-customer, customer',
     value-label-customer='CUSTOMER INFORMATIONS:'
-    template-customer='customer-template',
-    bind-resources,
+    widget-customer='customer-template',
+    
+    set-block-team='label-team, members',
+    value-label-team='TEAM:'
+    widget-members='team-template',
+    multiple-members,
+    
+    bind-resources
   )
 
-  div(name='block-team')
-    h2(name='label-team') Team:
-    sib-display(
-      id-suffix='members',
-      data-fields='teammate-img, teammate-profile, teammate-job',
-      set-teammate-img='user.account.picture',
-      set-teammate-profile='user, user.groups',
-      set-teammate-job='name',
-      widget-user.account.picture='sib-display-img',
-      widget-user='hdapp-userinfo',
-      widget-user.groups='sib-display-lookuplist',
-      next='profile',
-      bind-resources,
-    )

src/page-project-profile.pug.orig

+.frame
+
+  include templates/template-customer.pug
+  include templates/template-team.pug
+
+  sib-display(
+    data-fields='block-title, infos, block-lead, block-fee, block-customer, block-team',
+    extra-context='{"project-profile":"${sdn}/projects/"}'
+    
+    set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate',
+    value-const-title1='N°',
+    value-const-title2='-',
+    value-entitled='Creation date:'
+
+    set-infos='block-description, block-logo',
+    set-block-description='label-description, description',
+    set-block-logo='customer.logo',
+    value-label-description='DESCRIPTION:',
+    widget-customer.logo='sib-display-img',
+
+    set-block-fee='label-fee, details-cell, details-business',
+    set-details-cell='cell-name, cell-fee, percentage',
+    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+    value-label-fee='FEE:',
+    value-cell-name='Happy Dev Paris:',
+    value-cell-fee='5',
+    value-percentage='%',
+    value-business-contribution='Business contribution:',
+    value-comma=', ',
+
+    set-block-customer='label-customer, customer',
+    value-label-customer='CUSTOMER INFORMATIONS:'
+    widget-customer='customer-template',
+    
+    set-block-team='label-team, members',
+    value-label-team='TEAM:'
+    widget-members='team-template',
+    multiple-members,
+    
+    bind-resources
+  )
+<<<<<<< HEAD
+
+  div(name='block-team')
+    h2(name='label-team') Team:
+    sib-display(
+      id-suffix='members',
+      data-fields='teammate-img, teammate-profile, teammate-job',
+      set-teammate-img='user.account.picture',
+      set-teammate-profile='user.first_name, user.last_name, user.groups',
+      set-teammate-job='name',
+      widget-user.account.picture='sib-display-img',
+      widget-user.groups='sib-display-lookuplist',
+      next='profile',
+      bind-resources,
+    )
+=======
+>>>>>>> b8190bc... ui(all pages): MR!13 - upgrade to sib-core v0.6

src/page-project.pug

-nav#jsRightMenu(role='navigation')
+nav.jsRightMenu(role='navigation')
   sib-router(default-route='project-chat')
     ul
-      li#jsOffsiteToggle
+      li.jsOffsiteToggle
         a Fold menu
       sib-route(name='project-chat')
         li 
@@ -15,7 +15,7 @@ nav#jsRightMenu(role='navigation')
       sib-route(name='project-create')
         li
           a Add new
-#project-views-container
+#views-container
   #project-chat
     include page-project-chat.pug
   #project-profile

src/scripts/hd-widgets.js

-import {Helpers, SIBWidget, SIBDisplayLookupList, store} from 'https://unpkg.com/@startinblox/core@0.5.7';
-
-class HDAppUserInfo extends SIBDisplayLookupList {
-  get parentElement() {
-    return 'div';
-  }
-
-  getTemplate(value, index) {
-    var firstname, lastname, email;
-
-    if (typeof value == 'object')
-      if (Object.keys(value).length > 1) {
-        firstname = value.first_name;
-        lastname = value.last_name;
-        email = value.email;
-      } else {
-        store.get(value).then(resource => {
-          this.value.push(resource);
-          this.render();
-        });
-        if (Array.isArray(this.value))
-          this.value.splice(this.value.indexOf(value), 1);
-        else this.value = [];
-        return '';
-      }
-    return `<div>${firstname} ${lastname}</div>`;
-    // + `<div id="${email}">${email}</div>`;
-  }
-}
-
-class HDAppMail extends SIBWidget {
-  get template() {
-    return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
-  }
-}
-
-class HDAppMember extends SIBWidget {
-  get template() {
-    return `
-        <div name="${this.name}">
-          <img src="${this.value.avatar}"/>
-        </div>
-      `;
-  }
-
-  render() {
-    store.get(this.value).then(value => {
-      this._value = value;
-      this.innerHTML = this.template;
-    });
-  }
-}
-
-class HDAppAuthor extends SIBDisplayLookupList {
-  get parentElement() {
-    return 'div';
-  }
-
-  getTemplate(value, index) {
-    var firstname, lastname;
-    if (typeof value == 'object')
-      if (Object.keys(value).length > 1) {
-        firstname = value.user.first_name;
-        lastname = value.user.last_name;
-      } else {
-        store.get(value).then(resource => {
-          this.value.push(resource);
-          this.render();
-        });
-        if (Array.isArray(this.value))
-          this.value.splice(this.value.indexOf(value), 1);
-        else this.value = [];
-        return '';
-      }
-    return `${firstname} ${lastname}`;
-  }
-}
-
-class HDAppClosingDate extends SIBWidget {
-  get template() {
-    return this.value
-      ? `<strong>closed</strong> (${this.value})`
-      : '<strong>open</strong>';
-  }
-
-  render() {
-    this.innerHTML = this.template;
-  }
-}
-
-class HDAppAvailable extends SIBWidget {
-  get template() {
-    return this.value
-      ? '<strong>Available</strong>'
-      : '<strong>Not available</strong>';
-  }
-
-  render() {
-    this.innerHTML = this.template;
-  }
-}
-
-class HDAppHyperlink extends SIBWidget {
-  get template() {
-    const escaped = this.value
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
-    return `<a href="${escaped}">${escaped}</a>`;
-  }
-
-  render() {
-    this.innerHTML = this.template;
-  }
-}
-
-class HDAppLinkMore extends SIBWidget {
-  get template() {
-    const id = Helpers.uniqID();
-    return `
-      ${this.label}
-      ${this.name}
-      ${this.escapedValue}
-      `;
-  }
-}
-
-customElements.define('hdapp-userinfo', HDAppUserInfo);
-customElements.define('hdapp-mail', HDAppMail);
-customElements.define('hdapp-member', HDAppMember);
-customElements.define('hdapp-author', HDAppAuthor);
-customElements.define('hdapp-closing-date', HDAppClosingDate);
-customElements.define('hdapp-available', HDAppAvailable);
-customElements.define('hdapp-hyperlink', HDAppHyperlink);
-customElements.define('hdapp-link-more', HDAppLinkMore);
\ No newline at end of file

src/scripts/index.js

@@ -2,8 +2,7 @@ document.addEventListener('DOMContentLoaded', function (event) {
   const navBar = document.querySelector('#navbar');
   const btnToggle = document.querySelector('#button-toggle');
   const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
-  const btnRightMenu = document.querySelector('#jsOffsiteToggle');
-  const rightMenu = document.querySelector('#jsRightMenu');
+  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
   
   if (!navBar || !btnToggle) return;
 
@@ -39,7 +38,12 @@ document.addEventListener('DOMContentLoaded', function (event) {
   });
 
   // Open/close menu on the right
-  btnRightMenu.addEventListener('click', e => {
-    rightMenu.classList.toggle('offsite-is-closed');
-  });
+  rightMenus.forEach(rightMenu => {
+    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
+    
+    btnRightMenu.addEventListener('click', e => {
+      rightMenu.classList.toggle('offsite-is-closed');
+    })
+  })
+  
 });