moved main nav to left panel for mobile.

src/components/app/MainNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main navigation" ref="navigation">
+  <div class="main navigation" :class="{ mobile: mobileSize }" ref="navigation">
     <div
       class="tool-tip"
       ref="toolTip"
@@ -99,7 +99,6 @@ export default {
       toolTipServerID: null,
       toolTipLocalName: null,
       mobile: isMobile(),
-
       drag: false
     };
   },
@@ -155,7 +154,11 @@ export default {
       this.$nextTick(() => {
         const tooltipWidth = this.$refs.toolTip.clientWidth;
         const rect = event.target.getBoundingClientRect();
-        this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
+        if (this.mobileSize) {
+          this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 20;
+        } else {
+          this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
+        }
       });
     },
     mouseLeaveEvent() {
@@ -183,6 +186,14 @@ export default {
     }
   },
   computed: {
+    mobileSize() {
+      return (
+        this.$mq === "mobile" &&
+        (this.currentTab === 0 ||
+          this.currentTab === 1 ||
+          this.currentTab === 2)
+      );
+    },
     user() {
       return this.$store.getters.user;
     },
@@ -253,6 +264,18 @@ export default {
   width: 100%;
   position: relative;
 }
+.mobile {
+  background: #005a9e;
+  padding-left: 10px;
+  width: initial;
+  .item {
+    width: 40px;
+    height: 40px;
+    margin-left: 5px;
+    margin-right: 5px;
+    font-size: 25px;
+  }
+}
 .container {
   display: flex;
   flex-direction: row;
@@ -335,5 +358,4 @@ export default {
   cursor: default;
   transition: 0.2s;
 }
-
 </style>

src/components/app/Tabs/Explore.vue

@@ -6,54 +6,59 @@
         v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
       >
-        <navigation />
+        <MainNav v-if="$mq === 'mobile'" />
-        <div class="content">
+        <div class="inner">
-          <MyMiniInformation />
+          <navigation />
-          <div class="header">
+          <div class="content">
-            <div class="icon">
+            <MyMiniInformation />
-              <i class="material-icons">explore</i>
+            <div class="header">
-            </div>
+              <div class="icon">
-            <div class="details">
+                <i class="material-icons">explore</i>
-              <div class="title">Explore</div>
+              </div>
-              <div class="description">Find new servers, Emojis and more!</div>
+              <div class="details">
-            </div>
+                <div class="title">Explore</div>
-          </div>
+                <div class="description">
-          <div class="items">
+                  Find new servers, Emojis and more!
-            <div
+                </div>
-              class="item"
-              v-for="(tab, index) in tabs"
-              :key="index"
-              :class="{ selected: selectedTab === index }"
-              @click="
-                selectedTab = index;
-                showLeftPanel = false;
-              "
-            >
-              <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="items">
+              <div
+                class="item"
+                v-for="(tab, index) in tabs"
+                :key="index"
+                :class="{ selected: selectedTab === index }"
+                @click="
+                  selectedTab = index;
+                  showLeftPanel = false;
+                "
+              >
+                <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="card donate-paypal" v-if="donateHide !== true">
-              <div class="material-icons close-btn" @click="hideDonatePaypal">
+                <div class="material-icons close-btn" @click="hideDonatePaypal">
-                close
+                  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</div>
               </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</div>
             </div>
           </div>
         </div>
@@ -88,8 +93,10 @@ import Themes from "./Explore/themes";
 import ServerService from "@/services/ServerService";
 import Navigation from "@/components/app/Navigation";
 import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
+const MainNav = () => import("@/components/app/MainNav.vue");
+
 export default {
-  components: { Servers, Themes, Navigation, MyMiniInformation },
+  components: { Servers, Themes, Navigation, MyMiniInformation, MainNav },
   data() {
     return {
       showLeftPanel: false,
@@ -152,12 +159,19 @@ export default {
 }
 .left-panel {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   width: 340px;
   max-width: calc(100% - 60px);
   flex-shrink: 0;
   z-index: 2;
 
+  .inner {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    z-index: 2;
+  }
+
   .content {
     display: flex;
     flex-direction: column;
@@ -385,5 +399,4 @@ export default {
     background: rgba(0, 0, 0, 0.4);
   }
 }
-
 </style>

src/components/app/Tabs/ServerAndDMTab.vue

@@ -9,13 +9,16 @@
         v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
       >
-        <navigation />
+        <MainNav v-if="$mq === 'mobile'" />
-        <div class="wrapper">
+        <div class="inner">
-          <MyMiniInformation />
+          <navigation />
-          <transition name="fade" mode="out-in">
+          <div class="wrapper">
-            <server-list :key="selectedServerID" v-if="currentTab === 2" />
+            <MyMiniInformation />
-            <friends-list v-if="currentTab === 1" />
+            <transition name="fade" mode="out-in">
-          </transition>
+              <server-list :key="selectedServerID" v-if="currentTab === 2" />
+              <friends-list v-if="currentTab === 1" />
+            </transition>
+          </div>
         </div>
       </div>
     </transition>
@@ -45,6 +48,7 @@ import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
 const FriendsList = () => import("@/components/app/FriendsList.vue");
 const MembersList = () => import("@/components/app/MembersList.vue");
 const ServerList = () => import("@/components/app/ServerList.vue");
+const MainNav = () => import("@/components/app/MainNav.vue");
 
 export default {
   components: {
@@ -53,7 +57,8 @@ export default {
     MessagePanel,
     MembersList,
     Navigation,
-    MyMiniInformation
+    MyMiniInformation,
+    MainNav
   },
   data() {
     return {
@@ -112,6 +117,16 @@ export default {
   max-width: calc(100% - 60px);
   flex-shrink: 0;
   display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+.inner {
+  z-index: 2;
+  height: 100%;
+  width: 340px;
+  max-width: 100%;
+  flex-shrink: 0;
+  display: flex;
   flex-direction: row;
   z-index: 1;
 }

src/views/App.vue

@@ -10,7 +10,9 @@
             <electron-frame-buttons />
           </div>
         </div>
-        <main-nav />
+        <main-nav
+          v-if="$mq !== 'mobile' || currentTab === 3 || currentTab === 4"
+        />
         <div class="panel-layout">
           <news v-if="currentTab == 3" />
           <servers v-if="currentTab == 1 || currentTab == 2" />