more progress with initial admin redesign

pages/admin/dashboard.md

@@ -2,3 +2,86 @@
 title: Dashboard
 ---
 
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

themes/grav/css-compiled/template.css

@@ -1,5 +1,5 @@
 @import url(//fonts.googleapis.com/css?family=Montserrat:400|Lato:300,400,700);
-#admin-login {
+#admin-login, #admin-logo h3, #admin-main .titlebar h1 {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
@@ -56,6 +56,9 @@ b, strong, label, th {
 .default-glow-shadow {
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
 
+.default-box-shadow {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
+
 .padding-horiz {
   padding-left: 7rem;
   padding-right: 7rem; }
@@ -112,7 +115,6 @@ h1 {
     font-size: 1.25rem; } }
 
 h1 {
-  text-align: center;
   letter-spacing: -3px; }
 
 h2 {
@@ -121,34 +123,6 @@ h2 {
 h3 {
   letter-spacing: -1px; }
 
-h1 + h2 {
-  margin: -2rem 0 2rem 0;
-  font-size: 2rem;
-  line-height: 1;
-  text-align: center;
-  font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
-  font-weight: 300; }
-  @media only all and (min-width: 48em) and (max-width: 59.938em) {
-    h1 + h2 {
-      font-size: 1.6rem; } }
-  @media only all and (max-width: 47.938em) {
-    h1 + h2 {
-      font-size: 1.5rem; } }
-
-h2 + h3 {
-  margin: 0.5rem 0 2rem 0;
-  font-size: 2rem;
-  line-height: 1;
-  text-align: center;
-  font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
-  font-weight: 300; }
-  @media only all and (min-width: 48em) and (max-width: 59.938em) {
-    h2 + h3 {
-      font-size: 1.6rem; } }
-  @media only all and (max-width: 47.938em) {
-    h2 + h3 {
-      font-size: 1.5rem; } }
-
 blockquote {
   border-left: 10px solid #f0f2f4; }
   blockquote p {
@@ -332,4 +306,96 @@ td {
     text-align: center;
     padding: 1rem 3rem; }
 
+#admin-sidebar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 20%;
+  background: #253a47; }
+
+#admin-logo {
+  background: #20333e;
+  height: 4.2rem; }
+  #admin-logo h3 {
+    text-transform: uppercase;
+    margin: 0;
+    text-align: center;
+    font-size: 1.2rem; }
+
+#admin-user-details {
+  padding: 2rem;
+  border-bottom: 1px solid #20333e; }
+  #admin-user-details img {
+    border-radius: 100%;
+    float: left; }
+  #admin-user-details .admin-user-names {
+    margin-left: 45px; }
+    #admin-user-details .admin-user-names h4, #admin-user-details .admin-user-names h5 {
+      margin: 0;
+      font-size: 1rem;
+      line-height: 1.3; }
+    #admin-user-details .admin-user-names h5 {
+      font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+      color: #afc7d5;
+      font-size: 0.9rem; }
+
+#admin-menu {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none; }
+  #admin-menu li {
+    font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
+    #admin-menu li a {
+      -webkit-transition: all 0.2s ease;
+      -moz-transition: all 0.2s ease;
+      transition: all 0.2s ease;
+      display: block;
+      padding-left: 25px;
+      padding-top: 0.7rem;
+      padding-bottom: 0.7rem;
+      color: #d1dee7; }
+      #admin-menu li a i {
+        -webkit-transition: all 0.2s ease;
+        -moz-transition: all 0.2s ease;
+        transition: all 0.2s ease;
+        color: #afc7d5;
+        margin-right: 8px; }
+      #admin-menu li a:hover {
+        background: #20333e;
+        color: white; }
+        #admin-menu li a:hover i {
+          font-size: 1.2rem; }
+    #admin-menu li.selected a {
+      background: #314d5b;
+      color: white;
+      padding-left: 16px;
+      border-left: 9px solid #349886; }
+      #admin-menu li.selected a i {
+        color: #e1eaf0; }
+
+#admin-main {
+  margin-left: 20%; }
+  #admin-main .titlebar {
+    height: 4.2rem;
+    padding: 0 3rem; }
+    #admin-main .titlebar h1 {
+      margin: 0;
+      font-size: 1.5rem;
+      text-align: left;
+      letter-spacing: -1px; }
+  #admin-main .content-padding {
+    position: absolute;
+    top: 4.2rem;
+    bottom: 0;
+    left: 20%;
+    right: 0;
+    overflow-y: auto;
+    padding: 2.5rem; }
+  #admin-main .admin-block {
+    background: #eeeeee;
+    color: #737c81;
+    padding: 3rem; }
+
 /*# sourceMappingURL=template.css.map */

