44 nav bar com erro (#103)

resolve #44 * arrumando a navbar para abrir em todas as paginas * criando um script para abrir a nav bar e ficar como active * alterando a cor da navbar * alterando a cor da navbar * Delete assets/js/utils.js --------- Co-authored-by: brunoazuma <[email protected]>
sepep-pmsp · Feb 1, 2024 · 07e9f81 · 07e9f81
1 parent 20c0370
commit 07e9f81
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 12 deletions.
diff --git a/_includes/_navigation.html b/_includes/_navigation.html
@@ -4,14 +4,18 @@
 *  edit `_data/navigation.yml`.
 *
 {% endcomment %}
+
+
+
+
 <div id="navigation" class="sticky">
-  <nav class="top-bar" role="navigation" data-topbar data-options="scrolltop: false">
+  <nav id="topBar" class="top-bar" role="navigation" data-topbar data-options="scrolltop: false">
     <ul class="title-area">
       <li class="name">
       <h1 class="hide-for-large-up"><a href="{{ site.url }}{{ site.baseurl }}" class="icon-tree"> {{ site.title }}</a></h1>
     </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
-      <li class="toggle-topbar toggle-topbar-click menu-icon"><a><span>Nav</span></a></li>
+      <li class="toggle-topbar toggle-topbar-click menu-icon" id="clica_ni_mim_matheus"><a id="botao" onclick="abrirMenuSanduiche()"><span class="nav-toggle">Nav</span></a></li>
     </ul>
     <section class="top-bar-section">
 {% comment %}
@@ -137,3 +141,27 @@ <h1 class="hide-for-large-up"><a href="{{ site.url }}{{ site.baseurl }}" class="
     </section>
   </nav>
 </div><!-- /#navigation -->
+
+
+
+<script>
+
+
+
+function abrirMenuSanduiche () {
+
+  let botao = document.getElementById("botao")
+  let navigation = document.getElementById("navigation")
+  let topBar =  document.getElementById("topBar")
+
+  let listItens = document.querySelector(".divider")
+
+        navigation.classList.toggle("expanded")
+        navigation.classList.toggle("fixed")
+        topBar.classList.toggle("expanded")
+        topBar.classList.toggle("fixed")
+        listItens.classList.remove("divider")
+        listItens.classList.add("active")
+
+    }
+</script>
diff --git a/_sass/foundation-components/_global.scss b/_sass/foundation-components/_global.scss
@@ -167,17 +167,17 @@ $base-line-height: 1.5 !default;
       #{$opposite-direction}: $topbar-link-padding;
     }
 
-    box-shadow: 0 0 0 $thickness $color,
-    0 ($gap + $thickness) 0 $thickness $color,
-    0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+    box-shadow: 0 0 0 $thickness $hue-orange-1,
+    0 ($gap + $thickness) 0 $thickness $hue-orange-1,
+    0 (2 * $gap + 2*$thickness) 0 $thickness $hue-orange-1;
     width: $width;
   }
 
   span:hover:after {
     box-shadow:
-      0 0 0 $thickness $hover-color,
-      0 $gap + $thickness 0 $thickness $hover-color,
-      0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
+      0 0 0 $thickness $dark-orange-2,
+      0 $gap + $thickness 0 $thickness $dark-orange-2,
+      0 (2 * $gap + 2*$thickness) 0 $thickness $dark-orange-2;
   }
 }
 

diff --git a/_sass/foundation-components/_top-bar.scss b/_sass/foundation-components/_top-bar.scss
@@ -331,7 +331,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
       }
 
       ul li {
-        background: $topbar-dropdown-bg;
+        background: #1a304e;
+        ;
 
         &>a {
           display: block;
@@ -763,13 +764,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
               background: $topbar-link-bg-hover;
             }
 
-            color: $topbar-link-color-hover;
+            color: $hue-orange-1;
           }
 
           // Apply the active link color when it has that class
           &:active>a {
             background: $topbar-link-bg-active;
-            color: $topbar-link-color-active;
+            color: $hue-orange-1;
           }
         }
 
@@ -787,4 +788,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
       }
     }
   }
-}
+}
+
+.nav-toggle{
+  color: $hue-orange-1;
+}