[Expiremental] Add ability to disable blur effects

resources/js/theme.js

@@ -20,3 +20,45 @@ if(localStorage.theme) {
     // Default Dark Theme
     localStorage.theme = 'dark';
 }
+
+// Ability to disable blur effects for slower devices
+const LOCAL_STORAGE_KEY = 'blur';
+const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur");
+
+function setCSSFilter(selector, value) {
+    document.querySelectorAll(selector).forEach(el => {
+        el.style.backdropFilter = value
+    });
+}
+
+function applyBlur(enabled) {
+    if (!enabled) { 
+        setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none');
+        return;
+    }
+
+    setCSSFilter('.backdrop-blur-lg', 'blur(16px)');
+    setCSSFilter('.backdrop-blur',    'blur(8px)');
+    setCSSFilter('.backdrop-blur-sm', 'blur(4px)');
+}
+
+function initBlurToggle() {
+    const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
+    const enabled = storedValue === null ? true : storedValue === 'true';
+
+    // initialize UI and DOM
+    applyBlur(enabled);
+    if (blurCheckbox) blurCheckbox.checked = enabled;
+
+    // add event listener
+    if (blurCheckbox) {
+        blurCheckbox.addEventListener('click', (e) => {
+            console.log("Received Event");
+            const isEnabled = e.target.checked;
+            applyBlur(isEnabled);
+            localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
+        });
+    }
+}
+
+initBlurToggle();

resources/views/layouts/navigation.blade.php

@@ -59,6 +59,11 @@
                                 </div>
                             </div>
                         </x-dropdown-link>
+
+                        {{-- Expiremental --}}
+                        <x-dropdown-link>
+                            @include('partials.blurswitcher')
+                        </x-dropdown-link>
                     </x-slot>
                 </x-dropdown>
             </div>

resources/views/partials/blurswitcher.blade.php

@@ -0,0 +1,36 @@
+<div class="grid grid-cols-2">
+    <p class="cursor-default">{{ __('Blur effects') }}</p>
+    <div class="flex items-center">
+        <div class="absolute right-6">
+            <label for="toggleBlur" class="flex items-center cursor-pointer">
+                <!-- toggle -->
+                <div class="relative">
+                    <!-- input -->
+                    <input id="toggleBlur" type="checkbox" class="sr-only" checked />
+                    <!-- line -->
+                    <div class="w-10 h-4 bg-rose-600 dark:bg-gray-400 rounded-full shadow-inner">
+                    </div>
+                    <!-- dot -->
+                    <div
+                        class="dot absolute w-6 h-6 bg-white dark:bg-neutral-950 rounded-full shadow -left-1 -top-1 transition">
+                        <div class="items-center ml-[4px] w-6 h-6 font-medium flex">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-blur">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path
+                                    d="M12 21a9.01 9.01 0 0 0 2.32 -.302a9 9 0 0 0 1.74 -16.733a9 9 0 1 0 -4.06 17.035z" />
+                                <path d="M12 3v17" />
+                                <path d="M12 12h9" />
+                                <path d="M12 9h8" />
+                                <path d="M12 6h6" />
+                                <path d="M12 18h6" />
+                                <path d="M12 15h8" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </label>
+        </div>
+    </div>
+</div>