fix bugs in settings

Author: SimoSamaa

src/assets/backgrounds/bg-1.jpg

@@ -16,13 +16,19 @@
           </div>
           <!-- MENU LIST -->
           <div class="menu-list hide">
-            <button class="active-sec"><i data-icon="note"></i>Stick Wall</button>
+            <button class="active-sec"><i data-icon="note"></i>
+              <p class="nav-btn-text">Stick Wall</p>
+            </button>
           </div>
         </div>
         <!-- MENU ACTIONS -->
         <div class="menu-actions hide">
-          <button class="active"><i data-icon="setting"></i> Setting</button>
-          <button><i data-icon="logout"></i> Logout</button>
+          <button class="active"><i data-icon="setting"></i>
+            <p class="nav-btn-text">Setting</p>
+          </button>
+          <button><i data-icon="logout"></i>
+            <p class="nav-btn-text">Logout</p>
+          </button>
         </div>
       </header>
     </div>
@@ -41,7 +47,7 @@ <h1 class="dashboard-title-page">Stick Wall</h1>
       </ul>
     </form>
     <!-- DASHBOARD CONTENT RIGHT -->
-    <div class="dashboard-content_right-conatiner">
+    <div class="dashboard-content_right-container">
       <section class="dashboard-content_right">
         <div class="dashboard-content_right-header">
           <h2>title</h2>

src/assets/backgrounds/bg-1.png

@@ -18,7 +18,7 @@ export function loadUserData() {
 
 function loadAppMode() {
   if (localStorage.getItem('settings')) {
-    document.body.classList.add(JSON.parse(localStorage['settings']).mode);
+    document.body.classList.add(JSON.parse(localStorage['settings'])?.mode);
   }
 }
 

src/assets/backgrounds/bg-2.jpg

@@ -21,13 +21,26 @@ export default function init() {
     if (dashboardPage.classList.toggle('act-menu_dashboard')) {
       localStorage.setItem('menu_state', 'false');
       dashboardPage?.classList.remove('act-content_dashboard-right');
+      toggleCheckBlur();
     } else {
       localStorage.setItem('menu_state', 'true');
     }
 
     applyBlurEffect();
   });
 
+  document.addEventListener('navBlur', toggleCheckBlur);
+  function toggleCheckBlur() {
+    if (!localStorage.getItem('settings')) return;
+    if (JSON.parse(localStorage['settings']).background) {
+      dashboardPage?.firstElementChild.firstElementChild.classList.add('check-blur');
+    } else {
+      dashboardPage?.firstElementChild.firstElementChild.classList.remove('check-blur');
+    }
+  }
+
+  toggleCheckBlur();
+
   function loadMenuState() {
     if (!localStorage['menu_state']) return;
     const menuState = JSON.parse(localStorage['menu_state']);
@@ -68,7 +81,7 @@ export default function init() {
     if (!(dashboardPage instanceof HTMLElement)) return;
     if (!localStorage.getItem('settings')) return;
     const settings = JSON.parse(localStorage['settings']);
-    dashboardPage.style.background = `url(${settings.background}) no-repeat center / cover fixed`;
+    dashboardPage.style.background = `url(${settings?.background}) no-repeat center / cover fixed`;
   }
 
   loadBackground();

src/assets/backgrounds/bg-2.png

@@ -11,7 +11,7 @@ function applyBlurEffect(cb) {
   `)
     .forEach((ele, ind) => {
       if (localStorage.getItem('settings')) {
-        if ((JSON.parse(localStorage['settings']).background === null)) return;
+        if ((JSON.parse(localStorage['settings'])?.background === null)) return;
         ele.classList.add('bg-blur');
 
         if (localStorage.getItem('menu_state')) {