Start style mobile

app/assets/stylesheets/extranet/_default/layouts/_header.sass

@@ -6,6 +6,21 @@
     .active
         .nav-link
             color: $navbar-link-active-color
+    .navbar-collapse
+        flex-grow: 0
+    @include media-breakpoint-up(md)
+        .nav
+            li:last-child .nav-link
+                padding-right: 0
+    @include media-breakpoint-down(md)
+        .nav
+            display: block
+            text-align: right
+    .navbar-toggler
+        border: 0
+        font-size: px2rem(14)
+        line-height: px2rem(28)
+        text-transform: uppercase
 header
     align-items: center
     border-bottom: 1px solid

app/assets/stylesheets/extranet/_default/pages/_person.sass

@@ -19,16 +19,23 @@
                     @include make-col-ready
                     padding-bottom: px2rem(10)
                     padding-top: px2rem(10)
-                    &:nth-child(1)
-                        width: percentage(4/9)
-                    &:nth-child(2)
-                        width: percentage(2/9)
                     &:nth-child(3)
                         align-self: center
                         padding-bottom: 0
                         padding-top: 0
                         text-align: right
-                        width: percentage(3/9)
+                    @include media-breakpoint-up(md)
+                        &:nth-child(1)
+                            width: percentage(4/9)
+                        &:nth-child(2)
+                            width: percentage(2/9)
+                        &:nth-child(2)
+                            width: percentage(3/9)
+                    @include media-breakpoint-down(md)
+                        &:nth-child(2)
+                            width: 50%
+                        &:nth-child(3)
+                            width: 50%
                 &:last-child
                     @include pseudo-bottom-border
                 img

app/views/extranet/application/_footer.html.erb

@@ -12,7 +12,7 @@
         </div>
       </address>
 
-      <nav class="text-end col-md-6">
+      <nav class="text-md-end col-md-6">
         <%= link_to t('terms_of_service'),
                     t('terms_of_service_url'),
                     target: '_blank',

app/views/extranet/application/_nav.html.erb

-<nav class="navbar navbar-light">
+<nav class="navbar navbar-light navbar-expand-md">
   <div class="container">
     <a class="navbar-brand" href="/">
       <%= render 'logo' %>
     </a>
-    <%= render_navigation %>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle menu">
+      menu <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="menu">
+      <%= render_navigation %>
+    </div>
   </div>
 </nav>