User navigation (#668)

* Create 'nav user' component * Add login link variant * Add nav user to the header and lab homepage template
epfl-si · Aug 3, 2023 · 5ab3cf0 · 5ab3cf0
1 parent 6e77454
commit 5ab3cf0
Show file tree

Hide file tree

Showing 13 changed files with 224 additions and 10 deletions.
diff --git a/assets/components/atoms/dropdown/dropdown.scss b/assets/components/atoms/dropdown/dropdown.scss
@@ -7,4 +7,29 @@
     background: $primary;
     color: $white !important;
   }
+
+  .icon {
+    margin-right: 0.25rem;
+    vertical-align: middle;
+  }
+
+  .icon + * {
+    vertical-align: middle;
+  }
+}
+
+li.dropdown-item:before {
+  content: none;
 }
+
+.dropdown {
+  .dropdown-toggle:after {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &.show {
+    .dropdown-toggle:after {
+      transform: rotate(180deg);
+    }
+  }
+}
diff --git a/assets/components/atoms/nav-lang/nav-lang.scss b/assets/components/atoms/nav-lang/nav-lang.scss
@@ -220,12 +220,12 @@
     .dropdown-toggle,
     .dropdown-item {
       width: auto;
-      height: 2.125rem;
-      padding: ($spacer * 0.4) ($spacer * 1.5) ($spacer * 0.4) ($spacer * 0.5);
+      height: 2.5rem;
+      padding: ($spacer * 0.5) ($spacer * 1.5) ($spacer * 0.5) ($spacer * 0.625);
     }
 
     .icon {
-      transform: translateY($spacer * 0.1);
+      display: none;
     }
   }
 }
diff --git a/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss b/assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss
@@ -5,12 +5,16 @@
   flex-flow: row nowrap;
   align-items: baseline;
   margin: 0;
-  padding: (.8 * $spacer) (.9 * $spacer);
+  padding: (.8125 * $spacer) (.875 * $spacer);
   font-size: 1 * $font-size-base;
   font-weight: bold !important;
