From 3b6a8ef10950080d728e8a9319d58a612e07f7da Mon Sep 17 00:00:00 2001 From: Julian Prieber Date: Wed, 18 Dec 2024 18:17:14 +0100 Subject: [PATCH] Use wire navigate for hydration --- assets/js/hope-ui.js | 10 ++- assets/js/plugins/setting.js | 48 ++++++------ config/livewire.php | 2 +- resources/views/layouts/sidebar.blade.php | 95 ++++++++++++++++------- resources/views/panel/users.blade.php | 4 +- 5 files changed, 100 insertions(+), 59 deletions(-) diff --git a/assets/js/hope-ui.js b/assets/js/hope-ui.js index b00438c..1964672 100644 --- a/assets/js/hope-ui.js +++ b/assets/js/hope-ui.js @@ -307,12 +307,14 @@ const resizePlugins = () => { -----------------------------------------------------------------------*/ const loaderInit = () => { const loader = document.querySelector('.loader') - setTimeout(() => { - loader.classList.add('animate__animated', 'animate__fadeOut') + if (loader) { setTimeout(() => { - loader.classList.add('d-none') + loader.classList.add('animate__animated', 'animate__fadeOut') + setTimeout(() => { + loader.classList.add('d-none') + }, 500) }, 500) - }, 500) + } } /*--------------------------------------------------------------------- Sidebar Toggle diff --git a/assets/js/plugins/setting.js b/assets/js/plugins/setting.js index 2a48253..68f17a9 100644 --- a/assets/js/plugins/setting.js +++ b/assets/js/plugins/setting.js @@ -39,6 +39,12 @@ Index Of Script // Variables let sidebarTypeSetting = []; + function getCookie(name) { + const value = `; ${document.cookie}`; + const parts = value.split(`; ${name}=`); + if (parts.length === 2) return parts.pop().split(';').shift(); + } + // RTL mode on change offcanvas position change function const rtlModeDefault = (check) => { if (check) { @@ -88,10 +94,10 @@ Index Of Script // For Dark, RTL & Sidebar Class Update const changeMode = (type, value, target) => { let detailObj = {} - if (type == 'color-mode') { - detailObj = {dark: value} - document.querySelector('body').classList.add(value) - } + // if (type == 'color-mode') { + // detailObj = {dark: value} + // document.querySelector('body').classList.add(value) + // } if (type == 'dir-mode') { detailObj = {dir: value} document.querySelector('html').setAttribute('dir',value) @@ -119,13 +125,11 @@ Index Of Script } }) - // For Dark Mode - const colorMode = localStorage.getItem('color-mode') - if(colorMode !== null && colorMode !== undefined) { - document.body.classList.remove('dark') - document.body.classList.add(colorMode) - darkMode() - checkSettingMenu('color-mode', 'color', colorMode, 'addedClass') + // For Dark Mode + const colorMode = getCookie('color-mode'); + if (colorMode !== null && colorMode !== undefined) { + darkMode(); + checkSettingMenu('color-mode', 'color', colorMode, 'noClass'); } // For RTL Mode @@ -187,7 +191,7 @@ Index Of Script el.classList.remove('active') document.querySelector('body').classList.remove(el.getAttribute('data-value')) }) - localStorage.setItem('color-mode', mode.getAttribute('data-value')) + document.cookie = `color-mode=${mode.getAttribute('data-value')}; path=/;`; mode.classList.add('active') document.querySelector('body').classList.add(mode.getAttribute('data-value')) changeMode('color-mode', mode.getAttribute('data-value')) @@ -314,16 +318,16 @@ Index Of Script const event = new CustomEvent("ColorChange", {detail :{detail1:colorInfo.trim(), detail2:colors.trim()}}); document.dispatchEvent(event); } - const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]') - Array.from(elements, (mode) => { - const colorclass = mode.getAttribute('data-value'); - if(colorclass === custombodyclass ){ - mode.classList.add('active') - } - else{ - mode.classList.remove('active') - } - }) + // const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]') + // Array.from(elements, (mode) => { + // const colorclass = mode.getAttribute('data-value'); + // if(colorclass === custombodyclass ){ + // mode.classList.add('active') + // } + // else{ + // mode.classList.remove('active') + // } + // }) } const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]') diff --git a/config/livewire.php b/config/livewire.php index 02bf671..abb6521 100644 --- a/config/livewire.php +++ b/config/livewire.php @@ -129,7 +129,7 @@ return [ 'navigate' => [ 'show_progress_bar' => true, - 'progress_bar_color' => '#2299dd', + 'progress_bar_color' => 'var(--bs-primary)', ], /* diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php index c29c0e2..b4eaa4a 100755 --- a/resources/views/layouts/sidebar.blade.php +++ b/resources/views/layouts/sidebar.blade.php @@ -16,10 +16,13 @@ {{ env('APP_NAME') }} - - + @livewireStyles + + + {{-- --}} + @include('layouts.analytics') @stack('sidebar-stylesheets') @@ -66,21 +69,36 @@ - +{{-- --}} - - - + + {{--
-
+
- + + --}}