new menubar mobile

gestaoRaul/templates/base.html

@@ -26,7 +26,7 @@
                 <h1>
                      <img src="{% static 'midia/logo.png'  %}" width="60">
                 </h1>
-                <button id="icon-notify" style="border: none; margin-left: 10px; border-radius: 20px; height: 40px;width: 40px; padding: 2px; align-self: center;" onclick="cookieNotificacao()" >🔔</button>
+                <!-- <button id="icon-notify" style="border: none; margin-left: 10px; border-radius: 20px; height: 40px;width: 40px; padding: 2px; align-self: center;" onclick="cookieNotificacao()" >🔊</button> -->
             </div>
             <div class="nav-list">
                 <ul>
@@ -57,11 +57,55 @@
                 <a href="{% url 'logout' %}" style="width: 50px;"><img src="{% static 'midia/icons/logout.svg'  %}" style="width: 40px;"></a>
             </div>
 
+
+
+
             <div class="mobile-menu-icon">
                 <button onclick="menuShow()"><img class="icon" src="https://raw.githubusercontent.com/Larissakich/menu_responsivo/6e3b09504434628c1b01f65b7d8ccf6ace3225cb/menu%20responsivo/assets/img/menu_white_36dp.svg" alt=""></button>
             </div>
         </nav>
-        <div class="mobile-menu">
+
+
+
+
+
+        <div class="header-mobile">
+            <div class="logo">
+                <button id="icon-notify" style="border: none; margin-left: 10px; border-radius: 20px; height: 40px;width: 40px; padding: 2px; align-self: center;" onclick="cookieNotificacao()" >🔊</button>
+
+                <span>RRBEC</span>
+            </div>
+            <button class="nav-toggle"><i for="menu-toggle" class="fas fa-bars"></i></button>
+
+            <nav id="nav-links" class="nav-links">
+                <div class="nav-component">
+                    {% if user|groupUser:"Gerente" %}
+                    <a href="{% url 'home' %}" class="nav-link">DashBoard</a>
+                    {% endif %}
+                    <a href="{% url 'comandas' %}" class="nav-link">Comandas</a>
+                    <a href="{% url 'pedidos' %}" class="nav-link">Cozinha</a>
+                    <a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a>
+                    <a href="{% url 'products' %}" class="nav-link"> Produtos</a>
+                    <a href="{% url 'clients' %}" class="nav-link"> Clientes</a>
+                    {% if user|groupUser:"Gerente" %}
+                    <a href="{% url 'admin:index' %}" class="nav-link">Admin</a> 
+                    {% endif %}
+                    <!-- <div class="dropdown">
+                        <li class="">Cadastros<img class="img-drop" src="{% static 'midia/icons/down.svg' %}" style="width: 35px;"> </li>
+                            <div class="dropdown-content">
+                                <a href="{% url 'products' %}" class="nav-link"> Produtos</a>
+                                <a href="{% url 'categories' %}" class="nav-link"> Categorias</a>
+                                <a href="{% url 'clients' %}" class="nav-link"> Clientes</a>
+                                <a href="{% url 'admin:index' %}" class="nav-link">Admin</a>                       
+                            </div>
+                        </li>
+                    </div> -->
+
+                </div>
+            </nav>
+        </div>
+
+        <!-- <div class="mobile-menu">
             <ul>
                 {% if user|groupUser:"Gerente" %}
                 <li class="nav-item"><a href="{% url 'home' %}" class="nav-link">Início</a></li>
@@ -87,7 +131,10 @@
                 {{ user.first_name }} {{ user.last_name }}
                 <a href="{% url 'logout' %}"><img src="{% static 'midia/icons/logout.svg'  %}" style="width: 40px;"></a>
             </div>
-        </div>
+        </div> -->
+
+
+
     </header>
     
     

gestaoRaul/templates/static/base.css

@@ -381,3 +381,123 @@ input, textarea, select {
       display: flex;
     }
 }
+
+
+
+
+
+
+
+
+
+
+.header-mobile {
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #171525;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+  /* backdrop-filter: blur(5px); */
+  padding: 1rem;
+  padding-right: 50px;
+  padding-left: 10px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999; 
+}
+
+.header-mobile .logo {
+  display: flex;
+  align-items: center;
+  margin-left: 25px;
+}
+
+.header-mobile .logo i {
+  color: #fbbf24;
+  font-size: 2rem;
+}
+
+.header-mobile .logo span {
+  
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-left: .5rem;
+}
+
+.header-mobile .nav-toggle {
+  display: block;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding-right: 0;
+  margin-right: 10;
+}
+
+.header-mobile .nav-toggle i {
+  color: white;
+  font-size: 1.5rem;
+}
+
+.header-mobile .nav-links {
+  max-width: 70%;
+  position: fixed;
+  top: 83px;
+  left: -100%; 
+  width: 100%;
+  height: 100vh;
+  background-color: #222033b9;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: left 0.3s ease-in-out;
+  z-index: 9998;
+}
+
+.header-mobile .nav-links .nav-component{
+  width: 100%;
+  justify-items: center;
+  justify-content: space-between;
+}
+
+
+.header-mobile .nav-links.active {
+  left: 15%; 
+}
+
+.header-mobile .nav-links a {
+  color: #a0aec0;
+  text-decoration: none;
+  font-size: 1.2rem;
+  margin: 1rem 0;
+  display: block;
+  width: 90%;
+  text-align: center;
+  padding: 1rem;
+  transition: all 0.3s;
+}
+
+.header-mobile .nav-links a:hover {
+  color: white;
+  scale: 1.1;
+  background-color: #373543;
+  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
+  transition: all 0.3s ;
+}
+
+
+@media screen and (max-width: 768px) {
+  .background .bg1 {
+      max-height: 21.5%;
+  }
+  /* .nav-bar {
+      display: none;
+  } */
+
+  .header-mobile {
+      display: flex;
+  }
+}