themes/grav/scss/configuration/template/_colors.scss

@@ -17,6 +17,8 @@ $secondary-accent-bg:           #349886;
 $secondary-accent-fg:           #fff;
 $info-bg:                       #9055AF;
 $info-fg:                       #fff;
+$content-bg:                    #EEEEEE;
+$content-fg:                    #737C81;
 
 
 // Borders

themes/grav/scss/template.scss

@@ -48,6 +48,9 @@
 // Login
 @import "template/login";
 
+// Admin
+@import "template/admin";
+
 // Custom
 @import "template/custom";
 

themes/grav/scss/template/_admin.scss

@@ -0,0 +1,143 @@
+$sidebar-width: 20%;
+$sidebar-padding: 2rem;
+$topbar-height: 4.2rem;
+
+#admin-sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: $sidebar-width;
+
+    background: $accent-bg;
+}
+
+
+#admin-logo {
+    background: $darker-accent-bg;
+    height: $topbar-height;
+
+    h3 {
+        text-transform: uppercase;
+        margin: 0;
+        @extend %vertical-align;
+        text-align: center;
+        font-size: 1.2rem;
+    }
+}
+
+#admin-user-details {
+    padding: $sidebar-padding;
+    border-bottom: 1px solid $darker-accent-bg;
+
+    img {
+        border-radius: 100%;
+        float: left;
+    }
+
+    .admin-user-names {
+        margin-left: 45px;
+
+        h4, h5 {
+            margin: 0;
+            font-size: 1rem;
+            line-height: 1.3;
+        }
+
+        h5 {
+            font-family: $font-family-default;
+            color: lighten($accent-bg,55%);
+            font-size: 0.9rem;
+        }
+    }
+}
+
+#admin-menu {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+
+    li {
+        font-family: $font-family-header;
+
+
+        a {
+            @include transition(all 0.2s ease);
+            display: block;
+            padding-left: 25px;
+            padding-top: 0.7rem;
+            padding-bottom: 0.7rem;
+
+            color: lighten($accent-bg,65%);
+
+            i {
+                @include transition(all 0.2s ease);
+                color: lighten($accent-bg,55%);
+                margin-right: 8px;
+            }
+
+            &:hover {
+                background: $darker-accent-bg;
+                // padding-left: 30px;
+                color: $accent-fg;
+
+                i {
+                    font-size: 1.2rem;
+                }
+            }
+        }
+
+        &.selected {
+            a {
+                background: $page-bg;
+                color: $accent-fg;
+                padding-left: 16px;
+                border-left: 9px solid $secondary-accent-bg;
+
+                i {
+                    color: lighten($accent-bg,70%);
+                }
+
+            }
+
+        }
+
+    }
+}
+
+
+#admin-main {
+    margin-left: $sidebar-width;
+
+    .titlebar {
+        height: $topbar-height;
+
+        padding: 0 $padding-default;
+
+        h1 {
+            margin: 0;
+            @extend %vertical-align;
+            font-size: 1.5rem;
+            text-align: left;
+            letter-spacing: -1px;
+        }
+    }
+
+    .content-padding {
+        position: absolute;
+        top: $topbar-height;
+        bottom: 0;
+        left: $sidebar-width;
+        right: 0;
+        overflow-y: auto;
+        padding: 2.5rem;
+    }
+
+    .admin-block {
+        background: $content-bg;
+        color: $content-fg;
+        padding: $padding-default;
+    }
+}

themes/grav/scss/template/_extensions.scss

@@ -10,6 +10,10 @@
     box-shadow: 0 0 20px rgba(0,0,0,0.2);
 }
 
