added some style for small-devices

This commit is contained in:
2024-09-13 00:53:51 +02:00
parent ada52bad43
commit 7356bb11c0
4 changed files with 55 additions and 38 deletions

View File

@@ -24,13 +24,13 @@
<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>
{% include 'side_menu.html'%}
<script>
//side menu
@@ -38,17 +38,22 @@
const sideToggle = document.querySelector('.side-toggle');
const sideMenu = document.querySelector('.side-menu');
const sideCloseButtons = document.querySelectorAll('.side-close');
const toggleButton = document.querySelector('.menu_icon');
const content = document.querySelector('.content');
const headermove = document.getElementById('header');
sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active');
this.classList.toggle('menu-opened');
content.classList.toggle('content-open');
headermove.classList.toggle('header-move');
});
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');
});
});
})