Merge e8a708e318 into c5047d8df8

frontend/src/static/js/components/page-layout/PageHeader/Logo.jsx

@@ -4,9 +4,11 @@ export const Logo = ({ src, loading = 'lazy', title, alt, href = '#' }) => {
   return src ? (
     <div className="logo">
       <a href={href} title={title}>
-        <span>
-          <img src={src} alt={alt || title} title={title} loading={loading} />
-        </span>
+	<h1>
+          <span>
+            <img src={src} alt={alt || title} title={title} loading={loading} />
+          </span>
+	</h1>
       </a>
     </div>
   ) : null;

frontend/src/static/js/components/page-layout/PageHeader/PageHeader.scss

@@ -253,6 +253,10 @@ a.user-menu-top-link {
     font-size: 1em;
   }
 
+  h1 {
+    margin: 0;
+  }
+
   a {
     color: inherit;
     display: block;

frontend/src/static/js/utils/renderer.js

@@ -19,6 +19,13 @@ export function renderPage(idSelector, PageComponent) {
   const appSidebar = document.getElementById('app-sidebar');
   const appContent = idSelector ? document.getElementById(idSelector) : undefined;
 
+  while (appHeader.firstChild) {
+    appHeader.removeChild(appHeader.firstChild);
+  }
+  while (appSidebar.firstChild) {
+    appSidebar.removeChild(appSidebar.firstChild);
+  }
+
   if (appContent && PageComponent) {
     ReactDOM.render(
       <AppProviders>

templates/components/header.html

@@ -1,4 +1,4 @@
-<div id="app-header"></div>
+<div id="app-header"><h1>{{ PORTAL_NAME }}</h1></div>
 
 {% comment %}
 Uncomment, or replace with your own cookie consent code.
@@ -17,4 +17,4 @@ Uncomment, or replace with your own cookie consent code.
 </script>
 
 
-{% endcomment %}
+{% endcomment %}

templates/components/sidebar.html

@@ -1 +1,26 @@
-<div id="app-sidebar"></div>
+<div id="app-sidebar">
+        <nav>
+                <ul>
+                        <li><a href="/">Home</a></li>
+                        <li><a href="/featured">Featured</a></li>
+                        <li><a href="/recommended">Recommended</a></li>
+                        <li><a href="/members">Members</a></li>
+                        <li><a href="/latest">Recent uploads</a></li>
+                        <li><a href="/tags">Tags</a></li>
+                        <li><a href="/categories">Categories</a></li>
+                </ul>
+        </nav>
+        <nav>
+                <ul>
+                        <li><a href="/history">History</a></li>
+                        <li><a href="/liked">Liked media</a></li>
+                </ul>
+        </nav>
+        <nav>
+                <ul>
+                        <li><a href="/about">About</a></li>
+                        <li><a href="/tos">Terms</a></li>
+                        <li><a href="/contact">Contact</a></li>
+                </ul>
+        </nav>
+</div>