First stab at making this new admin navigation working

Rakefile

@@ -85,6 +85,15 @@ namespace :template do
     Ecrire::Commands::Server.new(Port: 3000).run!
   end
 
+  desc 'Run console for template development'
+  task :console do
+    require 'ecrire/commands/console'
+    Dir.chdir 'lib/ecrire/theme/template'
+    Rails.env = ENV['RAILS_ENV'] = 'development'
+    Ecrire::Commands::Console.new.run!
+  end
+
+  desc 'Routes available in your current template configuration'
   task :routes do
     Dir.chdir 'lib/ecrire/theme/template'
     Rails.env = ENV['RAILS_ENV'] = 'development'

lib/ecrire/app/assets/javascripts/admin/profiles/menu.coffee

@@ -0,0 +1,6 @@
+ObserveJS.bind 'Profiles.Menu', class
+  loaded: =>
+    @on 'profiles:show', @show
+
+  show: (e) =>
+    @element().appendChild(e.HTML)

lib/ecrire/app/assets/javascripts/shared/popup.js.coffee → lib/ecrire/app/assets/javascripts/shared/popup.coffee

@@ -1,5 +1,6 @@
 ObserveJS.bind 'Popup', class
   loaded: =>
+    @on 'click', @element().querySelector('.close'), @remove
     @on 'click', document, @clicked
     @on 'keyup', document, @escaped
 

lib/ecrire/app/assets/stylesheets/admin/base.scss

@@ -14,6 +14,8 @@ html {
 }
 
 body {
+  @include background(linear-gradient(darken($bright-blue, 5%), $bright-blue));
+
   margin: 0;
   padding: 0;
   font-family: $fonts;
@@ -23,7 +25,16 @@ body {
 }
 
 a {
+
+  @include transition(color 0.2s ease-in);
+
   color: $link-color;
+  text-decoration: none;
+
+  &:hover {
+    color: darken($link-color, 25%);
+  }
+
 }
 
 ol.list {
@@ -34,6 +45,10 @@ h1, h2, h3, h4, h5 {
   font-weight: 100;
 }
 
+h1 {
+  font-size: 2.5em;
+}
+
 ul, ol {
   margin: 0;
   padding: 0;
@@ -78,12 +93,21 @@ button, input {
 main {
   @include flex(1 100%);
   @include display(flex);
-  @include flex-direction(column);
+
   position: relative;
-  width: 100%;
   z-index: 1;
+
+  top: 0;
+  left:0;
+  right:0;
+  bottom:0;
 }
 
+main > section {
+  @include flex(1);
+  background: white;
+  margin-right: 5vw;
+}
 
 .hidden {
   display: none;
@@ -112,7 +136,7 @@ main {
   font-weight: bold;
   background-color: rgba(white, 0.05);
   color: lighten($navy-blue, 100%);
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 2px 0 transparent;
+  box-shadow: inset 0 1px 0 0 transparent;
 
   &.selected {
     background-color: rgba(black, 0.3);
@@ -124,11 +148,11 @@ main {
     background-color: rgba(white, 0.05);
     color: white;
     border-color: rgba(black, 0.3);
-    box-shadow: inset 0 1px 0 0 rgba(white, 0.35), 0 0 2px 0 rgba(black, 0.2);
+    box-shadow: inset 0 1px 0 0 rgba(white, 0.35);
   }
 
   &:active:not(.selected) {
-    box-shadow: inset 0 1px 2px 0 rgba(black, 0.3), 0 0 2px 0 transparent;
+    box-shadow: inset 0 1px 2px 0 rgba(black, 0.3);
     background-color: rgba(black, 0.3);
   }
 }

lib/ecrire/app/assets/stylesheets/admin/navigation.scss

@@ -1,106 +1,171 @@
-nav#Menu.admin section {
+#AdminNavigation {
   @include display(flex);
-  height: 100%;
+  @include flex-direction(column);
+  min-width: 180px;
+  width: 20vw;
+  max-width: 400px;
+  color: $light-blue;
 }
 
-nav#Menu.admin {
+#AdminNavigation > a.home {
   @include display(flex);
-  @include align-content(flex-start);
   @include align-items(center);
-  @include justify-content(space-between);
-  @include flex-wrap(wrap);
+  @include justify-content(center);
+  @include transition(box-shadow 0.2s ease-in);
 
-  height: 3em;
-  font-family: $fonts;
-  font-size: 16px;
-  font-weight: bold;
-  padding: 0 2em;
-  z-index: 1000;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
+  padding: 8px 12px;
+  margin-top: auto;
+  box-shadow: 0 0 3px 0 $navy-blue;
 
-  background-color: lighten($gray-blue, 25%);
-  color: darken($gray-blue, 30%);
-  border-bottom: 1px solid darken($gray-blue, 75%);
-
-  .button {
-    @include display(flex);
-    @include flex(0 0 auto);
-    @include align-items(center);
-    @include justify-content(center);
-
-    border-radius: 0;
-    border: none;
-    background: none;
-
-    height: 100%;
-
-    text-decoration: none;
-    padding: 4px 2em;
-    margin: 0;
-    font-size: 0.8em;
-    text-transform: uppercase;
-    font-weight: lighter;
-    color: inherit;
-    text-shadow: none;
-
-    &.selected {
-      color: lighten($navy-blue, 100%);
-    }
-
-    &:hover:not(.selected) {
-      text-decoration: underline;
-      box-shadow: none;
-    }
-
-    &:active:not(.selected) {
-      color: lighten($navy-blue, 100%);
-      text-decoration: underline;
-      box-shadow: none;
-    }
+  &:hover {
+    box-shadow: 0 0 3px 0 lighten($navy-blue, 5%);
   }
+  &:hover > svg {
+    fill: lighten($light-blue, 45%);
+  }
+
+  & > svg {
+    @include transition(fill 0.2s ease-in);
+    width: 14px;
+    height: 14px;
+    margin-right: 12px;
+
+    fill: $light-blue;
+  }
+}
+
+#AdminNavigation > div.current.user {
+  position: relative;
+  margin-bottom: 1vh;
 }
 
-nav#Menu.admin form.logout {
+#AdminNavigation > div.current.user > a.home {
+  text-align: center;
+  display: block;
+  font-size: 0.8em;
+}
+
+#AdminNavigation > div.current.user > a.profile.menu {
   @include display(flex);
-  @include flex(0 0 auto);
   @include align-items(center);
-  @include justify-content(center);
+  @include align-content(center);
+  @include justify-content(space-between);
 
-  margin: 0;
-  height: 100%;
+  border-radius: 2px;
+  margin: 2vh 1vw 0 1vw;
+  background-color: rgba(darken($bright-blue, 25%), 0.2);
+  padding: 4px 8px;
+}
 
-  input {
-    @include transition(box-shadow 0.1s ease, background-color 0.1s ease);
+#AdminNavigation > div.current.user > a.profile.menu > span {
+  text-align: center;
+}
 
-    background-color: lighten($red, 15%);
-    color: darken($red, 25%);
+#AdminNavigation > div.current.user > a.profile.menu > svg {
+  width: 18px;
+  height: 18px;
+  fill: rgba(darken($bright-blue, 25%), 0.7);
+}
 
-    cursor: pointer;
-    outline: none;
+#AdminNavigation h2 {
+  @include display(flex);
+  @include align-items(center);
 
-    padding: 6px 10px;
-    margin: 0;
+  font-size: 1.2em;
+  padding: 8px;
+  margin: 0 1vw;
+  font-weight: bold;
 
-    border: none;
-    border-radius: 2px;
+}
 
