From 7b6cde549b1689e40007bdacc62d8e6b340484b1 Mon Sep 17 00:00:00 2001
From: Craig Oates <craig@craigoates.net>
Date: Tue, 27 Sep 2022 02:37:07 +0100
Subject: [PATCH] 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 | 163 +++++++++++++++++++++++++---------
 1 file changed, 123 insertions(+), 40 deletions(-)

diff --git a/templates/layouts/header.html b/templates/layouts/header.html
index 692e3d8..4d221a3 100644
--- a/templates/layouts/header.html
+++ b/templates/layouts/header.html
@@ -1,44 +1,127 @@
-<div>
-    {% if roles.logged-in %}
-    <a href="/dashboard">Dashboard</a>
-    <a href="/user/edit">Edit Account</a>
-    {% if roles.administrator %}
-    <a href="/site-settings">Site Settings</a>
-    {% endif %}
-    <form action="/logout" method="post">
-	<input required type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
-	<input type="submit" value="Log Out">
-    </form>
-    {% endif %}
-</div>
-<div>
-    {% 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>
+{% if roles.logged-in %}
+<div class="be-site-header">
+    <button type="button"
+	    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 %}
 
-<div>
-    <nav>
-	{% for page in system-data.last.first %}
-	{% ifequal page.enable-nav-menu 1 %}
-	{% if page.slug == "login" %}
-	<a href="/{{page.slug}}">{{page.title}}</a>
-	{% elif page.slug == "home" %}
-	<a href="/">{{page.title}}</a>
-	{% elif page.slug == "archive" %}
-	<a href="/{{page.slug}}">{{page.title}}</a>
-	{% elif page.slug == "pages" %}
-	<a href="/{{page.slug}}">{{page.title}}</a>
-	{% elif page.slug == "sign-up" %}
-	<a href="/{{page.slug}}">{{page.title}}</a>
-	{% else %}
-	<a href="/view/page/{{page.slug}}">{{page.title}}</a>
+{% 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 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 %}
-	{% endifequal %}
-	{% endfor %}
-    </nav>
-</div>
+    </div>
+    <div>
+	<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>
+    </div>
 </div>
-<hr>
+{% 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>
+	<nav>
+	    {% for page in system-data.last.first %}
+	    {% ifequal page.enable-nav-menu 1 %}
+	    {% if page.slug == "login" %}
+	    <a href="/{{page.slug}}">{{page.title}}</a>
+	    {% elif page.slug == "home" %}
+	    <a href="/">{{page.title}}</a>
+	    {% elif page.slug == "archive" %}
+	    <a href="/{{page.slug}}">{{page.title}}</a>
+	    {% elif page.slug == "pages" %}
+	    <a href="/{{page.slug}}">{{page.title}}</a>
+	    {% elif page.slug == "sign-up" %}
+	    <a href="/{{page.slug}}">{{page.title}}</a>
+	    {% else %}
+	    <a href="/view/page/{{page.slug}}">{{page.title}}</a>
+	    {% endif %}
+	    {% endifequal %}
+	    {% endfor %}
+	</nav>
+    </div>
+    <hr>