senaduka/old-saburly-wagtail-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added some style for small-devices

Browse Source
This commit is contained in:
Amir
2024-09-13 00:53:51 +02:00
parent ada52bad43
commit 7356bb11c0
4 changed files with 55 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
templates/base.html
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');
});
});
})

4
templates/header.html
View File

@@ -1,8 +1,8 @@
<header id="header" class="header-visible">
<div class="saburly-menu">
<nav class="container mx-auto flex items-center justify-between lg:p-6 p-4">
<nav class="container mx-auto flex items-center justify-between lg:p-6 p-2">
<a href="/">
<div class="max-w-xs mr-8">
<div class="max-w-xs mr-8 saburly-logo">
{% load static %}
<img
src="{% static './images/saburly-logo-w.svg' %}"

2
templates/side_menu.html
View File

@@ -1,6 +1,6 @@
<div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
<br />
<div class="side-close text-white text-3xl font-bold px-4 m-2 opacity-50 hover:opacity-100">X</div>
<a href="/" class="side-close menu-home no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Home