Feat(component): r-engineering vol.21, add socials in mobile menu

ouitoulia · Jul 14, 2023 · 7527e6a · 7527e6a
1 parent aef5c5f
commit 7527e6a
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 28 deletions.
diff --git a/includes/preprocess-region.inc b/includes/preprocess-region.inc
@@ -0,0 +1,20 @@
+<?php
+
+/**
+ * @file
+ * Preprocess region.
+ */
+
+use Drupal\bootstrap_italia\Helper\Helper;
+
+/**
+ * Implements hook_preprocess_region().
+ */
+function skenografia_preprocess_region(array &$variables): void {
+
+  if ($variables['region'] == 'header_nav') {
+    // Social.
+    $variables['social_new_window'] = (bool) theme_get_setting('social_new_window');
+    $variables['socials'] = Helper::getActiveSocials();
+  }
+}
diff --git a/src/scss/custom/layout/_header.scss b/src/scss/custom/layout/_header.scss
@@ -76,46 +76,68 @@
     }
   }
 
-  .it-header-center-wrapper {
-    .it-header-center-content-wrapper {
-      .it-brand-wrapper {
-        .it-brand-text {
-          .it-brand-title {
-            font-weight: $header-center-h2-weight;
-          }
-          .it-brand-tagline,
-          .it-brand-comune {
-            font-size: $header-center-h2-size-mob;
-          }
-          @include media-breakpoint-up(lg) {
+  .it-nav-wrapper {
+    .it-header-center-wrapper {
+      .it-header-center-content-wrapper {
+        .it-brand-wrapper {
+          .it-brand-text {
+            .it-brand-title {
+              font-weight: $header-center-h2-weight;
+            }
             .it-brand-tagline,
             .it-brand-comune {
-              font-size: $header-center-h3-size;
+              font-size: $header-center-h2-size-mob;
+            }
+            @include media-breakpoint-up(lg) {
+              .it-brand-tagline,
+              .it-brand-comune {
+                font-size: $header-center-h3-size;
+              }
             }
           }
         }
-      }
 
-      .it-right-zone {
-        .it-socials,
-        .it-search-wrapper {
-          & > span {
-            font-weight: 600;
+        .it-right-zone {
+          .it-socials,
+          .it-search-wrapper {
+            & > span {
+              font-weight: 600;
+            }
           }
         }
-      }
 
+      }
     }
-  }
 
-  .it-header-navbar-wrapper.theme-light-desk .navbar .navbar-collapsable .navbar-nav {
-    li a.nav-link {
-      @extend .fw-semibold;
+    .it-header-navbar-wrapper {
+      .menu-wrapper {
+        .social-mobile-menu {
+          padding-left: 42px;
+          padding-right: 42px;
+          span {
+            font-weight: 600;
+          }
+          ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            li {
+              margin: 12px 12px 12px 0;
+            }
+          }
+        }
+      }
+      &.theme-light-desk .navbar .navbar-collapsable .navbar-nav {
+        li a.nav-link {
+          @extend .fw-semibold;
+        }
+        > li:nth-child(1) a.nav-link {color: $bi-school;}
+        > li:nth-child(2) a.nav-link {color: $bi-services;}
+        > li:nth-child(3) a.nav-link {color: $bi-news;}
+        > li:nth-child(4) a.nav-link {color: $bi-learning;}
+      }
     }
-    > li:nth-child(1) a.nav-link {color: $bi-school;}
-    > li:nth-child(2) a.nav-link {color: $bi-services;}
-    > li:nth-child(3) a.nav-link {color: $bi-news;}
-    > li:nth-child(4) a.nav-link {color: $bi-learning;}
   }
 
 }
diff --git a/templates/region/header-nav/region--header-nav.html.twig b/templates/region/header-nav/region--header-nav.html.twig
@@ -15,9 +15,26 @@
  */
 #}
 {% embed '@bootstrap_italia/region/header-nav/region--header-nav.html.twig' %}
+
   {% block togglerIcon %}
     <span class="hamburger-box">
       <span class="hamburger-inner"></span>
     </span>
   {% endblock %}
+
+  {% block menuContent %}
+
+    {{ content }}
+
+    {% if socials %}
+      {% include '@bi-bcl/share/follow-us.html.twig' with {
+        socials: socials,
+        label: 'Follow us on'|t,
+        icon_color: center_header_light ? 'white' : 'gray-primary',
+        blank: social_new_window,
+        followus_classes: ["it-socials", "social-mobile-menu", "d-lg-none", "mt-4"]
+      } %}
+    {% endif %}
+
+  {% endblock %}
 {% endembed %}