Se agregan estilos de sidebar

This commit is contained in:
Camilo Gonzalez 2024-08-19 17:05:30 -05:00
parent e84c45b238
commit 939745cd54
3 changed files with 31 additions and 27 deletions

View File

@ -1,33 +1,33 @@
nav#main_menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
padding-bottom: 1em;
}
nav#main_menu li {
margin-right: 20px;
}
nav#main_menu a { nav#main_menu a {
text-decoration: none; text-decoration: none;
color: #333; font-weight: bold;
background-color: #f0f0f0; color: white;
background-color: #178E79 ;
padding: 10px 20px; padding: 10px 20px;
border: none; min-width: 90%;
text-align: center;
border: solid #178E79 4px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
nav#main_menu a:hover { nav#main_menu a:hover {
background-color: #ccc; transition: ease-in-out 0.2s;
color: #666; background-color: #7BDCB5;
color: #178E79;
} }
nav#main_menu a:active { nav#main_menu a:active {
background-color: #aaa; background-color: #aaa;
color: #444; color: #444;
} }
nav#main_menu {
display: inline;
}
li{
width: 100%;
display: flex;
justify-content: center;
}

View File

@ -1,14 +1,17 @@
{% load static %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en" class="h-full">
<head> <head>
<title>Don Confiao - Tienda la Ilusión</title> <title>Don Confiao - Tienda la Ilusión</title>
</head> </head>
<body> <body class="flex h-full">
<div id="menu"> <div id="menu" class="w-2/12 border bg-green-100">
{% include 'don_confiao/menu.html' %} {% include 'don_confiao/menu.html' %}
</div> </div>
<div id="content"> <div id="content" class="w-7/12">
{% block content %} {% endblock %} {% block content %} {% endblock %}
</div> </div>
</body> </body>
<script src="https://cdn.tailwindcss.com/"></script>
</html> </html>

View File

@ -1,12 +1,13 @@
{% load static %} {% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/main_menu.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'css/main_menu.css' %}">
<nav id="main_menu"> <nav id="main_menu" class="h-full">
<ul> <ul class="h-full flex flex-col m-0 p-0 justify-center gap-y-12 items-center">
<li><a href='/don_confiao/comprar'>Comprar</a></li> <li><a href='/don_confiao/comprar' >Comprar</a></li>
<li><a href='/don_confiao/compras'>Compras</a></li> <li><a href='/don_confiao/compras'>Compras</a></li>
<li><a href='/don_confiao/lista_productos'>Productos</a></li> <li><a href='/don_confiao/lista_productos'>Productos</a></li>
<li><a href='/don_confiao/importar_productos'>Importar Productos</a></li> <li><a href='/don_confiao/importar_productos'>Importar Productos</a></li>
<li><a href='/don_confiao/cuadrar_tarro'>Cuadrar tarro</a></li> <li><a href='/don_confiao/cuadrar_tarro'>Cuadrar tarro</a></li>
</ul> </ul>
</nav> </nav>
<script src="https://cdn.tailwindcss.com/"></script>