feat: menu dropdown in navbar

This commit is contained in:
2025-01-13 16:52:34 -03:00
parent 956841ef2a
commit 3dae764fc8
5 changed files with 87 additions and 26 deletions

Binary file not shown.

View File

@@ -1,7 +1,6 @@
{% load static %}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
@@ -26,10 +25,20 @@
<ul>
<li class="nav-item"><a href="{% url 'home' %}" class="nav-link">Início</a></li>
<li class="nav-item"><a href="{% url 'comandas' %}" class="nav-link">Comandas</a></li>
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link"> Pedidos</a></li>
<li class="nav-item"><a href="{% url 'products' %}" class="nav-link"> Produtos</a></li>
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link">Cozinha</a></li>
<li class="nav-item"><a href="{% url 'viewBalcao' %}" class="nav-link"> Balcão</a></li>
<li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link"> Mapa</a></li>
<div class="dropdown">
<li class="nav-item">Cadastros </li>
<div class="dropdown-content">
<a href="{% url 'products' %}" class="nav-link"> Produtos</a>
<a href="{% url 'products' %}" class="nav-link"> Categorias</a>
<a href="{% url 'products' %}" class="nav-link"> Clientes</a>
</div>
</div>
</ul>
</div>
<div class="login-button">
@@ -44,25 +53,26 @@
<ul>
<li class="nav-item"><a href="{% url 'home' %}" class="nav-link">Início</a></li>
<li class="nav-item"><a href="{% url 'comandas' %}" class="nav-link">Comandas</a></li>
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link">Pedidos</a></li>
<li class="nav-item"><a href="{% url 'products' %}" class="nav-link">Produtos</a></li>
<li class="nav-item"><a href="{% url 'pedidos' %}" class="nav-link">Cozinha</a></li>
<li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a></li>
</ul>
<div class="dropdown">
<li class="nav-item">Cadastros </li>
<div class="dropdown-content">
<a href="{% url 'products' %}" class="nav-link"> Produtos</a>
<a href="{% url 'products' %}" class="nav-link"> Categorias</a>
<a href="{% url 'products' %}" class="nav-link"> Clientes</a>
</div>
</div>
</ul>
<div class="login-button">
<button onclick="entrar()"><a href="#">Entrar</a></button>
</div>
</div>
</header>
<!-- <nav >
<ul>
<li><a href="{% url 'mesas' %}">Mesas</a></li>
<li><a href="#">Categorias</a></li>
</ul>
</nav> -->
</div>
<br>

View File

@@ -1,8 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
body {
margin: 70px 0px 0px 0px;
/* padding: 15px;
font-family: Arial, sans-serif; */
/* padding: 15px; */
}
h1{
text-align: center;
}
* {
@@ -61,7 +64,6 @@ body {
border: none;
padding: 10px 15px;
border-radius: 5px;
background-color: #0187a7;
margin-top: 10px;
}
@@ -80,7 +82,53 @@ body {
display: none;
}
/* .dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
*/
.dropdown {
position: relative;
display: inline-block;
color: #fff;
}
.dropdown-content {
display: none;
position: absolute;
border-radius: 5px;
background-color: #313238;
min-width: 160px;
box-shadow: 0px 3px 10px #464646;
}
.dropdown-content a {
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #7a7a7a;
border-radius: 5px;
}
.dropdown:hover .dropdown-content {display: block;}
/* .dropdown:hover .dropbtn {background-color: #3e8e41;} */
@media screen and (max-width: 730px) {
.dropdown-content {
display: none;
margin-top: 40px;
position: relative;
border-radius: 0px;
min-width: 160px;
}
.nav-bar {
padding: 0.1rem 2rem;
}

View File

@@ -3,7 +3,7 @@
grid-template-columns: repeat(5, 2fr);
gap: 10px;
max-width: 95%;
margin-top: 40px;
margin: 40px;
/* margin: 0 auto; */
}
@@ -24,7 +24,7 @@
transition: transform 0.2s;
}
.card:hover {
.card-comanda:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
@@ -99,4 +99,10 @@ input, textarea {
color: #333;
transition: transform 0.2s;
}
.card-comanda:hover {
transform: scale(1);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
}

View File

@@ -17,7 +17,7 @@
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 30px; /* Centraliza o texto verticalmente */
line-height: 30px;
font-size: 20px;
font-weight: bold;
padding: 10px;
@@ -25,10 +25,7 @@
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 730px) {
@@ -38,13 +35,11 @@
width: 99%;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
/* max-width: 1200px; */
margin: 5px;
}
.card {
width: 95%;
/* height: 80%; */
background-color: #2b376e;
text-align: center;
line-height: 30px;
@@ -54,4 +49,6 @@
color: #333;
transition: transform 0.2s;
}
}