Fix navbar responsive behavior

it was removed the background color of the navbar, the logo re-sizing works well,
also, was added more spacing between menu options and button and was added max-width resolution.

app/assets/stylesheets/home/navbar.scss

@@ -12,6 +12,10 @@ $bright-cyan: #5eefe1;
  margin-left: auto;
 }
 
+.container-fluid{
+ max-width:1920px;
+}
+
 nav {
  display: block;
  padding-left: 5%;
@@ -20,10 +24,6 @@ nav {
  font-weight: bold;
 }
 
-.navbar{
- background-image: radial-gradient(circle at 120.71% 50%, #7043f3 0, #3c3cf2 50%, #0037f1 100%);
-} 
-
 #logo {
  margin-top: 20px;
  margin-bottom: 20px;
@@ -106,7 +106,6 @@ nav {
  width: 250px;
  margin-left: 0px;
  }
-
 }
 
 @media (min-width:992px){
@@ -125,6 +124,7 @@ nav {
  }
 
  #link {
+ margin: 16.5px 15px 11.5px 15px;
  &:hover {
  @extend %text-under;
  }
@@ -135,6 +135,7 @@ nav {
  border: 2px solid white;
  font-weight: bold;
  border-radius: 8px;
+ margin: 16.5px 15px 11.5px 15px;
  width: 100px;
  &:hover {
  color: $bright-cyan;

app/javascript/packs/navbar.js

@@ -19,10 +19,13 @@ document.addEventListener("turbolinks:load", function () {
  }
 
  window.addEventListener("resize", function(){
- if (window.matchMedia("(min-width: 992px)").matches){
+ let aria = document.getElementById('button').getAttribute("aria-expanded"); 
+ if ((aria == "true") && (window.matchMedia("(min-width: 992px)").matches)) {
+ logoContainer.className = 'logo-container-close';
  document.getElementById("logo").setAttribute('src', logos[0]);
- }else{
- if (!document.getElementById('button').classList.contains('collapsed')) {
+ }else {
+ if ((aria == "true")) {
+ logoContainer.className = 'logo-container-open';
  document.getElementById("logo").setAttribute('src', logos[1]);
  }
  }

app/views/layouts/_navbar.html.erb

@@ -1,10 +1,11 @@
 <nav class="navbar navbar-expand-lg navbar-light ">
  <div class="container-fluid">
- <div class="logo-container-close" id = "logo-container">
+ <div class="logo-container-close" id="logo-container">
  <%= image_tag "BCnameLogo.png", alt: t('menu.logo'), class: "logo-closed", id:"logo" %>
  </div>
- <button id="button" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
- aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="border: none; box-shadow: none">
+ <button id="button" class="navbar-toggler" type="button" data-bs-toggle="collapse"
+ data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
+ aria-label="Toggle navigation" style="border: none; box-shadow: none">
  <%= image_tag "list.svg", alt: t('menu.logo'), id:"image" %>
  </button>
  <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
@@ -24,13 +25,13 @@
  <li class="nav-item" id="borderContacto">
  <a class="nav-link" aria-current="page" href="#" id="linkContacto"><%= t('menu.contact') %></a>
  </li>
-
+
+ </div>
+ <div class="group609">
+ <%= image_tag "Group 609.svg", alt: "group609" %>
  </div>
- <div class="group609">
- <%= image_tag "Group 609.svg", alt: "group609" %> 
- </div>
  </div>
+ </div>
 </nav>
 
- <%= javascript_pack_tag 'navbar', 'data-turbolinks-track': 'reload' %>
-
+<%= javascript_pack_tag 'navbar', 'data-turbolinks-track': 'reload' %>