changed design for explore tab.

src/components/app/Tabs/Explore.vue

@@ -1,49 +1,51 @@
 <template>
   <div class="explore-tab">
-    <div class="left-panel"
+
-      v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
+    <transition name="slidein">
-      v-click-outside="hideLeftPanel"
+      <div class="left-panel"
-    >
+        v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
-      <div class="header">
+        v-click-outside="hideLeftPanel">
-        <div class="icon">
+        <div class="header">
-          <i class="material-icons">explore</i>
+          <div class="icon">
+            <i class="material-icons">explore</i>
+          </div>
+          <div class="details">
+            <div class="title">Explore</div>
+            <div class="description">Find new servers, Emojis and more!</div>
+          </div>
         </div>
-        <div class="details">
+        <div class="items">
-          <div class="title">Explore</div>
+          <div class="item"
-          <div class="description">Find new servers, Emojis and more!</div>
+            v-for="(tab, index) in tabs"
-        </div>
+            :key="index"
-      </div>
+            :class="{selected: selectedTab === index}"
-      <div class="items">
+            @click="selectedTab = index">
-        <div class="item"
+            <i class="material-icons">{{tab.icon}}</i>
-          v-for="(tab, index) in tabs"
+            {{tab.name}}
-          :key="index"
+          </div>
-          :class="{selected: selectedTab === index}"
+
-          @click="selectedTab = index">
+          <div class="card self-promo" v-if="nertiviaServerHide !== true && !nertiviaServer">
-          <i class="material-icons">{{tab.icon}}</i>
+            <div class="material-icons close-btn" @click="hideSelfPromo">close</div>
-          {{tab.name}}
+            <div class="logo"/>
-        </div>
+            <div class="title">Join the official Nertivia server</div>
-
+            <div class="button" @click="joinNertiviaServer">Join</div>
-        <div class="card self-promo" v-if="nertiviaServerHide !== true && !nertiviaServer">
+          </div>
-          <div class="material-icons close-btn" @click="hideSelfPromo">close</div>
+
-          <div class="logo"/>
+          <div class="card donate-paypal" v-if="donateHide !== true">
-          <div class="title">Join the official Nertivia server</div>
+            <div class="material-icons close-btn" @click="hideDonatePaypal">close</div>
-          <div class="button" @click="joinNertiviaServer">Join</div>
+            <div class="material-icons heart">favorite</div>
-        </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 class="card donate-paypal" v-if="donateHide !== true">
+          </div>
-          <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>
+    </transition>
 
 
 
 
-    </div>
     <div class="right-panel">
-      <div class="header"> <i class="material-icons">{{tabs[selectedTab].icon}}</i>{{tabs[selectedTab].name}}</div>
+      <div class="header"> <div class="material-icons left-menu-show-button" @click="showLeftPanel = !showLeftPanel">view_list</div> <i class="material-icons">{{tabs[selectedTab].icon}}</i>{{tabs[selectedTab].name}}</div>
       <div class="coming-soon" v-if="selectedTab > 0">
         <div class="icon">
           <i class="material-icons">explore</i>
@@ -52,6 +54,7 @@
       </div>
       <component :is="tabs[selectedTab].component" /> 
     </div>
+
   </div>
 </template>
 
@@ -63,7 +66,7 @@ export default {
   components: { Servers },
   data() {
     return {
-      showLeftPanel: true,
+      showLeftPanel: false,
       selectedTab: 0,
       tabs: [
         // {icon: "home", name: "home", component: ""},
@@ -82,7 +85,7 @@ export default {
   methods: {
     hideLeftPanel(event) {
       if (this.showLeftPanel) {
-        if (event.target.closest(".show-menu-button") == null) {
+        if (event.target.closest(".left-menu-show-button") == null) {
           this.showLeftPanel = false;
         }
       }
@@ -116,12 +119,14 @@ export default {
 
 
 <style lang="scss" scoped>
+
 .explore-tab {
   display: flex;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.459);
   color: white;
+  position: relative;
 }
 .left-panel {
   display: flex;
@@ -129,6 +134,7 @@ export default {
   background: rgba(0, 0, 0, 0.274);
   width: 300px;
   flex-shrink: 0;
+  z-index: 2;
   .items {
     user-select: none;
     height: 100%;
@@ -198,7 +204,6 @@ export default {
   }
 }
 
-
 .card {
   background: black;
   height: 200px;
@@ -287,5 +292,38 @@ export default {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
+
+
+.left-menu-show-button {
+  border-right: solid 1px rgb(158, 158, 158);
+  padding-right: 5px;
+  display: none;
+  cursor: pointer;
+}
+
+
+.slidein-enter-active,
+.slidein-leave-active {
+  transition: 0.5s;
+}
+.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  /* margin-left: -300px; */
+  transform: translateX(-300px)
+}
+
+@media (max-width: 600px) {
+  .left-menu-show-button {
+    display: block;
+  }
+  .left-panel {
+    position: absolute;
+    background-color: rgba(39, 39, 39, 0.97);
+    bottom: 0;
+    height: calc(100% - 44px);
+    z-index: 2;
+  }
+}
+
 </style>

src/components/app/Tabs/Explore/searchHeader.vue

@@ -137,4 +137,29 @@ input {
     }
   }
 }
+
+
+@media (max-width: 945px) {
+  .search-header {
+    flex-direction: column;
+    height: initial;
+  }
+  .search-area {
+    order: 1;
+    margin: 0;
+    width: 100%;
+    input {
+      width: 95%;
+      overflow: hidden;
+      border-radius: 0;
+      margin-top: 1px;
+
+    }
+
+  }
+  .filter-area{
+    order: 2;
+  }
+}
+
 </style>

src/components/app/Tabs/Explore/servers.vue

@@ -83,4 +83,6 @@ export default {
 .spinner {
   align-self: center;
 }
+
+
 </style>