Change markup structure and include JS file

cern_toolbar.libraries.yml

@@ -2,4 +2,6 @@ cern_toolbar:
   version: 1.x
   css:
     component:
-      assets/css/screen.css: {}
\ No newline at end of file
+      assets/css/screen.css: {}
+  js:
+    assets/js/cern_toolbar.js: {}
\ No newline at end of file

cern_toolbar.module

@@ -31,7 +31,12 @@ function cern_toolbar_theme() {
   return [
     'cern_toolbar' => [
       'render element' => 'element',
-      'variables' => ['toolbar_links' => NULL, 'directory_link' => NULL, 'attributes' => []],
+      'variables' => [
+        'toolbar_links' => NULL,
+        'directory_link' => NULL, 
+        'logged_in' => NULL, 
+        'attributes' => []
+      ],
     ],
   ];
 }

src/Element/CernToolbar.php

@@ -72,14 +72,6 @@ class CernToolbar extends RenderElement {
     $items_toolbar_links = [];
     if(\Drupal::currentUser()->isAnonymous()) {
       $element['#attributes']['class'] =  'user-not-authenticated';
-      $items_toolbar_links[] = [
-        '#markup' => '<span class="cern-signin">'.t('Sign in').'</span>',
-        '#wrapper_attributes' => [
-          'class' => [
-            'sign-in-button',
-          ],
-        ]
-      ];
       $items_toolbar_links[] = [
         '#type' => 'link',
         '#title'=> t('As CERN account'),
@@ -213,12 +205,13 @@ class CernToolbar extends RenderElement {
         ],
       ],
     ];
+    $element['#logged_in'] = !\Drupal::currentUser()->isAnonymous();
     $element['#toolbar_links'] = [
       '#theme' => 'item_list',
       '#list_type' => 'ul',
       '#title' => '',
       '#items' => $items_toolbar_links,
-      '#attributes' => ['class' => 'cern-signedin'],
+      '#attributes' => ['class' => ['cern-signedin', 'toolbar-submenu']],
     ];
 
     return $element;

templates/cern-toolbar.html.twig

@@ -6,7 +6,12 @@
         </a>
     </h1>
     <ul>
-        <li>{{ toolbar_links }}</li>
+        <li class="signin"> 
+            {% if not logged_in %}
+                <span class="cern-signin">{{ 'Sign in' | t }}</span>
+            {% endif %}
+            {{ toolbar_links }}
+        </li>
         <li>{{ directory_link }}</li>
     </ul>
 </div>
\ No newline at end of file