-    font-size: 0.9em;
-    font-family: inherit;
-    font-weight: bold;
+#AdminNavigation h2 + div {
+  @include display(flex);
+  @include flex-direction(column);
 
-    box-shadow: 0 1px 1px 0 transparent;
+  margin: 0 1vw 1vh 1vw;
+}
 
-    &:hover {
-      box-shadow: 0 0.5px 0.5px 0 darken($red, 15%);
-    }
+#AdminNavigation h2 + div > a {
+  padding: 8px 20px;
+  color: $light-blue;
+  font-size: 0.8em;
+}
 
-    &:active {
-      box-shadow: 0 1px 1px 0 transparent;
-      background-color: darken($red, 5%);
-    }
+#AdminNavigation a {
+  color: $light-blue;
+  &:hover {
+    color: lighten($light-blue, 45%);
   }
+}
 
+#AdminNavigation form.logout {
+  margin-top: auto;
+  border-top: 1px solid $light-blue;
+  text-align: center;
 }
+
+#AdminNavigation form.logout input[type=submit] {
+  width: 100%;
+}
+
+#AdminNavigation [as='Popup'] {
+  position: absolute;
+  margin: 2vh 1vw;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+
+  background-color: $light-blue;
+}
+
+#AdminNavigation [as='Popup'] > div.current.user {
+  @include display(flex);
+  @include align-items(center);
+  @include align-content(center);
+  @include justify-content(space-between);
+
+  padding: 4px 8px;
+}
+
+#AdminNavigation [as='Popup'] > div.current.user > a {
+  @include display(flex);
+  @include flex(0 auto);
+  padding: 0;
+  cursor: pointer;
+}
+
+#AdminNavigation [as='Popup'] > div.current.user > a > svg {
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  fill: rgba(darken($bright-blue, 25%), 0.7);
+}
+
+#AdminNavigation [as='Popup'] > form.logout {
+  margin: 8px 0;
+  color: $red;
+}
+
+#AdminNavigation [as='Popup'] > form.logout > button {
+  @include display(flex);
+  @include align-items(center);
+  @include align-content(center);
+
+  width: 100%;
+  padding: 4px 8px;
+  font-weight: bold;
+  border-radius: 0;
+
+  &:active {
+    background-color: rgba($red, 0.5);
+  }
+}
+
+#AdminNavigation [as='Popup'] > form.logout > button > svg {
+  width: 12px;
+  height: 12px;
+  fill: $red;
+  margin: 1px 4px 0 0;
+}
+