Make the application modular to have a "main" and "backend" part.

app/views/_common/_components/content-section.volt

@@ -0,0 +1 @@
+

app/views/_common/_components/flash.volt

@@ -0,0 +1,22 @@
+
+{% set types = {
+    'error': 'danger',
+    'success': 'success',
+    'notice': 'info',
+    'warning': 'warning'
+} %}
+
+{% if (flash.has()) %}
+    {% for type, messages in flash.getMessages() %}
+        {% for message in messages %}
+            <div class="alert alert-{{ types[type] }} alert-dismissible" role="alert">
+                <button type="button" class="close" data-dismiss="alert">&times;</button>
+
+                <strong>{{ type|capitalize }}</strong>
+                <p>
+                    {{ message }}
+                </p>
+            </div>
+        {% endfor%}
+    {% endfor %}
+{% endif %}

app/views/_common/_components/footer.volt

@@ -0,0 +1,19 @@
+
+<footer class="footer">
+    <div class="footer-left">
+        Copyright &copy; 2017 - 2018
+        <a target="_blank" href="http://www.shufflingpixels.com">
+            Shufflingpixels
+        </a>
+    </div>
+
+    <div class="footer-middle">
+        <a class="footer-button-top" href="#top">
+            {{ icon('solid/caret-up') }}
+        </a>
+    </div>
+
+    <div class="footer-right">
+        Version 1.0.2
+    </div>
+</footer>

app/views/_common/_components/navigation.volt

@@ -0,0 +1,32 @@
+
+<div class="navigation" role="navigation">
+
+    <button class="menu-button" type="button" data-toggle="collapse" data-target="#main-menu" aria-expanded="false" aria-label="Toggle navigation">
+        {{ icon('solid/bars') }}
+    </button>
+
+    <div class="navigation-user-menu">
+    {% if auth.hasIdentity() %}
+        <div class="navigation-user-menu-dropdown">
+            <a id="user-dropdown-button" class="navigation-user-menu-dropdown-button"
+               data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
+                {{ icon('solid/user') }} <strong>{{ auth.getUser().username }}</strong>
+            </a>
+
+            <ul aria-labelledby="user-dropdown" class="navigation-user-menu-dropdown-list">
+                <li>{{ link_to(['for': 'user-settings'], '<i class="icon fas fa-cog"></i> Settings') }}</li>
+                <li>{{ link_to('/user/activity', '<i class="icon fas fa-list-alt"></i> Activity') }}</li>
+                <li role="separator" class="divider"></li>
+                <li>{{ link_to(['for': 'logout'], '<i class="icon far fa-times-circle"></i> Log out') }}</li>
+            </ul>
+        </div>
+    {% else %}
+        <div class="navigation-user-menu-login">{{ link_to(['for': 'login'], '<i class="icon far fa-arrow-alt-circle-right"></i> Login', 'class': 'login-button') }}</div>
+    {% endif %}
+    </div>
+
+    <nav class="navigation-menu collapse" id="main-menu">
+        {{ menu.render(0) }}
+    </nav>
+</div>