-
+  
   @include media-breakpoint-up(sm) {
-    padding: (.625 * $spacer) (.9 * $spacer);
+    padding: (.5 * $spacer) (.9375 * $spacer);
+  }
+
+  @include media-breakpoint-up(md) {
+    padding: (.625 * $spacer) (.9375 * $spacer);
   }
 
   .label {

diff --git a/assets/components/atoms/nav-user/nav-user-login.twig b/assets/components/atoms/nav-user/nav-user-login.twig
@@ -0,0 +1,6 @@
+<div class="nav-user user-login mr-lg-2">
+  <a href="#" class="user-login-link">
+    {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
+    <span class="label">Connexion</span>
+  </a>
+</div>
diff --git a/assets/components/atoms/nav-user/nav-user.scss b/assets/components/atoms/nav-user/nav-user.scss
@@ -0,0 +1,133 @@
+.user-dropdown .btn {
+  display: flex;
+  align-items: center;
+  padding: $btn-padding-y-sm $btn-padding-x-sm;
+  border: 0;
+
+  .user-avatar {
+    --avatar-size: 2.5rem;
+    flex-basis: var(--avatar-size);
+    width: var(--avatar-size);
+
+    @include media-breakpoint-up(sm) {
+      --avatar-size: 2.625rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      --avatar-size: 2.875rem;
+    }
+  }
+
+  p {
+    margin: 0 0.5rem 0 1rem;
+  }
+}
+
+.header .nav-user {
+  margin-left: auto;
+
+
+  & + .nav-lang {
+    margin-left: 0 !important;
+  }
+}
+
+.nav-user.user-login {
+  position: relative;
+  padding-left: 1.5rem;
+
+  .icon {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    margin-right: 0.25rem;
+  }
+}
+
+
+@include media-breakpoint-down(lg) {
+  .header .nav-user {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+
+  .header .nav-user-login {
+    padding: 0;
+
+    .user-login-link {
+      padding: 0.5em;
+    }
+
+    .label {
+      @include sr-only;
+    }
+    .icon {
+      position: static;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin: 0;
+    }
+  }
+
+  .header .nav-user {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+
+    & + .nav-lang-short > ul {
+      padding-left: 0 !important;
+    }
+
+    .btn {
+      padding: $btn-padding-y-sm;
+    }
+
+    &:not(.show) {
+      .btn {
+        border-radius: 50%;
+
+        &:after {
+          content: none;
+        }
+      }
+      .user-name {
+        @include sr-only;
+      }
+    }
+
+    &.show {
+      position: fixed;
+      top: 0.625rem;
+      right: 0.75rem;
+      left: 0.75rem;
+      //width: calc(100vw - 1.8rem);
+      margin: 0;
+      background: white;
+      z-index: 1199;
+
+      .btn {
+        width: 100%;
+        padding-left: $btn-padding-y;
+        padding-right: $btn-padding-y;
+        border: 2px solid $gray-600;
+        border-bottom: 0;
+        border-radius: 2px 2px 0 0;
+
+        &:after {
+          margin-left: auto;
+        }
+      }
+
+      .dropdown-menu {
+        top: -2px !important;
+        left: 0 !important;
+        width: 100%;
+        border: 2px solid $gray-600;
+        border-top: 0;
+        border-radius: 0 0 2px 2px;
+      }
+    }
+  }
+}
diff --git a/assets/components/atoms/nav-user/nav-user.twig b/assets/components/atoms/nav-user/nav-user.twig
@@ -0,0 +1,16 @@
+<div class="nav-user dropdown user-dropdown mr-lg-2">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <img class="user-avatar rounded-circle" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
+    <p class="user-name">Heidy Traill</p>
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <li class="dropdown-item">
+      {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
+      <a href="#">Accéder à mon compte</a>
+    </li>
+    <li class="dropdown-item">
+      {% include '@atoms/icon/icon.twig' with {'icon': 'log-out', icon_classes: 'feather'} %}
+      <a href="#">Me déconnecter</a>
+    </li>
+  </ul>
+</div>
diff --git a/assets/components/atoms/nav-user/nav-user.yml b/assets/components/atoms/nav-user/nav-user.yml
@@ -0,0 +1,10 @@
+title: Nav user
+name: nav-user
+notes: |
+  * If included in the header, the user dropdown and login link should be placed between the search form and language selector.
+  * If you choose to place it elsewhere, you may need to adjust the Boostratp margin classes on the `.nav-user` element.
+  * An example of user menu integration can be found on the [Laboratory Homepage](#/pages/lab-homepage) template page.
+variants:
+  - name: login
+    title: Login link
+    notes: 
diff --git a/assets/components/entrypoint.scss b/assets/components/entrypoint.scss
@@ -45,6 +45,7 @@
 @import 'atoms/figure/figure';
 @import 'atoms/loader/loader';
 @import 'atoms/favicon/favicon';
+@import 'atoms/nav-user/nav-user';
 
 // molecules:
 @import 'molecules/search/search';

diff --git a/assets/components/organisms/header/header-light.twig b/assets/components/organisms/header/header-light.twig
@@ -1,5 +1,8 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
+{% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
+{% if nav_user is not defined %}{% set nav_user = false %}{% endif %}
 {% set site_title = site_title|default('sub site name') %}
+
 <header role="banner" class="header header-light">
   <div class="header-light-content">
     <a class="logo" href="https://www.epfl.ch">
@@ -30,7 +33,15 @@
     </ul>
     {% include '@molecules/search/search-mobile.twig' %}
     {% include '@molecules/search/search.twig' %}
-    {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {%  if nav_user %}
+      {% include '@atoms/nav-user/nav-user.twig' %}
+    {% endif %}
+    {%  if long_nav_lang %}
+      {% include '@atoms/nav-lang/nav-lang.twig' %}
+    {% endif %}
+    {%  if long_nav_lang == false %}
+      {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {% endif %}
     {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
   </div>
 </header>
diff --git a/assets/components/organisms/header/header.scss b/assets/components/organisms/header/header.scss
@@ -187,13 +187,13 @@
     align-items: center;
 
     @include media-breakpoint-down(sm) {
-      .nav-toggle-mobile {
+      :not(.nav-lang.dropdown, .nav-user) + .nav-toggle-mobile {
         padding: .5rem 0.9rem;
       }
     }
 
     @include media-breakpoint-down(xs) {
-      .nav-toggle-mobile {
+      :not(.nav-lang.dropdown, .nav-user) + .nav-toggle-mobile {
         padding: .625rem 0.9rem;
       }
     }

diff --git a/assets/components/organisms/header/header.twig b/assets/components/organisms/header/header.twig
@@ -1,5 +1,6 @@
 {% if language is not defined %}{% set language = 'fr' %}{% endif %}
 {% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
+{% if nav_user is not defined %}{% set nav_user = false %}{% endif %}
 
 <header role="banner" class="header">
   <a class="logo" href="#">
@@ -22,6 +23,9 @@
   </ul>
   {% include '@molecules/search/search.twig' %}
   {% include '@molecules/search/search-mobile.twig' %}
+  {%  if nav_user %}
+    {% include '@atoms/nav-user/nav-user.twig' %}
+  {% endif %}
   {%  if long_nav_lang %}
     {% include '@atoms/nav-lang/nav-lang.twig' %}
   {% endif %}

diff --git a/assets/components/pages/association-homepage/association-homepage.twig b/assets/components/pages/association-homepage/association-homepage.twig
@@ -3,7 +3,7 @@
 {% extends "@templates/base/base.twig" %}
 
 {% block header %}
-  {% include '@organisms/header/header-light.twig' with { site_title: 'Association title' } %}
+  {% include '@organisms/header/header-light.twig' with { site_title: 'Association title',  long_nav_lang: true, nav_user: true } %}
 {% endblock %}
 
 {% block content %}

diff --git a/assets/components/pages/lab-homepage/lab-homepage.twig b/assets/components/pages/lab-homepage/lab-homepage.twig
@@ -1,5 +1,9 @@
 {% extends "@templates/base/base.twig" %}
 
+{% block header %}
+  {% include '@organisms/header/header.twig' with { nav_user: true } %}
+{% endblock %}
+
 {% set nav_aside_items = [{
   label: "Laboratory Full Name",
   children: ["Projects", "Publications", "News", "Team", "Teaching"]