changes for responsive

src/assets/scss/material-kit/_navbars.scss

@@ -5,12 +5,6 @@
   border-radius: 3px;
   margin-bottom: 20px;
 
-  .md-toolbar-section-start {
-    .md-list {
-      display: none;
-    }
-  }
-
   &.md-transparent{
     background-color: transparent !important;
     box-shadow: none;
@@ -26,6 +20,13 @@
     }
   }
 
+  .md-toolbar-section-end .md-list {
+    justify-content: flex-end;
+  }
+  .md-toolbar-section-start .md-list {
+    justify-content: flex-start;
+  }
+
   &.md-absolute {
     position: fixed;
     z-index: 1030;
@@ -225,6 +226,7 @@
 
   .md-title {
     height: 50px;
+    min-width: 50px;
     display: flex;
     align-items: center;
     font-size: 18px;

src/assets/scss/material-kit/_responsive.scss

@@ -20,6 +20,12 @@
         background-color: rgba(0, 0, 0, 0.45);
     }
 
+    .md-toolbar-section-start {
+      .md-list {
+        display: none;
+      }
+    }
+
     .footer .container {
       flex-direction: column;
       text-align: center;
@@ -61,6 +67,10 @@
           flex-flow: column;
         }
 
+        .md-collapse-wrapper {
+          height: calc(100vh - 61px);
+        }
+
         .dropdown-toggle:not(.md-button):after,
         .dropdown-toggle .md-ripple:after,
         .md-list-item .md-button.md-button-link:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple .md-button-content i,
@@ -134,7 +144,10 @@
             display: none;
           }
 
-          &:after {
+        }
+
+        .nav-mobile-section-start .md-list-item:last-child:after,
+        .md-list-item:after {
           width: calc(100% - 30px);
           content: "";
           display: block;
@@ -143,8 +156,6 @@
           background-color: #e5e5e5;
         }
 
-        }
-
         .md-list-item-container {
           width: auto;
         }
@@ -161,7 +172,6 @@
             position: relative;
             z-index: 4;
             overflow-y:scroll;
-            height: calc(100vh - 61px);
             width: 100%;
         }
         &::before{
@@ -380,6 +390,11 @@
 
   .md-tabs-navigation {
     flex-direction: column;
+
+    .md-button {
+      max-width: none;
+      margin: 0 !important;
+    }
   }
 
   .modal-wrapper .modal-container {
@@ -411,6 +426,10 @@
       max-width: 960px;
   }
 
+  .md-list.nav-mobile-menu {
+    display: none;
+  }
+
   .hidden-lg {
     display: none !important;
   }

src/layout/MainNavbar.vue

@@ -12,6 +12,10 @@
         </md-button>
 
         <div class="md-collapse">
+          <div class="md-collapse-wrapper">
+            <mobile-menu nav-mobile-section-start="false">
+              <!-- Here you can add your items from the section-start of your toolbar -->
+            </mobile-menu>
             <md-list>
               <li class="md-list-item" v-if="!showDownload">
                 <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
@@ -23,7 +27,7 @@
                       </md-button>
                       <ul class="dropdown-menu dropdown-with-icons">
                         <li>
-                        <a href="/">
+                          <a href="#/">
                             <i class="material-icons">layers</i>
                             <p>All Components</p>
                           </a>
@@ -102,6 +106,7 @@
           </div>
         </div>
       </div>
+    </div>
   </md-toolbar>
 </template>
 
@@ -119,7 +124,11 @@ function resizeThrottler(actualResizeHandler) {
   }
 }
 
+import MobileMenu from "@/layout/MobileMenu";
 export default {
+  components: {
+    MobileMenu
+  },
   props: {
     type: {
       type: String,

src/layout/MobileMenu.vue

@@ -0,0 +1,17 @@
+<template>
+  <md-list class="nav-mobile-menu nav-mobile-section-start" v-if="navMobileSectionStart === 'true'">
+    <slot></slot>
+  </md-list>
+</template>
+
+<script>
+export default {
+  name: "mobile-menu",
+  props: {
+    navMobileSectionStart: {
+      type: String,
+      default: "false"
+    }
+  }
+};
+</script>

src/views/Index.vue

@@ -5,7 +5,7 @@
         <div class="md-layout-item">
           <div class="brand">
             <h1>Vue Material Kit.</h1>
-            <h3>A Badass VueMaterial.io Kit based on Material Design.</h3>
+            <h3>Badass VueJs Kit based on Material Design.</h3>
           </div>
         </div>
       </div>
@@ -128,11 +128,11 @@
       <div class="section section-download" id="downloadSection">
         <div class="container">
           <div class="md-layout text-center">
-            <div class="md-layout-item md-size-66 mx-auto">
+            <div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
               <h2>Do you love this UI Kit?</h2>
               <h4>Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from <a href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" target="_blank">ThemeIsle</a> created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!</h4>
             </div>
-            <div class="md-layout-item md-size-50 md-small-size-66 mx-auto">
+            <div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
               <md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-primary md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button>
               <md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" class="md-primary md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
             </div>
@@ -140,12 +140,15 @@
     	    <br><br>
 
         	<div class="md-layout text-center">
-        		<div class="md-layout-item md-size-66 mx-auto">
+        		<div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
               <h2>Want more?</h2>
-              <h4>We've just launched <a href="https://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" target="_blank">Material Kit PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
+              <h4>We've just launched <a href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-mk-demos" target="_blank">Vue Material Dashboard PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
+            </div>
+        		<div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
+              <div class="btn-container">
+                <md-button href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade disabled" target="_blank"><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button>
+                <md-button href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
               </div>
-        		<div class="md-layout-item md-size-40 md-small-size-66 mx-auto">
-              <md-button href="https://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon> Upgrade to PRO</md-button>
         		</div>
           </div>
 
@@ -239,4 +242,10 @@ export default {
     margin-left: 5px;
   }
 }
+
+@media all and (min-width: 991px) {
+  .btn-container {
+    display: flex;
+  }
+}
 </style>

src/views/Login.vue

@@ -3,7 +3,7 @@
     <div class="section page-header header-filter" :style="headerStyle">
       <div class="container">
         <div class="md-layout">
-          <div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-80 md-medium-size-40 mx-auto">
+          <div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto">
             <login-card header-color="green">
               <h4 slot="title" class="card-title">Login</h4>
               <md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white">