added nertivia and support card in the explore tab

src/components/app/Tabs/Explore.vue

@@ -14,17 +14,33 @@
         </div>
       </div>
       <div class="items">
-        <div
+        <div class="item"
-          class="item"
           v-for="(tab, index) in tabs"
           :key="index"
           :class="{selected: selectedTab === index}"
-          @click="selectedTab = index"
+          @click="selectedTab = index">
-        >
           <i class="material-icons">{{tab.icon}}</i>
           {{tab.name}}
         </div>
+
+        <div class="card self-promo" v-if="nertiviaServerHide !== true && !nertiviaServer">
+          <div class="material-icons close-btn" @click="hideSelfPromo">close</div>
+          <div class="logo"/>
+          <div class="title">Join the official Nertivia server</div>
+          <div class="button" @click="joinNertiviaServer">Join</div>
+        </div>
+
+        <div class="card donate-paypal" v-if="donateHide !== true">
+          <div class="material-icons close-btn" @click="hideDonatePaypal">close</div>
+          <div class="material-icons heart">favorite</div>
+          <div class="title">Support Nertivia by donating any amount of money. You will get a supporter badge and more features in the future.</div>
+          <div class="button" @click="donateButton">Donate With PayPal</div>
+        </div>
       </div>
+
+
+
+
     </div>
     <div class="right-panel">
       <div class="header"> <i class="material-icons">{{tabs[selectedTab].icon}}</i>{{tabs[selectedTab].name}}</div>
@@ -42,11 +58,12 @@
 <script>
 import { bus } from "@/main";
 import Servers from './Explore/servers'
+import ServerService from '@/services/ServerService'
 export default {
   components: { Servers },
   data() {
     return {
-      showLeftPanel: false,
+      showLeftPanel: true,
       selectedTab: 0,
       tabs: [
         // {icon: "home", name: "home", component: ""},
@@ -54,10 +71,14 @@ export default {
         { icon: "face", name: "Emoji Packs", component: "" },
         { icon: "brush", name: "Themes", component: "" },
         { icon: "message", name: "Message Styles", component: "" }
-      ]
+      ],
+      nertiviaServerID: '6572915451527958528',
+      nertiviaServerHide: localStorage.getItem('exploreTabNertiviaServerPromoHide') === 'true',
+      donateHide: localStorage.getItem('exploreTabDonateHide') === 'true'
+
     };
   },
-  mounted() {},
+
   methods: {
     hideLeftPanel(event) {
       if (this.showLeftPanel) {
@@ -65,9 +86,31 @@ export default {
           this.showLeftPanel = false;
         }
       }
+    },
+    hideSelfPromo() {
+      localStorage.setItem('exploreTabNertiviaServerPromoHide', true)
+      this.nertiviaServerHide = true;
+    },
+    hideDonatePaypal() {
+      localStorage.setItem('exploreTabDonateHide', true)
+      this.donateHide = true;
+    },
+    async joinNertiviaServer() {
+      const {ok, error, result} = await ServerService.joinServerById(this.nertiviaServerID, {
+        socketID: this.$socket.id
+      });
+    },
+    donateButton() {
+      window.open('https://www.patreon.com/nertivia', '_blank');
     }
   },
-  computed: {}
+  mounted() {
+  },
+  computed: {
+    nertiviaServer() {
+      return this.$store.getters['servers/servers'][this.nertiviaServerID]
+    }
+  }
 };
 </script>
 
@@ -88,6 +131,8 @@ export default {
   flex-shrink: 0;
   .items {
     user-select: none;
+    height: 100%;
+    overflow: auto;
     .item {
       .material-icons {
         margin-right: 5px;
@@ -114,6 +159,7 @@ export default {
     height: 100px;
     background: rgba(0, 0, 0, 0.226);
     user-select: none;
+    flex-shrink: 0;
     .icon {
       display: flex;
       flex-direction: column;
@@ -151,6 +197,67 @@ export default {
     }
   }
 }
+
+
+.card {
+  background: black;
+  height: 200px;
+  border-radius: 5px;
+  margin: 5px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  position: relative;
+  .title {
+    text-align: center;
+  }
+    .button {
+      background-color: rgba(0, 0, 0, 0.200);
+      border-radius: 5px;
+      padding: 5px;
+      font-size: 20px;
+      margin-top: 15px;
+      cursor: pointer;
+      transition: 0.3s;
+      color: rgba(255, 255, 255, 0.924);
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.300);
+      }
+    }
+  .close-btn {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    cursor: pointer;
+  }
+  &.self-promo{
+    .logo {
+      background-image: url('../../../assets/logo.png');
+      background-size: cover;
+      height: 100px;
+      width: 100px;
+      margin-bottom: 10px;
+    }
+    margin-top: 50px;
+    background: #3fa9f5;
+  }
+  &.donate-paypal {
+    margin-top: 20px;
+    background: #f53f3f;
+    .title {
+      font-size: 15px;
+      opacity: 0.9;
+    }
+    .heart {
+      font-size: 60px;
+      margin-bottom: 10px;
+    }
+
+  }
+}
 .coming-soon {
   display: flex;
   align-items: center;