Merge pull request #81 from ragestudio/floating-sidebar

Floating sidebar

packages/app/constants/defaultSettings.json

@@ -15,6 +15,7 @@
     "postCard_expansible_actions": true,
     "feed_max_fetch": 20,
     "style.compactMode": false,
+    "sidebar.floating": false,
     "language": "en",
     "sidebarKeys": [
         "home",

packages/app/constants/settings/apparence/index.jsx

@@ -16,6 +16,16 @@ export default [
         "experimental": true,
         "storaged": true
     },
+    {
+        "id": "sidebar.floating",
+        "title": "Floating Sidebar",
+        "description": "Make the sidebar floats over layout content.",
+        "component": "Switch",
+        "icon": "MdOutlineLastPage",
+        "group": "layout",
+        "emitEvent": "app.softReload",
+        "storaged": true
+    },
     {
         "id": "reduceAnimations",
         "storaged": true,

packages/app/src/App.jsx

@@ -123,6 +123,15 @@ class App extends React.Component {
 				window.electron.ipcRenderer.invoke("app.minimize")
 			}
 		},
+		"app.reload": () => {
+			window.location.reload()
+		},
+		"app.softReload": () => {
+			this.forceUpdate()
+
+			app.eventBus.emit("layout.forceUpdate")
+			app.eventBus.emit("router.forceUpdate")
+		},
 		"app.openSearcher": () => {
 			App.publicMethods.openSearcher()
 		},

packages/app/src/components/Layout/sidebar/index.jsx

@@ -227,6 +227,7 @@ export default class Sidebar extends React.Component {
 					classnames(
 						"app_sidebar",
 						{
+							["floating"]: window.app?.settings.get("sidebar.floating"),
 							["collapsed"]: this.state.visible && this.state.collapsed,
 							["elevated"]: this.state.visible && this.state.elevated,
 							["hidden"]: !this.state.visible,

packages/app/src/components/Layout/sidebar/index.less

@@ -25,6 +25,10 @@
 	border-radius: 0 @app_sidebar_borderRadius @app_sidebar_borderRadius 0;
 	border: 1px solid var(--sidebar-background-color);
 
+	&.floating {
+		position: absolute;
+	}
+
 	&.collapsed {
 		width: 80px;
 		min-width: 80px;

packages/app/src/components/Layout/sidedrawer/index.jsx

@@ -224,7 +224,12 @@ export default class SidedrawerController extends React.Component {
 
 	render() {
 		return <div
-			className="sidedrawers-wrapper"
+			className={classnames(
+				"sidedrawers-wrapper",
+					{
+						["floating-sidebar"]: window.app?.settings.get("sidebar.floating")
+					}
+				)}
 		>
 			{this.state.drawers}
 		</div>

packages/app/src/components/Layout/sidedrawer/index.less

@@ -3,6 +3,12 @@
 .sidedrawers-wrapper {
     display: flex;
     flex-direction: row;
+
+    &.floating-sidebar {
+        z-index: 950;
+        position: absolute;
+        margin-left: @app_sidebar_collapsed_width;
+    }
     
     .sidedrawer {
         position: relative;

packages/app/src/components/PostCard/components/header/index.less

@@ -49,6 +49,7 @@
                 margin: 0;
                 font-family: "DM Mono", monospace;
                 align-self: start;
+                font-size: 1rem;
                 cursor: pointer;
             }
 

packages/app/src/components/Settings/index.jsx

@@ -91,6 +91,10 @@ const SettingItem = (props) => {
 			}
 		}
 
+		if (item.storaged) {
+			await window.app.settings.set(item.id, updateValue)
+		}
+
 		if (typeof item.emitEvent === "string") {
 			let emissionPayload = updateValue
 
@@ -105,10 +109,6 @@ const SettingItem = (props) => {
 			return false
 		}
 
-		if (item.storaged) {
-			await window.app.settings.set(item.id, updateValue)
-		}
-
 		if (item.debounced) {
 			setDelayedValue(null)
 		}

packages/app/src/layout.jsx

@@ -25,6 +25,9 @@ export default class Layout extends React.PureComponent {
 		"app.initialization.finish": () => {
 			app.eventBus.emit("layout.render.unlock")
 		},
+		"layout.forceUpdate": () => {
+			this.forceUpdate()
+		},
 		"layout.render.lock": () => {
 			this.setState({
 				renderLock: true,

packages/app/src/layouts/default/index.jsx

@@ -12,13 +12,18 @@ export default (props) => {
             <Drawer />
             <Sidebar user={props.user} />
             <Sidedrawer />
-            <Layout className="content_layout">
-                <Layout.Content className={classnames("layout_page", ...props.layoutPageModesClassnames ?? [])}>
-                    <div id="transitionLayer" className="fade-transverse-active">
-                        {React.cloneElement(props.children, props)}
-                    </div>
-                </Layout.Content>
-            </Layout>
+            <Layout.Content className={
+                classnames(
+                    "content_layout",
+                    ...props.contentClassnames ?? [],
+                    {
+                        ["floating-sidebar"]: window.app?.settings.get("sidebar.floating")
+                    }
+                )}>
+                <div id="transitionLayer" className="fade-transverse-active">
+                    {React.cloneElement(props.children, props)}
+                </div>
+            </Layout.Content>
         </Layout>
     </>
-}
+}

packages/app/src/theme/index.less

@@ -160,30 +160,29 @@ html {
 	}
 }
 
-.ant-layout,
 .content_layout {
-	width: 100%;
-	height: 100%;
-	max-height: 100vh;
-
-	background-color: transparent;
-}
-
-.layout_page {
 	position: relative;
 	-webkit-overflow-scrolling: touch;
-
+	
 	height: 100%;
+	width: 100%;
+	max-height: 100vh;
 
 	padding: 10px;
-
+	
 	overflow-x: hidden;
 	overflow-y: overlay;
-
+	
 	transition: all 150ms ease-in-out;
 
 	margin: var(--layoutMargin);
 	padding: var(--layoutPadding);
+
+	background-color: transparent;
+
+	&.floating-sidebar {
+		margin-left: @app_sidebar_collapsed_width;
+	}
 }
 
 .app_background_decorator {