Add preference for configuring sticky navbar

Fixes #1354

src/nitter.nim

@@ -66,10 +66,10 @@ settings:
 
 routes:
   get "/":
-    resp renderMain(renderSearch(), request, cfg, themePrefs())
+    resp renderMain(renderSearch(), request, cfg, cookiePrefs())
 
   get "/about":
-    resp renderMain(renderAbout(), request, cfg, themePrefs())
+    resp renderMain(renderAbout(), request, cfg, cookiePrefs())
 
   get "/explore":
     redirect("/about")

src/prefs_impl.nim

@@ -60,6 +60,9 @@ genPrefs:
     stickyProfile(checkbox, true):
       "Make profile sidebar stick to top"
 
+    stickyNav(checkbox, true):
+      "Keep navbar fixed to top"
+
     bidiSupport(checkbox, false):
       "Support bidirectional text (makes clicking on tweets harder)"
 

src/routes/router_utils.nim

@@ -17,13 +17,8 @@ template cookiePrefs*(): untyped {.dirty.} =
 template cookiePref*(pref): untyped {.dirty.} =
   getPref(cookies(request), pref)
 
-template themePrefs*(): Prefs =
-  var res = defaultPrefs
-  res.theme = cookiePref(theme)
-  res
-
 template showError*(error: string; cfg: Config): string =
-  renderMain(renderError(error), request, cfg, themePrefs(), "Error")
+  renderMain(renderError(error), request, cfg, cookiePrefs(), "Error")
 
 template getPath*(): untyped {.dirty.} =
   $(parseUri(request.path) ? filterParams(request.params))

src/routes/unsupported.nim

@@ -10,7 +10,7 @@ export feature
 proc createUnsupportedRouter*(cfg: Config) =
   router unsupported:
     template feature {.dirty.} =
-      resp renderMain(renderFeature(), request, cfg, themePrefs())
+      resp renderMain(renderFeature(), request, cfg, cookiePrefs())
 
     get "/about/feature": feature()
     get "/login/?@i?": feature()

src/sass/index.scss

@@ -115,11 +115,14 @@ ul {
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
-  padding-top: 50px;
   margin: auto;
   min-height: 100vh;
 }
 
+body.fixed-nav .container {
+  padding-top: 50px;
+}
+
 .icon-container {
   display: inline;
 }

src/sass/navbar.scss

@@ -3,7 +3,6 @@
 nav {
   display: flex;
   align-items: center;
-  position: fixed;
   background-color: var(--bg_overlays);
   box-shadow: 0 0 4px $shadow;
   padding: 0;
@@ -16,6 +15,10 @@ nav {
   .icon-button button {
     color: var(--fg_nav);
   }
+
+  body.fixed-nav & {
+    position: fixed;
+  }
 }
 
 .inner-nav {

src/sass/profile/_base.scss

@@ -39,7 +39,11 @@
     text-align: left;
     vertical-align: top;
     max-width: 32%;
-    top: 50px;
+    top: 0;
+
+    body.fixed-nav & {
+        top: 50px;
+    }
 }
 
 .profile-result {

src/sass/tweet/thread.scss

@@ -16,8 +16,10 @@
 
 .main-tweet,
 .replies {
-  padding-top: 50px;
-  margin-top: -50px;
+  body.fixed-nav & {
+    padding-top: 50px;
+    margin-top: -50px;
+  }
 }
 
 .main-tweet .tweet-content {

src/views/general.nim

@@ -131,7 +131,8 @@ proc renderMain*(body: VNode; req: Request; cfg: Config; prefs=defaultPrefs;
     renderHead(prefs, cfg, req, titleText, desc, video, images, banner, ogTitle,
                rss, twitterLink)
 
-    body:
+    let bodyClass = if prefs.stickyNav: "fixed-nav" else: ""
+    body(class=bodyClass):
       renderNavbar(cfg, req, rss, twitterLink)
 
       tdiv(class="container"):