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();
+        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,6 +6,8 @@
         v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
       >
+        <MainNav v-if="$mq === 'mobile'" />
+        <div class="inner">
           <navigation />
           <div class="content">
             <MyMiniInformation />
@@ -15,7 +17,9 @@
               </div>
               <div class="details">
                 <div class="title">Explore</div>
-              <div class="description">Find new servers, Emojis and more!</div>
+                <div class="description">
+                  Find new servers, Emojis and more!
+                </div>
               </div>
             </div>
             <div class="items">
@@ -50,14 +54,15 @@
                 </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.
+                  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>
         </div>
+      </div>
     </transition>
 
     <div class="right-panel">
@@ -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,6 +9,8 @@
         v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
       >
+        <MainNav v-if="$mq === 'mobile'" />
+        <div class="inner">
           <navigation />
           <div class="wrapper">
             <MyMiniInformation />
@@ -18,6 +20,7 @@
             </transition>
           </div>
         </div>
+      </div>
     </transition>
     <message-panel :type="currentTab === 1 ? 0 : currentTab === 2 ? 1 : null" />
     <transition :name="$mq !== 'desktop' ? 'slide-right' : 'none'">
@@ -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" />