From 663cea79ad24b54c0432208f29b9a0f0db93872e Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Wed, 17 Apr 2024 04:33:34 +0200
Subject: [PATCH] feat(web): sticky navbar and post box

because of this the whole page now scrolls properly and remembers your
scroll position if you use back/forward!
---
 web/index.html  | 22 ++++++++++++++++++++--
 web/src/main.rs | 18 ++++++++----------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/web/index.html b/web/index.html
index 92cd86fc..eb1fbf9d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -17,6 +17,26 @@
 		:root {
 			--main-col-percentage: 70%;
 		}
+		body {
+			margin: 0;
+		}
+		nav {
+			top: 0;
+			position: sticky;
+			background-color: var(--background);
+			padding-top: .05em;
+		}
+		hr.nav {
+			margin-top: 0;
+			padding-top: 0;
+			border: 1px solid #bf616a70;
+			top: 1.65rem;
+			position: sticky;
+		}
+		div.sticky {
+			top: 4em;
+			position: sticky;
+		}
 		.hidden { display: none; }
 		a.upub-title {
 			color: var(--primary);
@@ -34,8 +54,6 @@
 			border-radius: 50%;
 		}
 		div.boxscroll {
-			max-height: calc(100vh - 7rem);
-			overflow-y: scroll;
 		}
 		div.tl-header {
 			background-color: #bf616a55;
diff --git a/web/src/main.rs b/web/src/main.rs
index 644a8ea6..4c6ad0da 100644
--- a/web/src/main.rs
+++ b/web/src/main.rs
@@ -33,16 +33,14 @@ fn main() {
 
 	mount_to_body(
 		move || view! {
-			<nav class="w-100">
-				<p>
-					<code><a class="upub-title" href=move || if cookie.get().present() { "/web/home" } else { "/web/server" } >μpub</a></code>
-					<small class="ml-1 mr-1" ><a class="clean" href="/web/server" >micro social network, federated</a></small>
-					/* TODO kinda jank with the float but whatever, will do for now */
-					<small style="float: right" ><a href="https://git.alemi.dev/upub.git" >src</a></small>
-				</p>
+			<nav class="w-100 mt-1 mb-1 pb-s">
+				<code class="color ml-3" ><a class="upub-title" href=move || if cookie.get().present() { "/web/home" } else { "/web/server" } >μpub</a></code>
+				<small class="ml-1 mr-1" ><a class="clean" href="/web/server" >micro social network, federated</a></small>
+				/* TODO kinda jank with the float but whatever, will do for now */
+				<small class="mr-1" style="float: right" ><a href="https://git.alemi.dev/upub.git" >src</a></small>
 			</nav>
-			<hr />
-			<div class="container" >
+			<hr class="nav" />
+			<div class="container mt-2 pt-2" >
 				<Router // TODO maybe set base="/web" ?
 					trailing_slash=TrailingSlash::Redirect
 					fallback=move || view! { 
@@ -60,7 +58,7 @@ fn main() {
 						view! {
 							<main>
 								<div class="two-col" >
-									<div class="col-side" >
+									<div class="col-side sticky" >
 										<LoginBox
 											token_tx=set_cookie
 											token=cookie