Atualização do Menu igual ao da Silo

Replicado o menu do site da Silo para o LAB de Governança

Criei uma versão do arquivo “menu-itens.html” que funciona no site da Silo e aqui, para facilitar compatibilidade e possível integração com os outros nove menus.

Como o menu, antes mesmo da atualização, não estava posicionado corretamente com algumas larguras de navegador, precisei alinhar e reposicionar corretamente os elementos pelo main.scss para garantir a responsividade.

_includes/menu-items.html

@@ -1,32 +1,48 @@
+<!-- Atualizado em 05/08/2024, com os links do site da Silo -->
+
+{% assign silo_url = '' %}
+{% if site.repository != 'associacaosilo/silo.org.br' %}
+  {% assign silo_url = 'https://silo.org.br' %}
+{% endif %}
+
 <div class="menu-section">
   <ul>
-      <li><a href="{{ site.silo_url }}/sobre/" target="_blank">
-        sobre
-      </a></li>
-      <li><a href="{{ site.silo_url }}/quem-somos/" target="_blank">
-        quem somos
-      </a></li>
-      <li><a href="{{ site.silo_url }}/noticias/" target="_blank">
-        notícias
-      </a></li>
+    {% case page.lang %}
+      {% when 'en' %}
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/about/">about</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/who-we-are/">who we are</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/news/">news</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/donate/">donate</a></li>
+      {% else %}
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/sobre/">sobre</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/quem-somos/">quem somos</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/noticias/">notícias</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/biblioteca/">biblioteca</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/transparencia/">Transparência</a></li>
+    {% endcase %}
   </ul>
 </div>
 <div class="menu-section">
   <ul>
-      <li><a href="{{ site.silo_url }}/caipiratechlab/" target="_blank">
-        Caipiratech LAB
-      </a></li>
-      <li><a href="{{ site.silo_url }}/encontrada/" target="_blank">
-        Encontrada
-      </a></li>
-      <li><a href="{{ site.silo_url }}/residencia/" target="_blank">
-        Residência
-      </a></li>
-      <li><a href="{{ site.silo_url }}/labs/" target="_blank">
-        Laboratórios
-      </a></li>
+    {% case page.lang %}
+      {% when 'en' %}
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/en/caipiratechlab/">caipiraTech lab</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/en/encontrada/">encontrada</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/en/residencia/">residency</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/en/labs/">labs</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/siloescola/">silo escola</a></li>
+      {% else %}
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/caipiratechlab/">caipiraTech lab</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/encontrada/">encontrada</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/residencia/">residência</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/labs/">laboratórios</a></li>
+        <li><a href="{{ silo_url }}{{ site.baseurl }}/siloescola/">silo escola</a></li>
+    {% endcase %}
   </ul>
 </div>
 <div class="menu-section">
   {% include social-icons.html %}
+  {% if page.lang}
+    {% include language-selection.html %}
+  {% endif %}
 </div>

css/main.scss

@@ -104,7 +104,8 @@ a {
   left: -100vw;
   @include media-query(DESKTOP) {
     left: 0;
-    top: -155px;
+    //top: -155px;
+    top: -180px;
   }
 }
 .menu-show {
@@ -159,11 +160,13 @@ a {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
-    padding: 30px 12% 0 8%;
+    //padding: 30px 12% 0 8%;
+    padding: 30px 0% 0 5%;
   }
 
   .menu-title {
-    width: 25%;
+    //width: 25%;
+    width: 20%;
   }
 
   #menu-button {
@@ -176,18 +179,23 @@ a {
   .menu-container {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
-    padding: 0 2vw;
+    //justify-content: flex-start;
+    justify-content: space-evenly;
+    //padding: 0 2vw;
+    padding-right: 4%;
+    padding-left: 2%;
+    width: 74%;
   }
 
   .menu-section {
     width: 20%;
     max-width: 200px;
-    min-width: 150px;
-  }
-  .menu-section+.menu-section {
-    margin-left: 10%;
+    //min-width: 150px;
+    min-width: 140px;
   }
+  //.menu-section+.menu-section {
+    //margin-left: 10%;
+  //}
 }
 
 #menu-mobile ul, #menu ul {