add option to place sidebar right

sugarcube/src/PassageReady.tw

@@ -0,0 +1,5 @@
+:: PassageReady
+<<if !setup.doOnceAfterReload>>
+    <<run setup.settingsApply($settings)>>
+    <<run setup.doOnceAfterReload = true>>
+<</if>>

sugarcube/src/menu/Menu.tw

@@ -1,10 +1,15 @@
 :: Menu[menu]
 <h2>Settings</h2>
-<h3>User Interface</h3>
-    <<set $settings.ui ??= {}>>
-    <<set $settings.ui.actionsAtBottom ??= false>>
-    <p>
-       <<checkbox "$settings.ui.actionsAtBottom" false true autocheck>> Display the available actions at the bottom of each passage instead of on the left side (only effects screens which are large enough to display the actions on the left to begin with).
+<h3>User Interface (Experimental)</h3>
+	<<set $settings.ui ??= {}>>
+	<<set $settings.ui.actionsAtBottom ??= false>>
+	<<set $settings.ui.sidebarRight ??= false>>
+	<<set $settings.ui.css ??= "">>
+	<p>
+		<<checkbox "$settings.ui.actionsAtBottom" false true autocheck>> Display the available actions at the bottom of each passage instead of on the left side (only effects screens which are large enough to display the actions on the left to begin with).
+	</p>
+	<p>
+       <<checkbox "$settings.ui.sidebarRight" false true autocheck>> Display the sidebar on the right instead of the left side.
     </p>
 <hr/>
 <h3>Gameplay</h3>

sugarcube/src/settings/settings.js

@@ -34,15 +34,24 @@ Save.onLoad.add(function (save) {
 });
 
 setup.settingsApply = function(settings){
-    switch(settings.autosave){
+	console.warn('Aplly settings',settings);
+	switch(settings.autosave){
 		case 'ALWAYS':
-            Config.saves.autosave = true;
-            break;
-        case 'AWAKE':
-            Config.saves.autosave = ['sleepAwake','autosave'];
-            break;
-        case 'NONE':
-            Config.saves.autosave = false;
-            break;
-    }
+			Config.saves.autosave = true;
+			break;
+		case 'AWAKE':
+			Config.saves.autosave = ['sleepAwake','autosave'];
+			break;
+		case 'NONE':
+			Config.saves.autosave = false;
+			break;
+	}
+	switch(settings.ui?.sidebarRight){
+		case true:
+			$("#ui-bar").addClass("uiBarRight");
+			break;
+		default:
+
+			break;
+	}
 }

sugarcube/src/style/sidebarOnRight.css

@@ -0,0 +1,29 @@
+#ui-bar.uiBarRight{
+	left: unset;
+	right: 0;
+}
+
+#ui-bar.uiBarRight.stowed {
+	left: unset;
+	right: -15.5em;
+}
+
+#ui-bar.uiBarRight #ui-bar-toggle{
+	right: unset;
+	left: 0;
+	border-right: 1px solid #444;
+}
+
+#ui-bar.uiBarRight~#story {
+	margin-left: 1em;
+	margin-right: 1em;
+}
+
+#ui-bar.uiBarRight.stowed~#story{
+	margin-left: 1em;
+	margin-right: 1em;
+}
+
+#ui-bar.uiBarRight~#story #actions {
+	left: 1em;
+}