move alert section to header.html and get side-menu working.

I move the alert section to the /layouts/header.html template because
it was easier to get it to render between the logged-in user's site
header and the site's 'normal' header.

The site's side-menu (for logged-in users) still needs stuff adding to
it -- and tweaking -- but the base style, layout and whatnot is in
place.

templates/layouts/header.html

@@ -1,25 +1,109 @@
-<div>
+{% if roles.logged-in %}
-    {% if roles.logged-in %}
+<div class="be-site-header">
-    <a href="/dashboard">Dashboard</a>
+    <button type="button"
-    <a href="/user/edit">Edit Account</a>
+	    id="be-site-side-menu-toggle"
+	    onclick="toggleSiteSideMenu()">
+	<img alt="Site Side Menu"
+	     src="/images/icons/site-side-menu.png">
+	Menu
+    </button>
+
+    <div class="be-user-info">
+	<p><span>Logged in as: </span>{{user.username}}</p>
+    </div>
+</div>
+{% endif %}
+
+{% if roles.logged-in %}
+<div class="be-site-side-menu" id="be-site-side-menu">
+    <div>
+	<div>
+	    <a class="be-gui-link" href="/dashboard">
+		<img alt="Dashboard"
+		     src="/images/icons/dashboard.png">
+		Dashboard
+	    </a>
+	</div>
+	<div>
+	    <h2>Archive</h2>
+	    <a class="be-gui-link" href="/create/archive-entry">
+		<img alt="New Page"
+		     src="/images/icons/add-entry.png">
+		Create Entry
+	    </a>
+	    <a class="be-gui-link" href="/user/archive">
+		<img alt="New Page"
+		     src="/images/icons/manage-archive.png">
+		Archive Index
+	    </a>
+	</div>
+	<div>
+	    <h2>Pages</h2>
+	    <a class="be-gui-link" href="/create/page">
+		<img alt="New Page"
+		     src="/images/icons/add-page.png">
+		Add Page
+	    </a>
+	    <a class="be-gui-link" href="/user/pages">
+		<img alt="New Page"
+		     src="/images/icons/manage-pages.png">
+		Pages Index
+	    </a>
+	</div>
+    </div>
+    <div>
+	<h2>Settings</h2>
+	<a class="be-gui-link" href="/user/edit">
+	    <img alt="Edit Profile"
+		 src="/images/icons/profile.png">
+	    Edit Account
+	</a>
 	{% if roles.administrator %}
-    <a href="/site-settings">Site Settings</a>
+	<a class="be-gui-link" href="/users">
+	    <img alt="Site Settings"
+		 src="/images/icons/manage-users.png">
+	    Manage Users
+	</a>
+	<a class="be-gui-link" href="/site-settings">
+	    <img alt="Site Settings"
+		 src="/images/icons/settings.png">
+	    Site Settings
+	</a>
 	{% endif %}
-    <form action="/logout" method="post">
+    </div>
-	<input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
+    <div>
-	<input type="submit" value="Log Out">
+	<form action="/logout"
+	      method="post">
+	    <input required type="hidden"
+		   name="AUTHENTICITY-TOKEN"
+		   value="{{token}}">
+	    <button class="be-gui-button"
+		    type="submit">
+		<img alt="Log Out"
+		     src="/images/icons/logout.png">
+		Log Out
+	    </button>
 	</form>
-    {% endif %}
+    </div>
 </div>
-<div>
+{% endif %}
+
+<div id="fe-main">
+    {% if alert %}
+    <div class="be-alert-container">
+	{{alert | safe}}
+    </div>
+    {% endif %}
+
+    <div class="fe-site-header">
 	{% ifequal system-data.first.enable-site-logo 1 %}
 	<img alt="{{system-data.first.site-name}}"
 	     src="/images/site-logo.png">
 	{% endifequal %}
 	<h1>{{system-data.first.site-name}}</h1>
-</div>
+    </div>
 
-<div>
+    <div>
 	<nav>
 	    {% for page in system-data.last.first %}
 	    {% ifequal page.enable-nav-menu 1 %}
@@ -39,6 +123,5 @@
 	    {% endifequal %}
 	    {% endfor %}
 	</nav>
-</div>
+    </div>
-</div>
+    <hr>
-<hr>