From a83b55751392ceaaf101cf75938c0a733e37b126 Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Wed, 17 Apr 2024 05:39:45 +0200
Subject: [PATCH] feat(web): togglable menu, footer

---
 web/index.html  | 38 +++++++++++++++++++++++---------------
 web/src/main.rs | 16 ++++++++++++----
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/web/index.html b/web/index.html
index eb1fbf9d..1f7dcc05 100644
--- a/web/index.html
+++ b/web/index.html
@@ -19,16 +19,33 @@
 		}
 		body {
 			margin: 0;
+			padding-bottom: 1.2em;
 		}
 		nav {
 			top: 0;
 			position: sticky;
-			background-color: var(--background);
 			padding-top: .05em;
+			background-color: var(--background);
 		}
-		hr.nav {
+		footer {
+			width: 100%;
+			position: fixed;
+			bottom: 0;
+			background-color: var(--background);
+			text-align: center;
+			padding-bottom: 0;
+			line-height: 1rem;
+		}
+		span.footer {
+			padding: .1em;
+			font-size: .6em;
+			color: var(--secondary);
+		}
+		hr.sep {
 			margin-top: 0;
 			padding-top: 0;
+			margin-bottom: 0;
+			padding-bottom: 0;
 			border: 1px solid #bf616a70;
 			top: 1.65rem;
 			position: sticky;
@@ -36,8 +53,8 @@
 		div.sticky {
 			top: 4em;
 			position: sticky;
+			background-color: var(--background);
 		}
-		.hidden { display: none; }
 		a.upub-title {
 			color: var(--primary);
 			text-decoration: none;
@@ -53,8 +70,6 @@
 			max-height: 2em;
 			border-radius: 50%;
 		}
-		div.boxscroll {
-		}
 		div.tl-header {
 			background-color: #bf616a55;
 			color: #bf616a;
@@ -62,20 +77,13 @@
 		table.post-table {
 			border-collapse: collapse;
 		}
-		tr.post-table {
-			border: 1px dashed #bf616a;
+		table p {
+			margin: .5em;
 		}
+		tr.post-table,
 		td.post-table {
 			border: 1px dashed #bf616a;
 		}
-		@media screen and (max-width: 786px) {
-			div.boxscroll {
-				max-height: 100%;
-			}
-		}
-		table.align {
-			line-height: 1rem;
-		}
 		td.top {
 			vertical-align: top;
 		}
diff --git a/web/src/main.rs b/web/src/main.rs
index 4c6ad0da..6eae9894 100644
--- a/web/src/main.rs
+++ b/web/src/main.rs
@@ -17,6 +17,8 @@ fn main() {
 	let home_tl = Timeline::new(format!("{URL_BASE}/users/{}/inbox/page", username.get().unwrap_or_default()));
 	let server_tl = Timeline::new(format!("{URL_BASE}/inbox/page"));
 
+	let (menu, set_menu) = create_signal(false);
+
 	spawn_local(async move {
 		if let Err(e) = server_tl.more(cookie).await {
 			console_error(&format!("error populating timeline: {e}"));
@@ -37,9 +39,9 @@ fn main() {
 				<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>
+				<input type="submit" class="mr-2 rev" on:click=move |_| set_menu.set(!menu.get()) value="menu" style="float: right" />
 			</nav>
-			<hr class="nav" />
+			<hr class="sep" />
 			<div class="container mt-2 pt-2" >
 				<Router // TODO maybe set base="/web" ?
 					trailing_slash=TrailingSlash::Redirect
@@ -58,7 +60,7 @@ fn main() {
 						view! {
 							<main>
 								<div class="two-col" >
-									<div class="col-side sticky" >
+									<div class="col-side sticky" class:hidden=move || menu.get() >
 										<LoginBox
 											token_tx=set_cookie
 											token=cookie
@@ -71,7 +73,7 @@ fn main() {
 										<hr class="mt-1 mb-1" />
 										<PostBox />
 									</div>
-									<div class="col-main" >
+									<div class="col-main" class:w-100=move || menu.get() >
 										<Routes>
 											<Route path="/web" view=About />
 
@@ -90,6 +92,12 @@ fn main() {
 					}}
 				</Router>
 			</div>
+			<footer>
+				<div>
+					<hr class="sep" />
+					<span class="footer" >"\u{26fc} woven under moonlight  :: "<a href="https://git.alemi.dev/upub.git" target="_blank" >src</a>" :: wip by alemi "</span>
+				</div>
+			</footer>
 		}
 	);
 }