loading converted to alpine.js

This commit is contained in:
Burak Civan
2022-11-21 15:48:48 +03:00
parent 0128822b4e
commit c973f806f1
7 changed files with 32 additions and 34 deletions

View File

@ -1,4 +1,9 @@
<div data-loading-menu class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0">
<div
x-data="{ }"
x-init="setTimeout(() => $refs.loadingMenu.remove(), 1000)"
x-ref="loadingMenu"
class="w-70 h-screen hidden lg:flex fixed top-0 js-menu z-20 transition-all ltr:-left-80 rtl:-right-80 xl:ltr:left-0 xl:rtl:right-0"
>
<div class="w-14 py-7 px-1 bg-lilac-900 z-10 menu-scroll overflow-y-auto overflow-x-hidden">
<div class="flex flex-col items-center justify-center mb-7 cursor-pointer">
<span class="w-7 h-7 flex items-center justify-center text-2xl">
@ -73,32 +78,3 @@
</div>
</nav>
</div>
@push('scripts_start')
<script type="text/javascript">
let loading_menu_html = document.querySelectorAll('[data-loading-menu]');
let loading_html = document.querySelectorAll('[data-loading-content]');
let loading_absolute_html = document.querySelectorAll('[data-absolute-loading-content]');
let menu_html = document.querySelector('[data-real-menu]');
let timer = 1000;
window.addEventListener('DOMContentLoaded', (event) => {
setTimeout(() => {
loading_menu_html[0].remove();
menu_html.classList.remove('hidden');
}, timer);
if (loading_html.length) {
setTimeout(() => {
loading_html[0].remove();
}, timer);
}
if (loading_absolute_html.length) {
setTimeout(() => {
loading_absolute_html[0].remove();
}, timer);
}
});
</script>
@endpush