Set up responsive admin layout

ember/admin/app/components/ui/admin-nav-item.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import NavItem from './nav-item';
+
+var precompileTemplate = Ember.Handlebars.compile;
+
+export default NavItem.extend({
+  layout: precompileTemplate('{{#link-to routeName}}{{fa-icon icon class="icon"}} <span class="label">{{label}}</span> <div class="description">{{description}}</div>{{/link-to}}')
+});

ember/admin/app/components/user-dropdown.js

@@ -0,0 +1,23 @@
+import Ember from 'ember';
+
+import HasItemLists from '../mixins/has-item-lists';
+import DropdownButton from './ui/dropdown-button';
+
+var precompileTemplate = Ember.Handlebars.compile;
+
+export default DropdownButton.extend(HasItemLists, {
+  layoutName: 'components/application/user-dropdown',
+  itemLists: ['items'],
+
+  buttonClass: 'btn btn-default btn-naked btn-rounded btn-user',
+  menuClass: 'pull-right',
+  label: Ember.computed.alias('user.username'),
+
+  populateItems: function(items) {
+    var self = this;
+
+    this.addActionItem(items, 'logout', 'Log Out', 'sign-out', null, function() {
+      self.get('parentController').send('invalidateSession');
+    });
+  }
+})

ember/admin/app/controllers/application.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    toggleDrawer: function() {
+      this.toggleProperty('drawerShowing');
+    }
+  }
+});

ember/admin/app/router.js

@@ -6,7 +6,11 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-  // this.resource('index', {path: '/'}
+  this.resource('dashboard', {path: '/'});
+  this.resource('basics');
+  this.resource('permissions');
+  this.resource('appearance');
+  this.resource('extensions');
 });
 
 export default Router;

ember/admin/app/templates/alerts.hbs

@@ -1,7 +0,0 @@
-<div class="alerts">
-  {{#each alert in alerts}}
-    <div class="alert-wrapper">
-      {{view alert dismiss="dismissAlert"}}
-    </div>
-  {{/each}}
-</div>

ember/admin/app/templates/appearance.hbs

@@ -0,0 +1 @@
+Appearance

ember/admin/app/templates/application.hbs

@@ -1 +1,43 @@
-hey there
+<div id="page" class="global-page with-pane">
+
+  {{application/back-button className="back-control" toggleDrawer="toggleDrawer" goBack="goBack" canGoBack=false}}
+
+  <div id="drawer" class="global-drawer">
+    <header id="header" class="global-header">
+      {{application/back-button goBack="goBack" canGoBack=true}}
+
+      <div class="container">
+
+        <div class="header-primary">
+          <h1 class="header-title">
+            Administration
+          </h1>
+          {{ui/item-list items=view.headerPrimary class="header-controls"}}
+        </div>
+
+        <div class="header-secondary">
+          {{ui/item-list items=view.headerSecondary class="header-controls"}}
+        </div>
+
+      </div>
+    </header>
+  </div>
+
+  <main id="content" class="global-content">
+    <div class="container">
+      <div class="side-nav admin-nav title-control">
+        {{ui/dropdown-select items=view.adminNav}}
+      </div>
+      <div class="admin-content">
+        {{outlet}}
+      </div>
+    </div>
+  </main>
+
+</div>
+
+<div id="modal" class="modal fade">
+  {{outlet "modal"}}
+</div>
+
+{{render "alerts"}}

ember/admin/app/templates/basics.hbs

@@ -0,0 +1 @@
+Basics

ember/admin/app/templates/dashboard.hbs

@@ -0,0 +1 @@
+Dashboard

ember/admin/app/templates/error.hbs

@@ -1,13 +0,0 @@
-<header class="hero error-hero">
-  <div class="container">
-    <h2>Error</h2>
-  </div>
-</header>
-
-<div class="error-area">
-  <div class="container">
-    <p>{{model.message}}</p>
-
-    <pre>{{model.stack}}</pre>
-  </div>
-</div>

ember/admin/app/templates/extensions.hbs

@@ -0,0 +1 @@
+Extensions

ember/admin/app/templates/permissions.hbs

@@ -0,0 +1 @@
+Permissions

ember/admin/app/views/application.js

@@ -0,0 +1,79 @@
+import Ember from 'ember';
+
+import HasItemLists from '../mixins/has-item-lists';
+import AdminNavItem from '../components/ui/admin-nav-item';
+import SearchInput from '../components/ui/search-input';
+import UserDropdown from '../components/user-dropdown';
+
+export default Ember.View.extend(HasItemLists, {
+  itemLists: ['headerPrimary', 'headerSecondary', 'adminNav'],
+
+  drawerShowingChanged: Ember.observer('controller.drawerShowing', function() {
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      $('body').toggleClass('drawer-open', this.get('controller.drawerShowing'));
+    });
+  }),
+
+  didInsertElement: function() {
+    this.$('.global-content').click(function(e) {
+      if (view.get('controller.drawerShowing')) {
+        e.preventDefault();
+        view.set('controller.drawerShowing', false);
+      }
+    });
+  },
+
+  populateHeaderSecondary: function(items) {
+    var controller = this.get('controller');
+
+    items.pushObjectWithTag(SearchInput.extend({
+      placeholder: 'Search Forum',
+      controller: controller,
+      valueBinding: Ember.Binding.oneWay('controller.searchQuery'),
+      activeBinding: Ember.Binding.oneWay('controller.searchActive'),
+      action: function(value) { controller.send('search', value); }
+    }), 'search');
+
+    items.pushObjectWithTag(UserDropdown.extend({
+      user: this.get('controller.session.user'),
+      parentController: controller
+    }), 'user');
+  },
+
+  populateAdminNav: function(items) {
+    items.pushObjectWithTag(AdminNavItem.extend({
+      routeName: 'dashboard',
+      icon: 'bar-chart',
+      label: 'Dashboard',
+      description: 'Your forum at a glance.'
+    }), 'dashboard');
+
+    items.pushObjectWithTag(AdminNavItem.extend({
+      routeName: 'basics',
+      icon: 'pencil',
+      label: 'Basics',
+      description: 'Set your forum title, language, and other basic settings.'
+    }), 'basics');
+
+    items.pushObjectWithTag(AdminNavItem.extend({
+      routeName: 'permissions',
+      icon: 'key',
+      label: 'Permissions',
+      description: 'Configure who can see and do what.'
+    }), 'permissions');
+
+    items.pushObjectWithTag(AdminNavItem.extend({
+      routeName: 'appearance',
+      icon: 'paint-brush',
+      label: 'Appearance',
+      description: 'Customize your forum\'s colors, logos, and other variables.'
+    }), 'appearance');
+
+    items.pushObjectWithTag(AdminNavItem.extend({
+      routeName: 'extensions',
+      icon: 'puzzle-piece',
+      label: 'Extensions',
+      description: 'Add extra functionality to your forum and make it your own.'
+    }), 'extensions');
+  }
+});