mobile version edited

This commit is contained in:
2024-09-12 21:36:10 +02:00
parent 8c109d6712
commit ada52bad43
4 changed files with 100 additions and 64 deletions

View File

@@ -21,7 +21,7 @@
{% block extra_head %}{% endblock %}
</head>
<body class="font-sans mx-auto">
<body class="font-sans">
<main class="side-panel panel">
{% include 'header.html' %}
<div class="content">
@@ -30,6 +30,7 @@
</div>
{% include 'footer.html' %}
</main>
{% include 'side_menu.html'%}
<script>
//side menu
@@ -37,6 +38,7 @@
const sideToggle = document.querySelector('.side-toggle');
const sideMenu = document.querySelector('.side-menu');
const sideCloseButtons = document.querySelectorAll('.side-close');
const toggleButton = document.querySelector('.menu_icon');
sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active');

View File

@@ -43,41 +43,13 @@
</div>
</nav>
</div>
<div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
<button class="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
</button>
<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
</li>
</a>
<a href="/services" class="side-close menu-services no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Services
</li>
</a>
<a href="/about" class="side-close menu-about no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
About Us
</li>
</a>
<a href="/contact" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Request a quote
</li>
</a>
<a href="tel:7206432025" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
720-643-2025
</li>
</a>
</ul>
</div>
</header>
</br>
</br>
</br>
</br>
<div class="empty-menu">
<br />
<br />
<br />
</div>
<div class="empty-menu-small">
<br />
<br />
</div>

31
templates/side_menu.html Normal file
View File

@@ -0,0 +1,31 @@
<div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
<br />
<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
</li>
</a>
<a href="/services" class="side-close menu-services no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Services
</li>
</a>
<a href="/about" class="side-close menu-about no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
About Us
</li>
</a>
<a href="/contact" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Request a quote
</li>
</a>
<a href="tel:7206432025" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
720-643-2025
</li>
</a>
</ul>
</div>