54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
{% block title %}<title>Local Library</title>{% endblock %}
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||
|
|
<!-- Add additional CSS in static file -->
|
||
|
|
{% load static %}
|
||
|
|
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-2">
|
||
|
|
{% block sidebar %}
|
||
|
|
<div class="sidenav">
|
||
|
|
<a href="#about">About</a>
|
||
|
|
<a href="#services">Services</a>
|
||
|
|
<a href="#clients">Clients</a>
|
||
|
|
<a href="#contact">Contact</a>
|
||
|
|
<button class="dropdown-btn">Dropdown
|
||
|
|
<i class="fa fa-caret-down"></i>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-container">
|
||
|
|
<a href="#">Link 1</a>
|
||
|
|
<a href="#">Link 2</a>
|
||
|
|
<a href="#">Link 3</a>
|
||
|
|
</div>
|
||
|
|
<a href="#contact">{{counter}} books</a>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-10 ">{% block content %}{% endblock %}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var dropdown = document.getElementsByClassName("dropdown-btn");
|
||
|
|
var i;
|
||
|
|
|
||
|
|
for (i = 0; i < dropdown.length; i++) {
|
||
|
|
dropdown[i].addEventListener("click", function() {
|
||
|
|
this.classList.toggle("active");
|
||
|
|
var dropdownContent = this.nextElementSibling;
|
||
|
|
if (dropdownContent.style.display === "block") {
|
||
|
|
dropdownContent.style.display = "none";
|
||
|
|
} else {
|
||
|
|
dropdownContent.style.display = "block";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|