+.default-box-shadow {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
 .padding-horiz {
 	padding-left: $padding-horiz;
 	padding-right: $padding-horiz;

themes/grav/scss/template/_typography.scss

@@ -49,7 +49,6 @@ h4 {
 }
 
 h1 {
-	text-align: center;
 	letter-spacing: -3px;
 }
 
@@ -61,36 +60,6 @@ h3 {
 	letter-spacing: -1px;
 }
 
-h1 + h2 {
-	margin: -2rem 0 2rem 0;
-	font-size: 2rem;
-	@include breakpoint(tablet-range) {
-		font-size: 1.6rem;
-	}
-	@include breakpoint(mobile-only) {
-		font-size: 1.5rem;
-	}
-	line-height: 1;
-	text-align: center;
-	font-family: $font-family-default;
-	font-weight: 300;
-}
-
-h2 + h3 {
-	margin: 0.5rem 0 2rem 0;
-	font-size: 2rem;
-	@include breakpoint(tablet-range) {
-		font-size: 1.6rem;
-	}
-	@include breakpoint(mobile-only) {
-		font-size: 1.5rem;
-	}
-	line-height: 1;
-	text-align: center;
-	font-family: $font-family-default;
-	font-weight: 300;
-}
-
 
 // Blockquote
 blockquote {

themes/grav/templates/configuration.html.twig

@@ -1,13 +1,13 @@
 {% extends 'partials/base.html.twig' %}
 
+{% block titlebar %}
+    <h1><i class="fa fa-fw fa-th"></i> Configuration</h1>
+{% endblock %}
+
 {% block content %}
-    <div class="admin-block">
-        <h1>
-            Configuration
-        </h1>
 
     {% include 'partials/messages.html.twig' %}
     {% include 'partials/blueprints.html.twig' with { blueprints: admin.blueprints('system'), data: admin.data('system') } %}
-    </div>
+
 {% endblock %}
 

themes/grav/templates/dashboard.html.twig

@@ -1,13 +1,66 @@
 {% extends 'partials/base.html.twig' %}
 
+{% block titlebar %}
+    <h1><i class="fa fa-fw fa-th"></i> Dashboard</h1>
+{% endblock %}
+
 {% block content %}
 
-    <div class="admin-block">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-        <h1>
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-            Dashboard
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        </h1>
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-        {% include 'partials/messages.html.twig' %}
-    </div>
 {% endblock %}
 

themes/grav/templates/forms/fields/password/password.html.twig

@@ -6,9 +6,9 @@
         <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
         {% else %}
         {{ field.label }}
-            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
         {% endif %}
-    </label>
+        {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
+
         <input  type="password"
                 class="input"
                 name="{{ (scope ~ field.name)|fieldName }}"
@@ -20,4 +20,5 @@
                 {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                 {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
         />
+    </label>
 </div>

themes/grav/templates/forms/fields/text/text.html.twig

@@ -2,14 +2,12 @@
 
 <div class="form-field">
     <label class="inline">
-        <span>
         {% if field.help %}
         <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
         {% else %}
         {{ field.label }}
         {% endif %}
         {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-        </span>
 
         <input  type="text"
                 class="input"

themes/grav/templates/partials/base.html.twig

@@ -45,27 +45,27 @@
 </head>
 <body>
     {% block page %}
+
     {% block navigation %}
         {% include 'partials/nav.html.twig' %}
     {% endblock %}
-    <div>
+
-        <section id="main">
+    <section id="admin-main">
-            <div id="toolbar" class="mm-fixed-top">
+        <div class="titlebar secondary-accent">
-                {% block toolbar %}
+            {% block titlebar %}{% endblock %}
-                    {% include 'partials/toolbar.html.twig' %}
-                {% endblock %}
         </div>
         <div class="content-padding">
+            {% include 'partials/messages.html.twig' %}
+            <div class="admin-block default-box-shadow">
             {% block content %}{% endblock %}
             </div>
-        </section>
-
-        {% block footer_section %}
             <footer id="footer">
                 <a href="http://getgrav.org">Grav</a> was made with <i class="fa fa-heart"></i> by <a href="http:/www.rockettheme.com">RocketTheme</a>.
             </footer>
-        {% endblock %}
         </div>
+
+    </section>
+
     {% endblock page %}
 </body>
 </html>

themes/grav/templates/partials/nav.html.twig

@@ -1,26 +1,45 @@
-<nav id="menu">
+<nav id="admin-sidebar">
-    <ul class="grav-menu">
+    <div id="admin-logo">
-        <li class="{{ (location == 'dashboard') ? 'Selected' : '' }}">
+        <h3>Grav Admin</h3>
-            <a href="{{ base_url_relative }}"><i class="fa fa-fw fa-tachometer"></i> Dashboard</a>
+    </div>
+
+    {% if admin.authorise %}
+    <div id="admin-user-details">
+        <img src="http://www.gravatar.com/avatar/{{ admin.user.email|md5 }}?s=32" />
+        <div class="admin-user-names">
+            <h4>{{ admin.user.fullname }}</h4>
+            <h5>{{ admin.user.title }}</h5>
+        </div>
+    </div>
+    {% endif %}
+
+    <ul id="admin-menu">
+        <li class="{{ (location == 'dashboard') ? 'selected' : '' }}">
+            <a href="{{ base_url_relative }}"><i class="fa fa-fw fa-th"></i> Dashboard</a>
         </li>
-        <li class="{{ (location == 'configuration') ? 'Selected' : '' }}">
+        <li class="{{ (location == 'configuration') ? 'selected' : '' }}">
-            <a href="{{ base_url_relative }}/configuration"><i class="fa fa-fw fa-cogs"></i> Configuration</a>
+            <a href="{{ base_url_relative }}/configuration"><i class="fa fa-fw fa-wrench"></i> Configuration</a>
         </li>
-        <li class="{{ (location == 'settings') ? 'Selected' : '' }}">
+        <li class="{{ (location == 'pages') ? 'selected' : '' }}">
-            <a href="{{ base_url_relative }}/settings"><i class="fa fa-fw fa-wrench"></i> Site Settings</a>
+            <a href="{{ base_url_relative }}/pages"><i class="fa fa-fw fa-file-text-o"></i> Pages</a>
         </li>
-        <li class="{{ (location == 'pages') ? 'Selected' : '' }} {{ pages.children.count > 0 ? 'hasChildren' : '' }}">
+        <li class="{{ (location == 'plugins') ? 'selected' : '' }} {{ plugins.count > 0 ? 'hasChildren' : '' }}">
-            <a href="{{ base_url_relative }}/pages"><i class="fa fa-fw fa-archive"></i> Pages</a>
+            <a href="{{ base_url_relative }}/plugins"><i class="fa fa-fw fa-puzzle-piece"></i> Plugins</a>
-            {% include 'partials/page-children.html.twig' with {'pages': pages} %}
         </li>
-        <li class="{{ (location == 'themes') ? 'Selected' : '' }}">
+        <li class="{{ (location == 'themes') ? 'selected' : '' }}">
-            <a href="{{ base_url_relative }}/themes"><i class="fa fa-fw fa-picture-o"></i> Themes</a>
+            <a href="{{ base_url_relative }}/themes"><i class="fa fa-fw fa-tint"></i> Themes</a>
         </li>
-        <li class="{{ (location == 'plugins') ? 'Selected' : '' }} {{ plugins.count > 0 ? 'hasChildren' : '' }}">
+        <li class="{{ (location == 'installer') ? 'selected' : '' }}">
-            <a href="{{ base_url_relative }}/plugins"><i class="fa fa-fw fa-bolt"></i> Plugins</a>
+            <a href="{{ base_url_relative }}/installer"><i class="fa fa-fw fa-cloud-download"></i> Installer</a>
         </li>
-        <li class="{{ (location == 'logs') ? 'Selected' : '' }}">
+        <li class="{{ (location == 'users') ? 'selected' : '' }}">
-            <a href="{{ base_url_relative }}/logs"><i class="fa fa-fw fa-bolt"></i> Error Log</a>
+            <a href="{{ base_url_relative }}/users"><i class="fa fa-fw fa-child"></i> Users</a>
+        </li>
+        <li class="{{ (location == 'logs') ? 'selected' : '' }}">
+            <a href="{{ base_url_relative }}/logs"><i class="fa fa-fw fa-warning"></i> Error Logs</a>
+        </li>
+        <li>
+            <a href="{{ base_url_relative }}/task:logout"><i class="fa fa-fw fa-power-off"></i> Logout</a>
         </li>
     </ul>
 </nav>