{% block menu %}
	<div class="menu">
		<nav id="sidebarMenu" class="sidebar d-none d-xl-block">

			<div id="cuadroMenu">
				<h5 class="brand-title-panel">
					<img src="{{ asset ('img/afixmat2.png') }}" alt="Logo AfInformática" id="imagenCabeceraMenu"/>	
				</h5>
			</div>

			<div class="list-group list-group-flush mt-3" id="menuLateral">
			
				<a href="/index" class="list-group-item list-group-item-action py-2 ripple home">
					<i class="bi bi-house-door-fill"></i>
					<span>Home
					</span>
				</a>
				<a href="/articulos" class="list-group-item list-group-item-action py-2 ripple articulos">
					<i class="bi bi-box-seam"></i>
					<span>Artículos
					</span>
				</a>

				<a href="/fabricantes" class="list-group-item list-group-item-action py-2 ripple fabricantes">
					<i class="bi bi-grid-3x3"></i>
					<span>Fabricantes
					</span>
				</a>

				<a href="/proveedores" class="list-group-item list-group-item-action py-2 ripple proveedores">
					<i class="bi bi-truck"></i>
					<span>Proveedores
					</span>
				</a>

				<a href="/clientes" class="list-group-item list-group-item-action py-2 ripple clientes" >
					<i class="bi bi-person-fill"></i>
					<span>Clientes
					</span>
				</a>
				<a href="/pedidos" class="list-group-item list-group-item-action py-2 ripple pedidos">
					<i class="bi bi-bag-fill"></i>
					<span>Pedidos
					</span>
				</a>

				<a href="/logout" class="list-group-item list-group-item-action py-2 ripple logout" style="border-bottom: 1px solid #dfdfdf;">
					<i class="bi bi-box-arrow-left"></i>
					<span>Logout</span>
				</a>

			</div>

		</nav>

	</div>
{% endblock %}

{% block menumovil %}
	<div class="light d-xl-none" id="menumovil">

		<div class="collapse" id="navbarToggleExternalContent">
		
			<div class="list-group list-group-flush">
				<a href="/index" class="list-group-item list-group-item-action py-2 ripple home">
					<i class="bi bi-house-door-fill"></i>
					<span>Home
					</span>
				</a>
				<a href="/articulos" class="list-group-item list-group-item-action py-2 ripple articulos">
					<i class="bi bi-box-seam"></i>
					<span>Artículos
					</span>
				</a>
				<a href="/fabricantes" class="list-group-item list-group-item-action py-2 ripple fabricantes">
					<i class="bi bi-collection-fill"></i>
					<span>Fabricantes
					</span>
				</a>
				<a href="/clientes" class="list-group-item list-group-item-action py-2 ripple clientes">
					<i class="bi bi-person-fill"></i>
					<span>Clientes
					</span>
				</a>
				<a href="/pedidos" class="list-group-item list-group-item-action py-2 ripple pedidos">
					<i class="bi bi-bag-fill"></i>
					<span>Pedidos
					</span>
				</a>
			</div>
		</div>
		<nav class="navbar navbar-light bg-light">
			<a>
				<h5 class="brand-title" id="logoMovil">
					<img src="{{ asset ('img/logo_af_ok_redondo.png') }}" height="50" alt="Logo AfInformática"/>
					
				</h5>
			</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
		</nav>
	</div>
{% endblock %}