83 lines
3.0 KiB
HTML
83 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>{% block title %}Saburly - {{ self.title }}{% endblock %}</title>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
|
|
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
|
|
{% load static %}
|
|
<link rel="stylesheet" href="{% static './css/style.css' %}">
|
|
<link rel="shortcut icon" type="image/png" href="{% static './images/favicon32.png' %}">
|
|
{% block extra_head %}{% endblock %}
|
|
</head>
|
|
|
|
<body class="font-sans">
|
|
<main class="side-panel panel">
|
|
{% include 'header.html' %}
|
|
{% include 'side_menu.html'%}
|
|
<div class="content">
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
{% include 'footer.html' %}
|
|
</main>
|
|
|
|
<script>
|
|
//side menu
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const sideToggle = document.querySelector('.side-toggle');
|
|
const sideMenu = document.querySelector('.side-menu');
|
|
const sideCloseButtons = document.querySelectorAll('.side-close');
|
|
const content = document.querySelector('.content');
|
|
const headermove = document.getElementById('header');
|
|
const body = document.body;
|
|
|
|
sideToggle.addEventListener('click', function() {
|
|
sideMenu.classList.toggle('active');
|
|
this.classList.toggle('menu-opened');
|
|
content.classList.toggle('content-open');
|
|
headermove.classList.toggle('header-move');
|
|
body.classList.toggle('block-scroll')
|
|
});
|
|
|
|
sideCloseButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
sideMenu.classList.remove('active');
|
|
sideToggle.classList.remove('menu-opened');
|
|
content.classList.remove('content-open');
|
|
headermove.classList.remove('header-move');
|
|
body.classList.remove('block-scroll');
|
|
});
|
|
});
|
|
})
|
|
//header
|
|
var prevScrollPos = window.pageYOffset;
|
|
|
|
window.onscroll = function() {
|
|
var currentScrollPos = window.pageYOffset;
|
|
|
|
if (prevScrollPos < currentScrollPos) {
|
|
document.getElementById("header").classList.add("header-hidden");
|
|
document.getElementById("header").classList.remove("header-visible");
|
|
}
|
|
else {
|
|
document.getElementById("header").classList.add("header-visible");
|
|
document.getElementById("header").classList.remove("header-hidden");
|
|
}
|
|
|
|
prevScrollPos = currentScrollPos;
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
|