From b77a8f64d05a6903dcda5bdbdfe24a8005b98ea0 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 23 Nov 2016 01:48:40 -0200
Subject: [PATCH] Improve toolbar behaviour

---
 docs/src/components/PageContent.vue     | 25 ++++++++++++++++++++++---
 docs/src/pages/themes/Configuration.vue |  2 +-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue
index b50898a..179efc5 100644
--- a/docs/src/components/PageContent.vue
+++ b/docs/src/components/PageContent.vue
@@ -2,11 +2,11 @@
   <div class="page-content">
     <md-whiteframe md-elevation="1">
       <md-toolbar>
-        <md-button class="md-icon-button">
+        <md-button class="md-icon-button nav-trigger">
           <md-icon>menu</md-icon>
         </md-button>
 
-        <div class="md-title">Configuration</div>
+        <div class="md-title">{{ pageTitle }}</div>
 
         <div class="release-version">
           <span>Version:</span>
@@ -15,7 +15,7 @@
           </md-select>
         </div>
 
-        <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button">
+        <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></path></svg>
         </md-button>
       </md-toolbar>
@@ -26,8 +26,18 @@
 </template>
 
 <style lang="scss" scoped>
+  .nav-trigger {
+    @media (min-width: 1280px) {
+      display: none;
+    }
+  }
+
   .md-title {
     flex: 1;
+
+    @media (min-width: 1280px) {
+      margin-left: 8px;
+    }
   }
 
   .release-version {
@@ -45,10 +55,19 @@
       color: rgba(#fff, .87);
     }
   }
+
+  .github {
+    @media (max-width: 480px) {
+      display: none;
+    }
+  }
 </style>
 
 <script>
   export default {
+    props: {
+      pageTitle: String
+    },
     data: () => ({
       currentDocs: '0.4.0',
       availableDocs: ['0.4.0', '0.3.0']
diff --git a/docs/src/pages/themes/Configuration.vue b/docs/src/pages/themes/Configuration.vue
index c233bf5..5cfaef5 100644
--- a/docs/src/pages/themes/Configuration.vue
+++ b/docs/src/pages/themes/Configuration.vue
@@ -1,5 +1,5 @@
 <template>
-  <page-content>
+  <page-content page-title="Configuration">
     <docs-component>
       <div slot="description">
         <p>Adipisicing elit. Perspiciatis dolorum, culpa veniam voluptatem nam. Animi sint incidunt cum, ut quod consectetur repellat eos. Tempore officia voluptas, commodi impedit quos animi.</p>