Finishing touches on drawer

material/base.html

@@ -36,7 +36,7 @@
       {% include "partials/fonts.html" %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-de7f9d2ca0.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-39bc0c8cde.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
       {% endif %}

material/partials/nav-item.html

@@ -9,7 +9,9 @@
       {{ nav_item.title }}
     </label>
     <nav class="md-nav" data-md-component="collapsible">
-      <label class="md-nav__title" for="{{ path }}"></label>
+      <label class="md-nav__title" for="{{ path }}">
+        {{ nav_item.title}}
+      </label>
       <ul class="md-nav__list">
         {% for nav_item in nav_item.children %}
           {% set temp = path %}

material/partials/nav.html

@@ -1,14 +1,23 @@
 <nav class="md-nav md-nav--primary">
-  <label class="md-nav__title" for="drawer">{{ config.site_name }}</label>
+  <label class="md-nav__title md-nav__title--site" for="drawer">
+    <i class="md-icon md-nav__icon">
+      {% if config.extra.logo %}
+        <img src="{{ base_url }}/{{ config.extra.logo }}" width="24" height="24">
+      {% else %}
+        school
+      {% endif %}
+    </i>
+    {{ config.site_name }}
+  </label>
+  {% if config.repo_url %}
+    <div class="md-nav__source">
+      {% include "partials/source.html" %}
+    </div>
+  {% endif %}
   <ul class="md-nav__list">
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
       {% include "partials/nav-item.html" %}
     {% endfor %}
   </ul>
-  {% if config.repo_url %}
-    <div class="md-nav__source">
-      {% include "partials/source.html" %}
-    </div>
-  {% endif %}
 </nav>

material/partials/source.html

@@ -11,7 +11,7 @@
 <a href="{{ config.repo_url }}" title="Go to repository" class="md-source" data-md-source="{{ repo_type }}">
   {% if repo_type %}
     <svg class="md-source__icon">
-      <use href="#{{ repo_type }}" x="12" y="12" width="24" height="24"></use>
+      <use xlink:href="#{{ repo_type }}" x="12" y="12" width="24" height="24"></use>
     </svg>
   {% endif %}
   <div class="md-source__repository">

mkdocs.yml

@@ -19,7 +19,7 @@
 # IN THE SOFTWARE.
 
 # Project information
-site_name: Material
+site_name: Material for MkDocs
 site_description: A material design theme for MkDocs
 site_author: Martin Donath
 site_url: http://squidfunk.github.io/mkdocs-material/

src/assets/stylesheets/layout/_nav.scss

@@ -50,6 +50,11 @@
       display: none;
       content: "arrow_back";
     }
+
+    // Hide icon by default
+    .md-nav__icon {
+      display: none;
+    }
   }
 
   // List of items
@@ -79,6 +84,11 @@
     }
   }
 
+  // Icon
+  &__icon {
+    @extend %md-icon, %md-icon__button;
+  }
+
   // Link inside item
   &__link {
     display: block;
@@ -159,7 +169,6 @@
       .md-nav__toggle ~ .md-nav {
         @include z-depth(4);
 
-        left: 0.4rem;
         background-color: $md-color-white;
       }
 
@@ -167,8 +176,8 @@
       // inside the drawer is always styled accordingly
       html & .md-nav__title {
         position: relative;
-        min-height: 5.6rem;
+        height: 11.2rem;
-        padding: 0.4rem 1.6rem;
+        padding: 6.0rem 1.6rem 0.4rem;
         background-color: $md-color-black--lightest;
         color: $md-color-black--light;
         font-weight: 400;
@@ -187,10 +196,33 @@
           color: $md-color-black--light;
         }
 
-        // Remove border for first ist item
+        // Remove border for first list item
         ~ .md-nav__list > .md-nav__item:first-child {
           border-top: 0;
         }
+
+        // Site title in main navigation
+        &--site {
+          position: relative;
+          background-color: $md-color-primary;
+          color: $md-color-white;
+
+          // Site logo
+          .md-nav__icon {
+            display: block;
+            position: absolute;
+            top: 0.4rem;
+            left: 0.4rem;
+            width: 6.4rem;
+            height: 6.4rem;
+            font-size: 4.8rem;
+          }
+
+          // Hide back arrow icon
+          &::before {
+            display: none;
+          }
+        }
       }
 
       // List of items
@@ -331,7 +363,7 @@
     &__source {
       display: block;
       padding: 0.4rem;
-      background-color: $md-color-black;
+      background-color: darken($md-color-primary, 10%);
       color: $md-color-white;
     }
   }

src/partials/nav-item.html

@@ -38,7 +38,9 @@
       {{ nav_item.title }}
     </label>
     <nav class="md-nav" data-md-component="collapsible">
-      <label class="md-nav__title" for="{{ path }}"></label>
+      <label class="md-nav__title" for="{{ path }}">
+        {{ nav_item.title}}
+      </label>
       <ul class="md-nav__list">
 
         <!-- Render nested item list -->

src/partials/nav.html

@@ -22,16 +22,26 @@
 
 <!-- Main navigation -->
 <nav class="md-nav md-nav--primary">
-  <label class="md-nav__title" for="drawer">{{ config.site_name }}</label>
+  <label class="md-nav__title md-nav__title--site" for="drawer">
+    <i class="md-icon md-nav__icon">
+      {% if config.extra.logo %}
+        <img src="{{ base_url }}/{{ config.extra.logo }}"
+            width="24" height="24" />
+      {% else %}
+        school
+      {% endif %}
+    </i>
+    {{ config.site_name }}
+  </label>
+  {% if config.repo_url %}
+    <div class="md-nav__source">
+      {% include "partials/source.html" %}
+    </div>
+  {% endif %}
   <ul class="md-nav__list">
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
       {% include "partials/nav-item.html" %}
     {% endfor %}
   </ul>
-  {% if config.repo_url %}
-    <div class="md-nav__source">
-      {% include "partials/source.html" %}
-    </div>
-  {% endif %}
 </nav>

src/partials/source.html

@@ -40,7 +40,7 @@
     data-md-source="{{ repo_type }}">
   {% if repo_type %}
     <svg class="md-source__icon">
-      <use href="#{{ repo_type }}" x="12" y="12"
+      <use xlink:href="#{{ repo_type }}" x="12" y="12"
           width="24" height="24"></use>
     </svg>
   {% endif %}