A lot of things

templates/public/PAGE_CONTAINER.html

@@ -85,26 +85,28 @@
 <main id="app">
 	<nav id="menu">
 		<div class="$menu-header">
-			<div class="$menu-logo">
-				RP
-			</div>
-			<div class="$menu-title">
-				Romhack Plaza
-			</div>
+					<xf:macro id="style_variation_macros::picture"
+			arg-property="publicLogoUrl"
+			arg-propertyRetina="publicLogoUrl2x"
+			arg-width="{{ property('publicLogoWidth') }}"
+			arg-height="{{ property('publicLogoHeight') }}"
+			arg-alt="{$xf.options.boardTitle}" />
 		</div>
 		<div class="$menu-navigation">
 
 
-        <div class="$menu-group">
+
 			<xf:foreach loop="$navTree" key="$navSection" value="$navEntry" i="$i" if="{{ $navSection != $xf.app.defaultNavigationId }}">
+				<div class="$menu-group">
 				<div class="$menu-group-title">{{ $navEntry.title }}</div>
-				<xf:foreach loop="$navEntry.children" key="$childNavId" value="$childNavEntry" i="$j">
-					<a href="{{ $childNavEntry.href }}" class="$menu-item" >
-						<i data-lucide="{{ $childNavEntry.attributes.icon}}"></i><span>{{ $childNavEntry.title }}</span>
-					</a>
-				</xf:foreach>
+					<xf:foreach loop="$navEntry.children" key="$childNavId" value="$childNavEntry" i="$j">
+						<a href="{{ $childNavEntry.href }}" class="$menu-item" >
+							<i data-lucide="{{ $childNavEntry.attributes.icon}}"></i><span>{{ $childNavEntry.title }}</span>
+						</a>
+					</xf:foreach>
+				</div>
 			</xf:foreach>
-        </div>
+
 
     </div>
 
@@ -458,6 +460,7 @@
 
 {$ldJsonHtml|raw}
 
+<xf:js src="RomhackPlaza/Master/core.js" />
 <xf:include template="romhackplaza_js" />
 
 </body>

templates/public/misc_preferences_popup.html

@@ -0,0 +1,55 @@
+<div class="$settings-section">
+    <div class="$settings-section-title">
+        <i data-lucide="sun-moon" size="14"></i>
+        Theme
+    </div>
+        <xf:if is="$xf.visitor.style_variation === 'default'">
+            <button type="button" href="{{ link_type( 'public', link('misc/style-variation'), null, {
+                'variation': 'alternate',
+                'reset': null,
+                't': csrf_token(),
+                '_xfRedirect': $redirect
+            }) }}" class="$settings-theme-toggle" rel="nofollow" data-xf-click="style-variation" data-variation="alternate">
+                <span class="$settings-theme-toggle-inner">
+                    <i data-lucide="moon" size="15"></i>
+                    Dark
+                    <span class="$settings-theme-toggle-badge">ON</span>
+                </span>
+            </button>
+        </xf:if>
+        <xf:if is="$xf.visitor.style_variation === 'alternate'">
+            <button type="button" href="{{ link_type( 'public', link('misc/style-variation'), null, {
+                'variation': 'default',
+                'reset': null,
+                't': csrf_token(),
+                '_xfRedirect': $redirect
+            }) }}" class="$settings-theme-toggle" rel="nofollow" data-xf-click="style-variation" data-variation="default">
+                <span class="$settings-theme-toggle-inner">
+                    <i data-lucide="sun" size="15"></i>
+                    Light
+                    <span class="$settings-theme-toggle-badge">ON</span>
+                </span>
+            </button>
+        </xf:if>
+</div>
+
+<div class="$settings-separator"></div>
+
+<xf:if is="$xf.visitor.user_id">
+    <div class="$settings-section">
+        <div class="$settings-section-title">
+            <i data-lucide="user-cog" size="14"></i>
+            Account
+        </div>
+        <a href="{{ link('account') }}" class="$settings-link">
+            <i data-lucide="settings-2" size="14"></i>
+            XenForo settings
+            <i data-lucide="external-link" size="12" style="margin-left:auto"></i>
+        </a>
+    </div>
+</xf:if>
+<script>
+    if( window.refreshIcons !== undefined ) {
+        window.refreshIcons();
+    }
+</script>

templates/public/romhackplaza_css.html

@@ -1,3 +1,6 @@
 <style>
 	.lucide { fill: none !important; }
+    #menu { font-size: initial !important;}
+    .\$menu-group-title { font-size: 0.80rem !important; }
+    .\$menu-title { font-size: 1.275rem !important; }
 </style>

templates/public/romhackplaza_js.html

@@ -3,4 +3,10 @@
     document.addEventListener('DOMContentLoaded', function() {
         lucide.createIcons();
     });
+
+    window.refreshIcons = (container = document) => {
+        const pending = container.querySelectorAll('[data-lucide]');
+        if (pending.length === 0) return;
+        lucide.createIcons();
+    };
 </script>

templates/public/topbar_actions.html

@@ -29,8 +29,8 @@
     <xf:if is="$topbarModSeparator == true">
         <div class="$vertical-separator"></div>
     </xf:if>
-    <xf:if is="$xf.visitor.user_id">
-        <a href="#" class="$btn">
+    <xf:if is="$xf.visitor.canCreateEntry()">
+        <a href="{{ $xf.options.homePageUrl }}/submit" class="$btn">
             <i data-lucide="hard-drive-upload" size="18"></i>
         </a>
     </xf:if>
@@ -96,7 +96,24 @@
     </div>
 
     </xf:if>
-    <button class="$btn">
+    <a class="$btn" data-xf-click="menu" data-menu-pos-ref="< .p-navgroup" title="{{ phrase('settings')|for_attr }}" aria-haspopup="true">
         <i data-lucide="settings" size="18"></i>
-    </button>
+    </a>
+    <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
+         data-href="{{ link('misc/preferences-popup') }}"
+         data-nocache="true"
+         data-load-target=".js-convMenuBody"
+         data-xf-init="rhpz-dynamic-theme"
+    >
+        <div class="menu-content">
+            <div class="$settings-header">
+                <span>Settings</span>
+            </div>
+            <div class="js-convMenuBody">
+                <div class="$notifications-loading">
+                    <i data-lucide="loader-2" class="$spin"></i>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>