added logic for off animation text

luckydiamond/src/assets/css/PagesStyles/home.css

@@ -55,7 +55,11 @@
     }
 }
 
-.main__content h4 span {
+.default__text--main__block {
+    color: #6EEB21;
+}
+
+.animate__text--main__block {
     animation: RaindowAnimate 5s infinite;
     animation-delay: 5s;
 }

luckydiamond/src/components/AsidebarComponent.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div class="menu__btn--settings">
-        <a href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
+        <a @click="ChangeAnimation" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
       </div>
     </div>
   </aside>
@@ -24,7 +24,18 @@
 import '@/assets/css/ComponentsStyles/asidebar.css'
 
 export default {
-  name: 'AsideBar-Element'
+  name: 'AsideBar-Element',
+  data() {
+    return {
+      AnimationOff: false
+    }
+  },
+  methods: {
+    ChangeAnimation() {
+      this.AnimationOff = !this.AnimationOff
+      return this.$emit('animationchange', this.AnimationOff)
+    }
+  }
 }
 </script>
 

luckydiamond/src/pages/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content-grid">
-    <aside-bar-element></aside-bar-element>
+    <aside-bar-element @animationchange="claimSettings"></aside-bar-element>
 
     <chat-element></chat-element>
 
@@ -10,7 +10,7 @@
       <div class="main__content">
         <h3>онлайн-казино</h3>
         <h1>lucky diamond</h1>
-        <h4>minecraft casino - <span>spm</span></h4>
+        <h4>minecraft casino - <span :class="{ 'animate__text--main__block': !AnimationOff, 'default__text--main__block': AnimationOff }">spm</span></h4>
       </div>
     </main>
 
@@ -34,7 +34,13 @@ export default {
   components: {AsideBarElement, HeaderElementPage, ChatElement },
   data() {
     return {
-      GameModes
+      GameModes,
+      AnimationOff: false
+    }
+  },
+  methods: {
+    claimSettings(value) {
+      this.AnimationOff = value
     }
   },
   computed: {