fix(4514): demo.js cannot read properties of undefined (reading 'classList')

dist/js/demo.js

@@ -525,11 +525,14 @@
   })
 
   var active_navbar_color = null
-  $('.main-header')[0].classList.forEach(function (className) {
+  var $main_header = $('.main-header')
-    if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) {
+  if ($main_header.length > 0) {
-      active_navbar_color = className.replace('navbar-', 'bg-')
+    $main_header[0].classList.forEach(function (className) {
-    }
+      if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) {
-  })
+        active_navbar_color = className.replace('navbar-', 'bg-')
+      }
+    })
+  }
 
   $navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true)
   $navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color)
@@ -590,12 +593,15 @@
   $container.append($sidebar_dark_variants)
 
   var active_sidebar_dark_color = null
-  $('.main-sidebar')[0].classList.forEach(function (className) {
+  var $main_sidebar = $('.main-sidebar')
-    var color = className.replace('sidebar-dark-', 'bg-')
+  if ($main_sidebar.length > 0) {
-    if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) {
+    $main_sidebar[0].classList.forEach(function (className) {
-      active_sidebar_dark_color = color
+      var color = className.replace('sidebar-dark-', 'bg-')
-    }
+      if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) {
-  })
+        active_sidebar_dark_color = color
+      }
+    })
+  }
 
   $sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true)
   $sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color)
@@ -623,12 +629,14 @@
   $container.append($sidebar_light_variants)
 
   var active_sidebar_light_color = null
-  $('.main-sidebar')[0].classList.forEach(function (className) {
+  if ($main_sidebar.length > 0) {
-    var color = className.replace('sidebar-light-', 'bg-')
+    $main_sidebar[0].classList.forEach(function (className) {
-    if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) {
+      var color = className.replace('sidebar-light-', 'bg-')
-      active_sidebar_light_color = color
+      if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) {
-    }
+        active_sidebar_light_color = color
-  })
+      }
+    })
+  }
 
   if (active_sidebar_light_color !== null) {
     $sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true)
@@ -676,11 +684,14 @@
   $container.append($brand_variants)
 
   var active_brand_color = null
-  $('.brand-link')[0].classList.forEach(function (className) {
+  var $brand_link = $('.brand-link')
-    if (logo_skins.indexOf(className) > -1 && active_brand_color === null) {
+  if ($brand_link.length > 0) {
-      active_brand_color = className.replace('navbar-', 'bg-')
+    $brand_link[0].classList.forEach(function (className) {
-    }
+      if (logo_skins.indexOf(className) > -1 && active_brand_color === null) {
-  })
+        active_brand_color = className.replace('navbar-', 'bg-')
+      }
+    })
+  }
 
   if (active_brand_color) {
     $brand_variants.find('option.' + active_brand_color).prop('selected', true)