gestaoRaul/templates/static/base.js

@@ -1,14 +1,39 @@
+
+
+document.addEventListener('DOMContentLoaded', function() {
+  const navToggle = document.querySelector('.nav-toggle');
+  const navLinks = document.querySelector('.nav-links');
+
+  if (navToggle) {
+    navToggle.addEventListener('click', function() {
+      navLinks.classList.toggle('active');
+    });
+  }
+  document.addEventListener('click', function(event) {
+    if (navLinks.classList.contains('active') && !navLinks.contains(event.target) && !navToggle.contains(event.target)) {
+      navLinks.classList.remove('active');
+    }
+  });
+});
+
+
+
+
+
+
+
+
+
 function verificarCookieNotificacao() {
-  console.log('cookie notificacao verificado');
+  var iconNotify = document.getElementById('icon-notify');
   if (document.cookie.indexOf('notificacao=') === -1) {
     document.cookie = 'notificacao=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
-    var iconNotify = document.getElementById('icon-notify');
     iconNotify.style.backgroundColor = 'green';
-    console.log('cookie notificacao criado');
+    iconNotify.textContent = '🔊';
   }else{
     let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-    var iconNotify = document.getElementById('icon-notify');
     iconNotify.style.backgroundColor = valorAtual === 'true' ? 'green' : 'red';
+    iconNotify.textContent = valorAtual === 'true' ? '🔊' : '🔇';
   }
 }
 verificarCookieNotificacao();
@@ -20,8 +45,10 @@ function cookieNotificacao() {
     let novoValor = valorAtual === 'true' ? 'false' : 'true';
     if (novoValor === 'true') {
       iconNotify.style.backgroundColor = 'green';
+      iconNotify.textContent = '🔊';
     }else{
       iconNotify.style.backgroundColor = 'red';
+      iconNotify.textContent = '🔇';
     }
     document.cookie = 'notificacao=' + novoValor + '; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
   } else {
@@ -47,11 +74,9 @@ websocket.addEventListener('message', (event) => {
         var fila = document.getElementById('Fila').appendChild(novoElemento); 
         let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
         if (valorAtual === 'true') {
-          
           texto = new SpeechSynthesisUtterance(data.speak);
           window.speechSynthesis.speak(texto);
         }
-        console.log('Mensagem recebida:', data.local);
       }
       else if (document.getElementById('obs-'+data.id) !== null && data.tipo === 'edit'){
         const obs = document.getElementById('obs-'+data.id)
@@ -64,54 +89,41 @@ websocket.addEventListener('message', (event) => {
         texto = new SpeechSynthesisUtterance(data.speak);
         window.speechSynthesis.speak(texto);
         }
-        console.log('Mensagem recebida:', data.local);
       }
       else if (document.getElementById('m-card-'+data.id) !== null && data.tipo === 'delete'){
         const card = document.getElementById('m-card-'+data.id)
         card.style.backgroundColor = 'rgb(253, 69, 69)';
-        // obs.innerHTML = data.message;
         let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-
         if (valorAtual === 'true') {
         texto = new SpeechSynthesisUtterance(data.speak);
         window.speechSynthesis.speak(texto);
         }
-        console.log('Mensagem recebida:', data.local);
       }
       
       break;
     case 'praca':
-      console.log('Código a ser executado se expressao === valor2')
+      console.log('Mensagem para a praca:', data);
       break;
-    case 'guarita':
-      // Código a ser executado se expressao === valor3
-      break;
-    case 'balcao':
-      // Código a ser executado se expressao === valor3
+      case 'guarita':
+        console.log('Mensagem para a guarita:', data);
+        break;
+        case 'balcao':
+      console.log('Mensagem para a balcao:', data);
       break;
     default:
       console.log('Local desconhecido:', data);
   }
 
-
-
-
-
-
 });
-
 websocket.addEventListener('error', (event) => {
   console.error('Erro no WebSocket:', event);
 });
-
 websocket.addEventListener('close', (event) => {
     console.log("conexão fechada");
 });
 
 
 
-
-
 function menuShow() {
     let menuMobile = document.querySelector('.mobile-menu');
     if (menuMobile.classList.contains('open')) {